Advanced Usage

The setups are a nice way to get an editor up and running with minimal configuration, but they have multiple downsides. If you want to fully customize which extensions are added and which styles are imported, this page will show you how.

Creating an editor

All the setups are an abstraction over createEditor() which can be used directly for more control.

index.js

import "prism-code-editor/prism/languages/javascript"

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

import { matchBrackets } from "prism-code-editor/match-brackets"

// Importing styles

import "prism-code-editor/layout.css"

import "prism-code-editor/themes/github-dark.css"

export const editor = createEditor(

"#editor",

{ language: "javascript" },

// Initial extensions

matchBrackets(),

)

import("./extensions")

Adding extensions

The 3rd argument onward to createEditor() are the extensions you want the editor to be initialized with, but you can also add more extensions later with the editor.addExtensions() method. The example shown uses a dynamic import() to load most extensions. This enables code splitting for even faster load times.

extensions.js

// Required by searchWidget()

import "prism-code-editor/search.css"

// Required by copyButton()

import "prism-code-editor/copy-button.css"

// Required by indentGuides()

import "prism-code-editor/guides.css"

// Adds automatic indentation and comment toggling

import "prism-code-editor/languages/html"

import "prism-code-editor/languages/clike"

import "prism-code-editor/languages/css"

import { searchWidget, highlightSelectionMatches } from "prism-code-editor/search"

import { defaultCommands, editHistory } from "prism-code-editor/commands"

import { cursorPosition } from "prism-code-editor/cursor"

import { copyButton } from "prism-code-editor/copy-button"

import { matchTags } from "prism-code-editor/match-tags"

import { highlightBracketPairs } from "prism-code-editor/highlight-brackets"

import { indentGuides } from "prism-code-editor/guides"

import { editor } from "./index"

editor.addExtensions(

highlightSelectionMatches(),

searchWidget(),

defaultCommands(),

copyButton(),

matchTags(),

highlightBracketPairs(),

cursorPosition(),

editHistory(),

indentGuides(),

)

Utilities

The PrismEditor object returned by createEditor() has some useful properties and methods, but to keep the core as light as possible, many functions that could’ve been methods on PrismEditor are external instead. This includes insertText(), setSelection(), getLanguage(), and getClosestToken()

Using placeholders

createEditor() will append the editor to your container. If you want more control over where your editor ends up, you can use editorFromPlaceholder() instead, which will replace the placeholder with the new editor. Additionally, the textContent of the placeholder will be used as the editor’s value unless options.value is defined. The placeholder doesn’t have to be an element; it can also be a Text or Comment node.

Avoiding layout shifts

Adding editors to your page can cause layout shifts. If you’re using editorFromPlaceholder() with placeholders that are the same size as the editor, layout shifts can be avoided. Working example. If you’re using a static-site generator, a better solution can be found in the Server-side rendering guide.