Extensions

One of the key features of this library is that most features are implemented by optional extensions. This is to keep the core light for those who don’t need the extra functionality.

List of extensions

Non-exhaustive list of extensions you can add:

• defaultCommands() adds many commands expected from an editor.
• editHistory() overrides the browsers native undo/redo functionality.
• matchBrackets() matches brackets together and allows rainbow brackets.
• matchTags() matches XML tags together and highlights a pair when the cursor is on either tag.
• copyButton() adds a copy button to the editor.
• indentGuides() adds indentation guides to the editor.
• cursorPosition() can scroll the cursor into view and calculate its position. Used by multiple other extensions.
• highlightBracketPairs() highlights a bracket pair when the cursor is between them. Requires matchBrackets().
• searchWidget() adds a widget for search and replace.
• highlightSelectionMatches() highlights all copies of user selected text.

Later guides will show some of the more sophisticated extensions in more detail.

Note

When using editHistory(), programmatically updating an editor’s value using setOptions() won’t reset the history. Call editor.extensions.history.clear() to clear the history. This isn’t necessary when using setups.

Adding overlays

The addOverlay() utility can be used to add overlays to an editor which is used by many extensions. Overlays are added to the .pce-overlays element and will get styled with position: absolute and inset: 0 by default, which will make them the same size as the textarea, including the textarea’s padding. Overlays also inherit pointer-events: none and user-select: none.

Without a z-index, the overlay will be above the textarea, but beneath the syntax highlighted code. z-index: -1 will pull it behind the textarea, while z-index: 1 pulls it in front of the code and the cursor. z-index: 3 pulls it in front of the line numbers.

Creating your own

import { Extension } from "prism-code-editor"

import { Extension } from "prism-code-editor"

interface MyExtension extends Extension {}

const myExtension = (): MyExtension => {

// Add local variables and functions in the closure

return {

update(editor, options) {

// Called when the extension is added to an editor

// And when the options change

},

}

}

You can also make a class that implements Extension if that’s preferred.

Using a plain function

Plain functions can also be extensions. These functions won’t be called again when the editor’s options change.

import { BasicExtension, createEditor } from "prism-code-editor"

import { BasicExtension, createEditor } from "prism-code-editor"

const myExtension = (): BasicExtension => {

return (editor, options) => {

// This will only be called before the first render

}

}

createEditor("#editor", {}, myExtension(), (editor, options) => {

// This will only be called before the first render

})