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.

Common extensions

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.
customCursor() overrides the browser’s cursor and allows changing the blinking animation and animating the position.
highlightBracketPairs() highlights a bracket pair when the cursor is between them. Requires matchBrackets().
searchWidget() adds a widget for search and replace.
highlightSelectionMatches() highlights all instances of the user’s selected text.

Once added to an editor, many extensions can be accessed from the editor.extensions property. Later guides will show some of the more sophisticated extensions in detail.

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"

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"

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
})