Prism code editor
Lightweight, extensible code editor component for the web using Prism
You can change the config above and see the result.
Key features
- Core is 3kB including Prism
- Line numbers
- Optional word wrap
- Line- and block comment toggling
- Search and replace functionality
- Wraps selection in brackets/quotes
- Automatic indentation
- Automatic closing of brackets, quotes and tags
- Indent selected lines with tab key
- Custom undo/redo behavior
- Highlights the line with the cursor
- Bracket matching and rainbow brackets
- Accessible to screen readers and keyboard-only users
- Works great on mobile
Example settings
Basic usage
You can import 4 different setups. These will automatically import the necessary styles and scope them with a shadow root while adding various extensions. These are only recommended for quickly getting started.
With frameworks
The API is very friendly towards creating wrappers for most frameworks. Under is an example of a wrapper for React.
This is how the component could be used:
Advanced usage
With little effort, you can fully customize which extensions are added and how they're loaded.
To minimize your main javascript bundle, you can dynamically import extensions.
Web components
The library includes a custom element wrapper for each of the 4 setups you can import.
The custom element can be used like this:
Various examples
Read-only code folding
In read-only editors, you can add code folding. You can see both how the code folding works and how to add it below. Overscrolling has also been added to this editor.