🔌 Pluggable Parser Architecture
Easy to extend with custom language parsers. Built-in support for JavaScript and plain text, with a simple API for adding more.
🎨 Advanced Theme System
CSS variable-based theming with built-in light and dark themes. Create custom themes with full control over syntax colors.
📦 Multiple Build Formats
Ships with ESM, CJS, and IIFE builds. Use it with any bundler or directly in the browser via CDN.
✨ Perfect Alignment
Transparent textarea overlay ensures perfect WYSIWYG alignment between input and highlighted preview.
🔍 TypeScript Support
Full TypeScript definitions included for excellent IDE support and type safety.
🧪 Well Tested
Comprehensive test suite ensures reliability. DOM recovery and parser registry thoroughly tested.
Quick Start
Install via npm:
Or use via CDN:
Live Demos
📚 How to Use Prism.js with Synesthesia
HTML Markup Language
CSS Stylesheets
JavaScript Programming
Python Programming
Java Programming
Go Programming
Core API
new Synesthesia(target, options)
Initialize editor on target element(s)
Returns: Array<Synesthesia> - Array of instances
instance.getValue()
Get the current editor content
Returns: string
instance.setValue(text)
Set the editor content
Parameters: text: string
instance.setLanguage(language)
Change the syntax highlighting language
Parameters: language: string
Synesthesia.parserRegistry
Access the global parser registry to add custom language support
Methods: register(), get(), getByLanguage(), list()
Synesthesia.setTheme(theme)
Set the global theme for all instances
Parameters: theme: string | Theme