Prism code editor

Demos | API Docs

Lightweight, extensible code editor component for the web using Prism.

Why?

There are multiple fully featured code editors for the web such as Monaco, Ace and CodeMirror. While these are awesome, they have a large footprint and are likely overkill for code examples, forms, playgrounds or anywhere you won't display large documents.

How?

This library overlays syntax highlighted code over a </code>. Libraries like <a href="https://github.com/kazzkiq/CodeFlask" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CodeFlask</a>, <a href="https://github.com/react-simple-code-editor/react-simple-code-editor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">react-simple-code-editor</a>, and many others have been doing this for years, but this library offers some distinct advantages: <br /> <br />- It uses a trimmed Prism's core less than ⅓ the size that no longer relies on global variables. <br />- It re-exports Prism's languages that now automatically import their required dependencies and embedded languages are resolved at runtime. <br />- It splits the highlighted code into lines. This makes it easy to add line numbers, highlight a line and only update changed lines in the DOM for efficient updates. <br />- The core is light as a feather with a wide array of <a href="#extensions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">extensions</a> you can choose from and <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">multiple events</a> to listen to. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Contents</h2> <br /> <br />- <a href="#installation" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Installation</a> <br />- <a href="#basic-usage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Basic usage</a> <br />- <a href="#advanced-usage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Advanced usage</a> <br />- <a href="#usage-with-frameworks" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Usage with frameworks</a> <br />- <a href="#options" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Options</a> <br />- <a href="#events" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Events</a> <br />- <a href="#importing-prism" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Importing Prism</a> <br /> - <a href="#importing-grammars" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Importing grammars</a> <br />- <a href="#usage-with-nodejs" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Usage with Node.js</a> <br />- <a href="#examples" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Examples</a> <br />- <a href="#extensions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Extensions</a> <br /> - <a href="#importing-extensions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Importing extensions</a> <br /> - <a href="#creating-your-own" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Creating your own</a> <br />- <a href="#styling" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Styling</a> <br /> - <a href="#importing-themes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Importing themes</a> <br /> - <a href="#adding-themes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Adding themes</a> <br /> - <a href="#scrollbar-styling" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Scrollbar styling</a> <br /> - <a href="#advanced-styling" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Advanced styling</a> <br /> - <a href="#creating-a-theme" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Creating a theme</a> <br />- <a href="#language-specific-behavior" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Language specific behavior</a> <br /> - <a href="#importing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Importing</a> <br /> - <a href="#individual-imports" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Individual imports</a> <br /> - <a href="#adding-your-own" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Adding your own</a> <br />- <a href="#avoiding-layout-shifts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Avoiding layout shifts</a> <br />- <a href="#tooltips" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tooltips</a> <br />- <a href="#overscroll" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Overscroll</a> <br />- <a href="#rtl-support" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">RTL support</a> <br />- <a href="#editing-key-commands" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Editing key commands</a> <br />- <a href="#web-components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Web components</a> <br />- <a href="#performance" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Performance</a> <br />- <a href="#compatibility" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Compatibility</a> <br />- <a href="#credits" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Credits</a> <br />- <a href="#contributing" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Contributing</a> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2> <br /> <br /> npm i prism-code-editor <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Basic usage</h2> <br /> <br />The library includes 4 different setups you can import. These will automatically import the necessary styles and scope them with a shadow root, add various extensions and import all language specific behavior. There are also <a href="#web-components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">web components</a> wrapping these setups if that's preferred. <br /> <br />These setups are very cumbersome to customize and are therefore only recommended while getting started. <br /> <br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from "prism-code-editor/setups" <br />// Importing Prism grammars <br />import "prism-code-editor/prism/languages/markup" <br /> <br />const editor = basicEditor( <br /> "#editor", <br /> { <br /> language: "html", <br /> theme: "github-dark", <br /> }, <br /> () => console.log("ready"), <br />) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><strong>Note:</strong> You might want to add </code>display: grid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to the container the editor is added to. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Advanced usage</h2> <br /> <br />With little effort, you can fully customize which extensions are added and how they're loaded. This won't use a shadow root which makes the editor much easier to style and customize. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />// index.ts <br />import "prism-code-editor/prism/languages/markup" <br />import "prism-code-editor/prism/languages/css-extras" <br />import "prism-code-editor/prism/languages/javascript" <br /> <br />import { createEditor } from "prism-code-editor" <br />import { matchBrackets } from "prism-code-editor/match-brackets" <br />import { indentGuides } from "prism-code-editor/guides" <br /> <br />// Importing styles <br />import "prism-code-editor/layout.css" <br />import "prism-code-editor/scrollbar.css" <br />import "prism-code-editor/themes/github-dark.css" <br /> <br />export const editor = createEditor( <br /> "#editor", <br /> { language: "html" }, <br /> indentGuides(), <br /> matchBrackets(), <br />) <br /> <br />import("./extensions") <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />To minimize your main JavaScript bundle, you can dynamically import all extensions <em>(but some probably shouldn't be)</em>. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />// extensions.ts <br />import "prism-code-editor/search.css" <br />import "prism-code-editor/copy-button.css" <br />import "prism-code-editor/languages/html" <br />import "prism-code-editor/languages/clike" <br />import "prism-code-editor/languages/css" <br /> <br />import { searchWidget, highlightSelectionMatches } from "prism-code-editor/search" <br />import { defaultCommands, editHistory } from "prism-code-editor/commands" <br />import { cursorPosition } from "prism-code-editor/cursor" <br />import { copyButton } from "prism-code-editor/copy-button" <br />import { matchTags } from "prism-code-editor/match-tags" <br />import { highlightBracketPairs } from "prism-code-editor/highlight-brackets" <br />import { editor } from "./index" <br /> <br />editor.addExtensions( <br /> highlightSelectionMatches(), <br /> searchWidget(), <br /> defaultCommands(), <br /> copyButton(), <br /> matchTags(), <br /> highlightBracketPairs(), <br /> cursorPosition(), <br /> editHistory(), <br />) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Usage with frameworks</h2> <br /> <br />This library has been rewritten for React and SolidJS. These rewrites better integrate with their respective framework than any wrapper ever could and are highly recommended if you're already using React or SolidJS. <br /> <br />- <a href="https://github.com/FIameCaster/prism-react-editor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React rewrite</a> <br />- <a href="https://github.com/FIameCaster/solid-prism-editor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">SolidJS rewrite</a> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Options</h2> <br /> <br />| Name | Type | Description | <br />| ---- | ---- | ----------- | <br />| </code>language<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Language used for syntax highlighting. Defaults to </code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>tabSize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tab size used for indentation. Defaults to </code>2<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>insertSpaces<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the editor should insert spaces for indentation. Defaults to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Requires the </code>defaultCommands()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> extension to work. | <br />| </code>lineNumbers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether line numbers should be shown. Defaults to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>readOnly<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the editor should be read only. Defaults to </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>wordWrap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the editor should have word wrap. Defaults to </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. | <br />| </code>value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Initial value to display in the editor. | <br />| </code>rtl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the editor uses right to left directionality. Defaults to </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Requires extra CSS from </code>prism-code-editor/rtl-layout.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to work. | <br />| </code>onUpdate<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>(value: string => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Function called after the editor updates. | <br />| </code>onSelectionChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>(selection: InputSelection, value: string) => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Function called when the editor's selection changes. | <br />| </code>onTokenize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>(tokens: TokenStream, language: string, value: string) => void<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Function called before the tokens are stringified to HTML. | <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Events</h2> <br /> <br />There are three different event both you and extensions can listen to: </code>tokenize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>update<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>selectionChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />The </code>tokenize<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event is dispatched after the code is tokenized, which makes it possible to change the tokens before the HTML string is created. <br /> <br />The </code>update<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event is dispatched after the syntax highlighted DOM has been updated. <br /> <br />The </code>selectionChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event is dispatched right after the </code>update<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event or when the user changes the selection. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Importing Prism</h2> <br /> <br />If you want to add your own language to Prism or perform syntax highlighting outside of an editor, this is where to import from: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { <br /> // Functions <br /> highlightText, <br /> highlightTokens, <br /> tokenizeText, <br /> withoutTokenizer, <br /> // Record storing loaded languages <br /> languages, <br /> // Symbols used in grammars <br /> tokenize, <br /> rest, <br /> // Token class <br /> Token <br />} from "prism-code-editor/prism" <br /> <br />// Utilities used by grammars <br />import { <br /> clone, insertBefore, extend, embeddedIn <br />} from "prism-code-editor/prism/utils" <br /> <br />// To add your own language, just mutate the languages record <br />languages["my-language"] = { <br /> // ... <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />For more information about these exports, read the <a href="https://prism-code-editor.netlify.app/api/modules/prism" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">API documentation</a>. <br /> <br /><strong>Note:</strong> CRLF and CR line breaks are not supported. So before highlighting, you might need to normalize line breaks using something like </code>text.replace(/\r\n?/g, "\n")<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />As you might've seen from the examples, prism grammars are imported from </code>prism-code-editor/prism/languages/*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Importing a grammar will automatically register it through side effects. If you're importing multiple grammars, import order usually won't matter. The exception comes when grammars modify other grammars. Take this example: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import "prism-code-editor/prism/languages/typescript" <br />import "prism-code-editor/prism/languages/js-templates" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />This won't add </code>js-templates<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> features to </code>typescript<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because it extended </code>javascript<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before </code>js-templates<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> was added. Swapping the import order fixes the issue. <br /> <br />If you need access to many languages, you can import the following entry points: <br /> <br />- </code>prism-code-editor/prism/languages<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for all languages (~180kB) <br />- </code>prism-code-editor/prism/languages/common<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for <a href="https://github.com/FIameCaster/prism-code-editor/tree/main/package/src/prism/languages/common.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">42 common languages</a> (~30kB) <br /> <br />Take this simple markdown editor as an example. Here, only the markdown grammar is required initially. The common languages are dynamically imported and once they load, the editor is updated, which will highlight all markdown code blocks. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import "prism-code-editor/prism/languages/markdown" <br />import { createEditor } from "prism-code-editor" <br /> <br />const editor = createEditor("#editor", { language: "markdown" }) <br /> <br />import("prism-code-editor/prism/languages/common").then(() => editor.update()) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Usage with Node.js</h2> <br /> <br />The entry points </code>prism-code-editor/prism<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>prism-code-editor/prism/utils<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and the grammars from </code>prism-code-editor/prism/languages/*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can all run on Node.js for those who want to generate HTML with it. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2> <br /> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-sbvab7?file=index.html,src%2Fstyle.css,src%2Fmain.ts,readme.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>height: auto<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> without layout shifts</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-z2fgpu?file=src%2Fmain.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Simple tooltip example</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-tjcjyl?file=src%2Fautocomplete.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Autocomplete example</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-x7tzhu?file=src%2Fmain.ts,src%2Fextensions.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Formatting with Prettier</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-2wytja?file=src%2Fextensions.ts,src%2Fmain.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Relative line numbers</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-pk9ud7?file=src%2Fmain.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Usage in forms</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-y5pwon?file=src%2Fmain.ts,readme.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Adding elements to code lines</a> <br />- <a href="https://stackblitz.com/edit/vitejs-vite-sza5zx?file=src%2Fstyle.css,src%2Fextensions.ts" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Custom cursor</a> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Extensions</h2> <br /> <br />Most behavior isn't included by default and must be imported. This is to keep the core small for those who don't need the extra functionality. See <a href="#advanced-usage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">advanced usage</a> for how to add extensions. <br /> <br />There are extensions adding: <br /> <br />- Many common commands <br />- Bracket matching and rainbow brackets <br />- Tag matching <br />- Indentation guides <br />- Search, regex search and replace <br />- Selection match highlighting <br />- A copy button <br />- Read-only code folding <br />- Custom undo/redo <br /> <br />The default commands extension includes: <br /> <br />- Wrapping selection in brackets/quotes <br />- Automatic closing of brackets, quotes, and tags <br />- Automatic indentation and indentation with Tab key <br /> <br />And it includes these commands: <br /> <br />- Alt+ArrowUp/Down: Move line up/down <br />- Shift+Alt+ArrowUp/Down: Copy line up/down <br />- Ctrl+ArrowUp/Down (Not on MacOS): Scroll up/down 1 line <br />- Ctrl+Enter (Cmd+Enter on MacOS) Insert blank line <br />- Ctrl+[ (Cmd+[ on MacOS): Outdent line <br />- Ctrl+] (Cmd+] on MacOS): Indent line <br />- Shift+Ctrl+K (Shift+Cmd+K on MacOS): Delete line <br />- Ctrl+/ (Cmd+/ on MacOS): Toggle comment <br />- Shift+Alt+A: Toggle block comment <br />- Ctrl+M (Ctrl+Shift+M on MacOS): Toggle Tab capturing <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { matchBrackets } from "prism-code-editor/match-brackets" <br />import { matchTags } from "prism-code-editor/match-tags" <br />import { indentGuides } from "prism-code-editor/guides" <br />import { <br /> searchWidget, <br /> highlightSelectionMatches, <br /> highlightCurrentWord, <br /> showInvisibles <br />} from "prism-code-editor/search" <br />import { defaultCommands, editHistory } from "prism-code-editor/commands" <br />import { cursorPosition } from "prism-code-editor/cursor" <br />import { copyButton } from "prism-code-editor/copy-button" <br />import { highlightBracketPairs } from "prism-code-editor/highlight-brackets" <br />import { <br /> readOnlycodeFolding, <br /> markdownFolding, <br /> blockCommentFolding <br />} from "prism-code-editor/code-folding" <br />import { autoComplete } from "prism-code-editor/autocomplete" <br /> <br />// And CSS <br />import "prism-code-editor/search.css" <br />import "prism-code-editor/copy-button.css" <br />import "prism-code-editor/code-folding.css" <br />import "prism-code-editor/invisibles.css" <br />import "prism-code-editor/autocomplete.css" <br />import "prism-code-editor/autocomplete-icons.css" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />import { Extension } from "prism-code-editor" <br /> <br />interface MyExtension extends Extension {} <br /> <br />const myExtension = (): MyExtension => { <br /> // Add local variables and functions in the closure <br /> <br /> return { <br /> update(editor, options) { <br /> // Called when the extension is added to an editor <br /> // And when the options change <br /> }, <br /> } <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />You can also write a class with an update method if that's preferred. <br /> <br />You can also use a plain function as an extension. This function won't be called when the editor's options change. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />import { BasicExtension, createEditor } from "prism-code-editor" <br /> <br />const myExtension = (): BasicExtension => { <br /> return (editor, options) => { <br /> // This won't be called when the options change <br /> } <br />} <br /> <br />createEditor("#editor", {}, (editor, options) => { <br /> // This will be called before the first render <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Handling Tab</h2> <br /> <br />If you're adding the default commands to your editor, the tab key is used for indentation. If this isn't wanted, you can change the behavior. <br /> <br />Users can at any time toggle tab capturing with Ctrl+M / Ctrl+Shift+M (Mac). <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { setIgnoreTab } from "prism-code-editor/commands" <br />setIgnoreTab(true) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Styling</h2> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />There are currently 13 different themes you can import, one of them being from </code>prism-code-editor/themes/github-dark.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />You can also dynamically import themes into your JavaScript. This is used by the demo website. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { loadTheme } from "prism-code-editor/themes" <br /> <br />const isDark = matchMedia("(prefers-color-scheme: dark)").matches <br /> <br />loadTheme(isDark ? "github-dark" : "github-light").then(theme => { <br /> console.log(theme) <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />If you're using the setups or web components, you can override the existing themes or add new ones. The example below might be different if you're not using Vite as your bundler. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { registerTheme } from "prism-code-editor/themes" <br /> <br />registerTheme("my-theme", () => import("./my-theme.css?inline")) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />You can import a stylesheet that will give a custom scrollbar to desktop Chrome and Safari. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import "prism-code-editor/scrollbar.css" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />You can change the color of the scrollbar thumb using the custom property </code>--editor__bg-scrollbar<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Different alphas will be set based on the state of the scrollbar thumb. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css <br />.prism-code-editor { <br /> /<em> Values are: Hue, saturation, lightness </em>/ <br /> --editor__bg-scrollbar: 210, 10%, 40%; <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />If you're not using any of the setups, the styles aren't scoped using a shadow root, which makes them easy to change. If you want to change color, background, font, line-height or similar, you can do it on </code>.prism-code-editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with CSS. <br /> <br />Default padding is </code>0.75em<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> left/right and </code>0.5em<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> top/bottom. If you want to change it, you can use the custom property </code>--padding-inline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for left/right. Padding top and bottom can changed by changing the margin on </code>.pce-wrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />There are many classes added to </code>.prism-code-editor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> you can use to style the editor based on its state: <br /> <br />- </code>pce-has-selection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if the textarea has a selection, and </code>pce-no-selection<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if not <br />- </code>pce-focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if the textarea is focused <br />- </code>show-line-numbers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if line numbers are enabled <br />- </code>pce-wrap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if word wrap is enabled, and </code>pce-nowrap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if not <br />- </code>pce-readonly<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if the editor is read-only <br /> <br />#### Creating a theme <br /> <br />It's likely that none of the themes perfectly fit your website. A great solution is to modify one of the <a href="https://github.com/FIameCaster/prism-code-editor/tree/main/package/src/themes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">included themes</a> to better suit your website. Alternatively, you can import one of the themes and override some of the styles in your on stylesheets. <br /> <br />Below is some additional styling information: <br /> <br />- </code>.pce-line::before<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will match a line number <br />- </code>.pce-line.active-line<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> matches the line with the cursor <br />- </code>.prism-code-editor::before<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the background for the line numbers <br />- The variable </code>--number-spacing<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the spacing to the right of the line numbers which defaults to </code>0.75em<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Language specific behavior</h2> <br /> <br />If you're not using the setups, automatic indentation, toggling comments, and automatic closing of tags won't work. You'll need to import the behavior or define it yourself. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />The easiest way to get this working, is to import all languages. This will add comment toggling, etc. to almost all Prism languages at ~3.6kB gzipped. It's recommended to dynamically import this since it's usually not needed before the page has loaded. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import("prism-code-editor/languages") <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />You can also import </code>prism-code-editor/languages/common<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instead to support a subset of common languages at less than 2kB gzipped. <br /> <br />#### Individual imports <br /> <br />Lastly, if you know exactly which languages you need, you can import behavior for individual languages. Refer to the list below for which imports adds comment toggling, etc. to which language(s). <br /> <br /><details> <br /> <summary>List of all imports</summary> <br /> <br> <br /> <p>The import for <code>ada</code> would be <code>prism-code-editor/languages/ada</code> for example. This list is <strong>NOT</strong> for Prism grammars.</p> <br /> <table> <br /> <thead> <br /> <tr><th>Import</th><th>Languages/aliases added</th></tr> <br /> </thead> <br /> <tbody> <br /> <tr><td><code>abap</code></td><td><code>abap</code></td></tr> <br /> <tr><td><code>abnf</code></td><td><code>abnf</code></td></tr> <br /> <tr><td><code>actionscript</code></td><td><code>actionscript</code></td></tr> <br /> <tr><td><code>ada</code></td><td><code>ada</code></td></tr> <br /> <tr><td><code>agda</code></td><td><code>agda</code></td></tr> <br /> <tr><td><code>al</code></td><td><code>al</code></td></tr> <br /> <tr><td><code>antlr4</code></td><td><code>g4</code> and <code>antlr4</code></td></tr> <br /> <tr><td><code>apacheconf</code></td><td><code>apacheconf</code></td></tr> <br /> <tr><td><code>apex</code></td><td><code>apex</code></td></tr> <br /> <tr><td><code>apl</code></td><td><code>apl</code></td></tr> <br /> <tr><td><code>applescript</code></td><td><code>applescript</code></td></tr> <br /> <tr><td><code>aql</code></td><td><code>aql</code></td></tr> <br /> <tr><td><code>arduino</code></td><td><code>ino</code> and <code>arduino</code></td></tr> <br /> <tr><td><code>arff</code></td><td><code>arff</code></td></tr> <br /> <tr><td><code>arturo</code></td><td><code>art</code> and <code>arturo</code></td></tr> <br /> <tr><td><code>asciidoc</code></td><td><code>adoc</code> and <code>asciidoc</code></td></tr> <br /> <tr><td><code>asm</code></td><td><code>arm-asm</code>, <code>armasm</code>, <code>asm6502</code>, <code>asmatmel</code> and <code>nasm</code></td></tr> <br /> <tr><td><code>aspnet</code></td><td><code>aspnet</code></td></tr> <br /> <tr><td><code>autohotkey</code></td><td><code>autohotkey</code></td></tr> <br /> <tr><td><code>autoit</code></td><td><code>autoit</code></td></tr> <br /> <tr><td><code>avisynth</code></td><td><code>avs</code> and <code>avisynth</code></td></tr> <br /> <tr><td><code>avro-idl</code></td><td><code>avdl</code> and <code>avro-idl</code></td></tr> <br /> <tr><td><code>awk</code></td><td><code>awk</code></td></tr> <br /> <tr><td><code>bash</code></td><td><code>sh</code>, <code>shell</code> and <code>bash</code></td></tr> <br /> <tr><td><code>basic</code></td><td><code>basic</code></td></tr> <br /> <tr><td><code>batch</code></td><td><code>batch</code></td></tr> <br /> <tr><td><code>bbj</code></td><td><code>bbj</code></td></tr> <br /> <tr><td><code>bicep</code></td><td><code>bicep</code></td></tr> <br /> <tr><td><code>birb</code></td><td><code>birb</code></td></tr> <br /> <tr><td><code>bison</code></td><td><code>bison</code></td></tr> <br /> <tr><td><code>bqn</code></td><td><code>bqn</code></td></tr> <br /> <tr><td><code>brightscript</code></td><td><code>brightscript</code></td></tr> <br /> <tr><td><code>bro</code></td><td><code>bro</code></td></tr> <br /> <tr><td><code>bsl</code></td><td><code>bsl</code></td></tr> <br /> <tr><td><code>cfscript</code></td><td><code>cfscript</code></td></tr> <br /> <tr><td><code>chaiscript</code></td><td><code>chaiscript</code></td></tr> <br /> <tr><td><code>cil</code></td><td><code>cil</code></td></tr> <br /> <tr><td><code>cilk</code></td><td><code>cilk-c</code>, <code>cilkc</code>, <code>cilk</code>, <code>cilk-cpp</code> and <code>cilkcpp</code></td></tr> <br /> <tr><td><code>clike</code></td><td><code>clike</code>, <code>js</code>, <code>javascript</code>, <code>ts</code>, <code>typescript</code>, <code>java</code>, <code>cs</code>, <code>csharp</code>, <code>c</code>, <code>cpp</code>, <code>go</code>, <code>d</code>, <code>dart</code>, <code>flow</code> and <code>haxe</code></td></tr> <br /> <tr><td><code>clojure</code></td><td><code>clojure</code></td></tr> <br /> <tr><td><code>cmake</code></td><td><code>cmake</code></td></tr> <br /> <tr><td><code>cobol</code></td><td><code>cobol</code></td></tr> <br /> <tr><td><code>coffeescript</code></td><td><code>coffee</code> and <code>coffeescript</code></td></tr> <br /> <tr><td><code>concurnas</code></td><td><code>conc</code> and <code>concurnas</code></td></tr> <br /> <tr><td><code>cooklang</code></td><td><code>cooklang</code></td></tr> <br /> <tr><td><code>coq</code></td><td><code>coq</code></td></tr> <br /> <tr><td><code>cshtml</code></td><td><code>razor</code> and <code>cshtml</code></td></tr> <br /> <tr><td><code>css</code></td><td><code>css</code>, <code>less</code>, <code>scss</code> and <code>sass</code></td></tr> <br /> <tr><td><code>cue</code></td><td><code>cue</code></td></tr> <br /> <tr><td><code>cypher</code></td><td><code>cypher</code></td></tr> <br /> <tr><td><code>dataweave</code></td><td><code>dataweave</code></td></tr> <br /> <tr><td><code>dax</code></td><td><code>dax</code></td></tr> <br /> <tr><td><code>dhall</code></td><td><code>dhall</code></td></tr> <br /> <tr><td><code>django</code></td><td><code>jinja2</code> and <code>django</code></td></tr> <br /> <tr><td><code>dns-zone-file</code></td><td><code>dns-zone</code> and <code>dns-zone-file</code></td></tr> <br /> <tr><td><code>docker</code></td><td><code>dockerfile</code> and <code>docker</code></td></tr> <br /> <tr><td><code>dot</code></td><td><code>gv</code> and <code>dot</code></td></tr> <br /> <tr><td><code>ebnf</code></td><td><code>ebnf</code></td></tr> <br /> <tr><td><code>editorconfig</code></td><td><code>editorconfig</code></td></tr> <br /> <tr><td><code>eiffel</code></td><td><code>eiffel</code></td></tr> <br /> <tr><td><code>ejs</code></td><td><code>ejs</code></td></tr> <br /> <tr><td><code>elixir</code></td><td><code>elixir</code></td></tr> <br /> <tr><td><code>elm</code></td><td><code>elm</code></td></tr> <br /> <tr><td><code>erb</code></td><td><code>erb</code></td></tr> <br /> <tr><td><code>erlang</code></td><td><code>erlang</code></td></tr> <br /> <tr><td><code>etlua</code></td><td><code>etlua</code></td></tr> <br /> <tr><td><code>excel-formula</code></td><td><code>xlsx</code>, <code>xls</code> and <code>excel-formula</code></td></tr> <br /> <tr><td><code>factor</code></td><td><code>factor</code></td></tr> <br /> <tr><td><code>false</code></td><td><code>false</code></td></tr> <br /> <tr><td><code>firestore-security-rules</code></td><td><code>firestore-security-rules</code></td></tr> <br /> <tr><td><code>fortran</code></td><td><code>fortran</code></td></tr> <br /> <tr><td><code>fsharp</code></td><td><code>fsharp</code></td></tr> <br /> <tr><td><code>ftl</code></td><td><code>ftl</code></td></tr> <br /> <tr><td><code>gap</code></td><td><code>gap</code></td></tr> <br /> <tr><td><code>gcode</code></td><td><code>gcode</code></td></tr> <br /> <tr><td><code>gdscript</code></td><td><code>gdscript</code></td></tr> <br /> <tr><td><code>gettext</code></td><td><code>gettext</code></td></tr> <br /> <tr><td><code>gherkin</code></td><td><code>gherkin</code></td></tr> <br /> <tr><td><code>git</code></td><td><code>git</code></td></tr> <br /> <tr><td><code>glsl</code></td><td><code>glsl</code> and <code>hlsl</code></td></tr> <br /> <tr><td><code>gml</code></td><td><code>gamemakerlanguage</code> and <code>gml</code></td></tr> <br /> <tr><td><code>gn</code></td><td><code>gni</code> and <code>gn</code></td></tr> <br /> <tr><td><code>go-module</code></td><td><code>go-mod</code> and <code>go-module</code></td></tr> <br /> <tr><td><code>gradle</code></td><td><code>gradle</code></td></tr> <br /> <tr><td><code>graphql</code></td><td><code>graphql</code></td></tr> <br /> <tr><td><code>groovy</code></td><td><code>groovy</code></td></tr> <br /> <tr><td><code>haml</code></td><td><code>haml</code></td></tr> <br /> <tr><td><code>handlebars</code></td><td><code>mustache</code>, <code>hbs</code> and <code>handlebars</code></td></tr> <br /> <tr><td><code>haskell</code></td><td><code>idr</code>, <code>idris</code>, <code>hs</code>, <code>haskell</code>, <code>purs</code> and <code>purescript</code></td></tr> <br /> <tr><td><code>hcl</code></td><td><code>hcl</code></td></tr> <br /> <tr><td><code>hoon</code></td><td><code>hoon</code></td></tr> <br /> <tr><td><code>html</code></td><td><code>markup</code>, <code>html</code>, <code>markdown</code> and <code>md</code></td></tr> <br /> <tr><td><code>ichigojam</code></td><td><code>ichigojam</code></td></tr> <br /> <tr><td><code>icon</code></td><td><code>icon</code></td></tr> <br /> <tr><td><code>iecst</code></td><td><code>iecst</code></td></tr> <br /> <tr><td><code>ignore</code></td><td><code>npmignore</code>, <code>hgignore</code>, <code>gitignore</code> and <code>ignore</code></td></tr> <br /> <tr><td><code>inform7</code></td><td><code>inform7</code></td></tr> <br /> <tr><td><code>ini</code></td><td><code>ini</code></td></tr> <br /> <tr><td><code>io</code></td><td><code>io</code></td></tr> <br /> <tr><td><code>j</code></td><td><code>j</code></td></tr> <br /> <tr><td><code>jolie</code></td><td><code>jolie</code></td></tr> <br /> <tr><td><code>jq</code></td><td><code>jq</code></td></tr> <br /> <tr><td><code>json</code></td><td><code>json</code>, <code>json5</code> and <code>jsonp</code></td></tr> <br /> <tr><td><code>jsx</code></td><td><code>jsx</code> and <code>tsx</code></td></tr> <br /> <tr><td><code>julia</code></td><td><code>julia</code></td></tr> <br /> <tr><td><code>keepalived</code></td><td><code>keepalived</code></td></tr> <br /> <tr><td><code>keyman</code></td><td><code>keyman</code></td></tr> <br /> <tr><td><code>kotlin</code></td><td><code>kts</code>, <code>kt</code> and <code>kotlin</code></td></tr> <br /> <tr><td><code>kumir</code></td><td><code>kumir</code></td></tr> <br /> <tr><td><code>kusto</code></td><td><code>kusto</code></td></tr> <br /> <tr><td><code>latex</code></td><td><code>context</code>, <code>tex</code> and <code>latex</code></td></tr> <br /> <tr><td><code>latte</code></td><td><code>latte</code></td></tr> <br /> <tr><td><code>lilypond</code></td><td><code>ly</code> and <code>lilypond</code></td></tr> <br /> <tr><td><code>linker-script</code></td><td><code>ld</code> and <code>linker-script</code></td></tr> <br /> <tr><td><code>liquid</code></td><td><code>liquid</code></td></tr> <br /> <tr><td><code>lisp</code></td><td><code>emacs-lisp</code>, <code>emacs</code>, <code>elisp</code> and <code>lisp</code></td></tr> <br /> <tr><td><code>livescript</code></td><td><code>livescript</code></td></tr> <br /> <tr><td><code>llvm</code></td><td><code>llvm</code></td></tr> <br /> <tr><td><code>lolcode</code></td><td><code>lolcode</code></td></tr> <br /> <tr><td><code>lua</code></td><td><code>lua</code></td></tr> <br /> <tr><td><code>magma</code></td><td><code>magma</code></td></tr> <br /> <tr><td><code>makefile</code></td><td><code>makefile</code></td></tr> <br /> <tr><td><code>mata</code></td><td><code>mata</code></td></tr> <br /> <tr><td><code>matlab</code></td><td><code>matlab</code></td></tr> <br /> <tr><td><code>maxscript</code></td><td><code>maxscript</code></td></tr> <br /> <tr><td><code>mel</code></td><td><code>mel</code></td></tr> <br /> <tr><td><code>mermaid</code></td><td><code>mermaid</code></td></tr> <br /> <tr><td><code>metafont</code></td><td><code>metafont</code></td></tr> <br /> <tr><td><code>mizar</code></td><td><code>mizar</code></td></tr> <br /> <tr><td><code>mongodb</code></td><td><code>mongodb</code></td></tr> <br /> <tr><td><code>monkey</code></td><td><code>monkey</code></td></tr> <br /> <tr><td><code>moonscript</code></td><td><code>moon</code> and <code>moonscript</code></td></tr> <br /> <tr><td><code>n1ql</code></td><td><code>n1ql</code></td></tr> <br /> <tr><td><code>n4js</code></td><td><code>n4jsd</code> and <code>n4js</code></td></tr> <br /> <tr><td><code>nand2tetris-hdl</code></td><td><code>nand2tetris-hdl</code></td></tr> <br /> <tr><td><code>naniscript</code></td><td><code>nani</code> and <code>naniscript</code></td></tr> <br /> <tr><td><code>neon</code></td><td><code>neon</code></td></tr> <br /> <tr><td><code>nevod</code></td><td><code>nevod</code></td></tr> <br /> <tr><td><code>nginx</code></td><td><code>nginx</code></td></tr> <br /> <tr><td><code>nim</code></td><td><code>nim</code></td></tr> <br /> <tr><td><code>nix</code></td><td><code>nix</code></td></tr> <br /> <tr><td><code>nsis</code></td><td><code>nsis</code></td></tr> <br /> <tr><td><code>objectivec</code></td><td><code>objc</code> and <code>objectivec</code></td></tr> <br /> <tr><td><code>ocaml</code></td><td><code>ocaml</code></td></tr> <br /> <tr><td><code>odin</code></td><td><code>odin</code></td></tr> <br /> <tr><td><code>opencl</code></td><td><code>opencl</code></td></tr> <br /> <tr><td><code>openqasm</code></td><td><code>qasm</code> and <code>openqasm</code></td></tr> <br /> <tr><td><code>oz</code></td><td><code>oz</code></td></tr> <br /> <tr><td><code>parigp</code></td><td><code>parigp</code></td></tr> <br /> <tr><td><code>parser</code></td><td><code>parser</code></td></tr> <br /> <tr><td><code>pascal</code></td><td><code>pascaligo</code>, <code>objectpascal</code> and <code>pascal</code></td></tr> <br /> <tr><td><code>peoplecode</code></td><td><code>pcode</code> and <code>peoplecode</code></td></tr> <br /> <tr><td><code>perl</code></td><td><code>perl</code></td></tr> <br /> <tr><td><code>php</code></td><td><code>php</code></td></tr> <br /> <tr><td><code>plant-uml</code></td><td><code>plantuml</code> and <code>plant-uml</code></td></tr> <br /> <tr><td><code>powerquery</code></td><td><code>mscript</code>, <code>pq</code> and <code>powerquery</code></td></tr> <br /> <tr><td><code>powershell</code></td><td><code>powershell</code></td></tr> <br /> <tr><td><code>processing</code></td><td><code>processing</code></td></tr> <br /> <tr><td><code>prolog</code></td><td><code>prolog</code></td></tr> <br /> <tr><td><code>promql</code></td><td><code>promql</code></td></tr> <br /> <tr><td><code>properties</code></td><td><code>properties</code></td></tr> <br /> <tr><td><code>protobuf</code></td><td><code>protobuf</code></td></tr> <br /> <tr><td><code>psl</code></td><td><code>psl</code></td></tr> <br /> <tr><td><code>pug</code></td><td><code>pug</code></td></tr> <br /> <tr><td><code>puppet</code></td><td><code>puppet</code></td></tr> <br /> <tr><td><code>pure</code></td><td><code>pure</code></td></tr> <br /> <tr><td><code>purebasic</code></td><td><code>pbfasm</code> and <code>purebasic</code></td></tr> <br /> <tr><td><code>python</code></td><td><code>rpy</code>, <code>renpy</code>, <code>py</code> and <code>python</code></td></tr> <br /> <tr><td><code>q</code></td><td><code>q</code></td></tr> <br /> <tr><td><code>qml</code></td><td><code>qml</code></td></tr> <br /> <tr><td><code>qore</code></td><td><code>qore</code></td></tr> <br /> <tr><td><code>qsharp</code></td><td><code>qs</code> and <code>qsharp</code></td></tr> <br /> <tr><td><code>r</code></td><td><code>r</code></td></tr> <br /> <tr><td><code>reason</code></td><td><code>reason</code></td></tr> <br /> <tr><td><code>rego</code></td><td><code>rego</code></td></tr> <br /> <tr><td><code>rescript</code></td><td><code>res</code> and <code>rescript</code></td></tr> <br /> <tr><td><code>rest</code></td><td><code>rest</code></td></tr> <br /> <tr><td><code>rip</code></td><td><code>rip</code></td></tr> <br /> <tr><td><code>roboconf</code></td><td><code>roboconf</code></td></tr> <br /> <tr><td><code>robotframework</code></td><td><code>robot</code> and <code>robotframework</code></td></tr> <br /> <tr><td><code>ruby</code></td><td><code>crystal</code>, <code>rb</code> and <code>ruby</code></td></tr> <br /> <tr><td><code>rust</code></td><td><code>rust</code></td></tr> <br /> <tr><td><code>sas</code></td><td><code>sas</code></td></tr> <br /> <tr><td><code>scala</code></td><td><code>scala</code></td></tr> <br /> <tr><td><code>scheme</code></td><td><code>racket</code> and <code>scheme</code></td></tr> <br /> <tr><td><code>smali</code></td><td><code>smali</code></td></tr> <br /> <tr><td><code>smalltalk</code></td><td><code>smalltalk</code></td></tr> <br /> <tr><td><code>smarty</code></td><td><code>smarty</code></td></tr> <br /> <tr><td><code>sml</code></td><td><code>smlnj</code> and <code>sml</code></td></tr> <br /> <tr><td><code>solidity</code></td><td><code>sol</code> and <code>solidity</code></td></tr> <br /> <tr><td><code>solution-file</code></td><td><code>sln</code> and <code>solution-file</code></td></tr> <br /> <tr><td><code>soy</code></td><td><code>soy</code></td></tr> <br /> <tr><td><code>splunk-spl</code></td><td><code>splunk-spl</code></td></tr> <br /> <tr><td><code>sqf</code></td><td><code>sqf</code></td></tr> <br /> <tr><td><code>sql</code></td><td><code>plsql</code> and <code>sql</code></td></tr> <br /> <tr><td><code>squirrel</code></td><td><code>squirrel</code></td></tr> <br /> <tr><td><code>stan</code></td><td><code>stan</code></td></tr> <br /> <tr><td><code>stata</code></td><td><code>stata</code></td></tr> <br /> <tr><td><code>stylus</code></td><td><code>stylus</code></td></tr> <br /> <tr><td><code>supercollider</code></td><td><code>sclang</code> and <code>supercollider</code></td></tr> <br /> <tr><td><code>swift</code></td><td><code>swift</code></td></tr> <br /> <tr><td><code>systemd</code></td><td><code>systemd</code></td></tr> <br /> <tr><td><code>tcl</code></td><td><code>tcl</code></td></tr> <br /> <tr><td><code>textile</code></td><td><code>textile</code></td></tr> <br /> <tr><td><code>toml</code></td><td><code>toml</code></td></tr> <br /> <tr><td><code>tremor</code></td><td><code>trickle</code>, <code>troy</code> and <code>tremor</code></td></tr> <br /> <tr><td><code>tt2</code></td><td><code>tt2</code></td></tr> <br /> <tr><td><code>turtle</code></td><td><code>rq</code>, <code>sparql</code>, <code>trig</code> and <code>turtle</code></td></tr> <br /> <tr><td><code>twig</code></td><td><code>twig</code></td></tr> <br /> <tr><td><code>typoscript</code></td><td><code>tsconfig</code> and <code>typoscript</code></td></tr> <br /> <tr><td><code>unrealscript</code></td><td><code>uc</code>, <code>uscript</code> and <code>unrealscript</code></td></tr> <br /> <tr><td><code>uorazor</code></td><td><code>uorazor</code></td></tr> <br /> <tr><td><code>v</code></td><td><code>v</code></td></tr> <br /> <tr><td><code>vala</code></td><td><code>vala</code></td></tr> <br /> <tr><td><code>vbnet</code></td><td><code>vbnet</code></td></tr> <br /> <tr><td><code>velocity</code></td><td><code>velocity</code></td></tr> <br /> <tr><td><code>verilog</code></td><td><code>verilog</code></td></tr> <br /> <tr><td><code>vhdl</code></td><td><code>vhdl</code></td></tr> <br /> <tr><td><code>vim</code></td><td><code>vim</code></td></tr> <br /> <tr><td><code>visual-basic</code></td><td><code>vba</code>, <code>vb</code> and <code>visual-basic</code></td></tr> <br /> <tr><td><code>warpscript</code></td><td><code>warpscript</code></td></tr> <br /> <tr><td><code>wasm</code></td><td><code>wasm</code></td></tr> <br /> <tr><td><code>web-idl</code></td><td><code>webidl</code> and <code>web-idl</code></td></tr> <br /> <tr><td><code>wgsl</code></td><td><code>wgsl</code></td></tr> <br /> <tr><td><code>wiki</code></td><td><code>wiki</code></td></tr> <br /> <tr><td><code>wolfram</code></td><td><code>nb</code>, <code>wl</code>, <code>mathematica</code> and <code>wolfram</code></td></tr> <br /> <tr><td><code>wren</code></td><td><code>wren</code></td></tr> <br /> <tr><td><code>xeora</code></td><td><code>xeoracube</code> and <code>xeora</code></td></tr> <br /> <tr><td><code>xml</code></td><td><code>xml</code>, <code>ssml</code>, <code>atom</code>, <code>rss</code>, <code>mathml</code> and <code>svg</code></td></tr> <br /> <tr><td><code>xojo</code></td><td><code>xojo</code></td></tr> <br /> <tr><td><code>xquery</code></td><td><code>xquery</code></td></tr> <br /> <tr><td><code>yaml</code></td><td><code>yml</code> and <code>yaml</code></td></tr> <br /> <tr><td><code>yang</code></td><td><code>yang</code></td></tr> <br /> <tr><td><code>zig</code></td><td><code>zig</code></td></tr> <br /> </tbody> <br /> </table> <br /></details> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { languageMap } from "prism-code-editor" <br /> <br />languageMap.whatever = { <br /> comments: { <br /> line: "//", <br /> block: ["/<em>", "</em>/"] <br /> }, <br /> getComments(editor, position) { <br /> // Method called when a user executes a comment toggling command <br /> // Useful if a language uses different comment tokens in different contexts <br /> // Currently used by JSX so {/<em> </em>/} is used to toggle comments in JSX contexts <br /> }, <br /> autoIndent: [ <br /> // Whether to indent <br /> ([start], value) => /[([{][^\n)\]}]*$/.test(code.slice(0, start)), <br /> // Whether to add an extra line <br /> ([start, end], value) => /\[]|\(\)|{}/.test(code[start - 1] + code[end]) <br /> ], <br /> autoCloseTags([start, end, direction], value) { <br /> // Function called when the user types ">", intended to auto close tags. <br /> // If a string is returned, it will get inserted behind the cursor. <br /> } <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Avoiding layout shifts</h2> <br /> <br />Adding an editor in the middle of your page will cause layout shifts. This is bad for UX and should ideally be mitigated. One way is to reserve space for the editor by giving its container a fixed height or a grid layout. This works well enough for editors with vertical scrolling. <br /> <br />A second solution is to have a placeholder element which gets replaced by your editor. This is the ideal solution for read-only code examples where you want </code>height: auto<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instead of a vertical scroll bar. To make this easier, there's a wrapper around </code>createEditor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> intended for exactly this which replaces your element instead of appending the editor to it. The placeholder element's </code>textContent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be used as the editor's code unless </code>options.value<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is defined. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { editorFromPlaceholder } from "prism-code-editor" <br /> <br />const editor = editorFromPlaceholder("#editor", { language: "javascript" }) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />If you know the height of the editor, your placeholder could be as simple as a div with a fixed height. If not, the placeholder element should have a very similar layout to the editor, i.e., same </code>padding<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>font-size<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>font-family<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>white-space<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>line-height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. How this achieved doesn't matter, but a solution is to use similar markup to the editor itself. <a href="https://stackblitz.com/edit/vitejs-vite-sbvab7?file=index.html,src%2Fstyle.css,src%2Fmain.ts,readme.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Here's an example</a> of this. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Tooltips</h2> <br /> <br />There's a utility to display tooltips above or below the cursor that can be imported from </code>prism-code-editor/tooltips<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />const addTooltip = (editor: PrismEditor, element: HTMLElement, fixedWidth?: boolean): [ShowTooltip, HideTooltip] <br /> <br />const [show, hide] = addTooltip(editor, element) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />If you want the tooltip to always be visible when the user scrolls horizontally, add </code>position: sticky<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> along with the </code>left<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and/or </code>right<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> CSS properties to your tooltip. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Overscroll</h2> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import { addOverscroll, removeOverscroll } from "prism-code-editor/tooltips" <br /> <br />addOverscroll(editor) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />This will allow users to scroll until the last line is at the top of the editor. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">RTL Support</h2> <br /> <br />RTL support is disabled by default. To enable it, you need to import an extra stylesheet, only then will the </code>rtl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option do something. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />import "prism-code-editor/rtl-layout.css" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />RTL support is currently experimental due to multiple browser bugs being present: <br /> <br />- In Chrome and Safari, the line number background won't stick when scrolling. The line numbers themselves are given a background to compensate, but this isn't perfect. <br />- In Firefox, the first tab character on a line will sometimes be incorrectly sized. <br />- In Safari, absolutely positioned elements inside lines can change the order of characters when mixing RTL and LTR text and tab characters are super buggy. <br /> <br />If you want to use RTL directionality, you should be aware of these bugs and use spaces instead of tabs for indenting. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Editing key commands</h2> <br /> <br />Editing key commands is as simple as mutating the </code>keyCommandMap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for the editor. If you're adding the default commands to the editor, be sure to mutate the command map after adding that extension. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />// Adding a Ctrl+Alt shortcut without removing the default enter functionality <br />const oldEnterCallback = editor.keyCommandMap.Enter <br /> <br />editor.keyCommandMap.Enter = (e, selection, value) => { <br /> if (e.altKey) { <br /> // Shortcut code goes here <br /> <br /> // returning true will automatically call e.preventDefault() <br /> return true <br /> } <br /> return oldEnterCallback?.(e, selection, value) <br />} <br /> <br />// Removing the default backspace command <br />editor.keyCommandMap.Backspace = null <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Changing </code>editor.inputCommandMap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will work the exact same way. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Web components</h2> <br /> <br />The library includes a custom element wrapper for each of the 4 setups you can import. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript <br />import { addBasicEditor, PrismEditorElement } from "prism-code-editor/web-component" <br /> <br />// Adds a web component with the specified name <br />addBasicEditor("prism-editor") <br /> <br />const editorElement = document.querySelector<PrismEditorElement>("prism-editor") <br /> <br />// Add a listener for when the editor finishes loading <br />editorElement.addEventListener("ready", () => console.log("ready")) <br /> <br />// The editor can be accessed from the element <br />console.log(editorElement.editor) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Attributes include </code>language<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>tab-size<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>line-numbers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>word-wrap<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>readonly<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>insert-spaces<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>rtl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. These attributes are also writable properties on the element. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><prism-editor <br /> language="javascript" <br /> theme="vs-code-dark" <br /> tab-size="4" <br /> line-numbers <br /> insert-spaces <br /> word-wrap <br />> <br /> The editors initial code goes here <br /></prism-editor> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Performance</h2> <br /> <br />All the code is tokenized each time for simplicity's sake. Even though only lines that change are updated in the DOM, the editor slows down as more code is added, although not as quickly as with zero optimizations. <br /> <br />Once you start approaching 1000 LOC, the editor will start slowing down on most hardware. If you need to display that much code, consider a more robust/heavy library. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Compatibility</h2> <br /> <br />This has been tested to work in the latest desktop and mobile versions of both Safari, Chrome, and Firefox. It should work in slightly older browsers too, but there will be many bugs present in browsers that don't support </code>beforeinput` events. <br /> <br />This library does not support any Prism plugins since Prism hooks have been removed. Behavior like the <a href="https://prismjs.com/plugins/highlight-keywords/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Highlight Keywords</a> plugin is included. <br /> <br />Some grammars have had small changes, most notably markup tags' grammar. So Prism themes will work to style the tokens, but there can be some slight differences. <br /> <br />PrismJS automatically adds the global regex flag to the pattern of greedy tokens. This has been removed, so if you're using your own Prism grammars, you might have to add the global flag to the greedy tokens. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Credits</h2> <br /> <br />This library is made possible thanks to <a href="https://prismjs.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Prism</a>. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2> <br /> <br />Feature requests, bug reports, optimizations and potentially new themes and extensions are all welcome. <br /> <br />To test your changes during development, install dependencies: <br /> <br /> cd package <br /> pnpm install <br /> <br />And run the development server: <br /> <br /> pnpm run dev <br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^20.11.0\"}]\n2a:[\"$\",\"$L5\",\"@types/yargs\",{\"href\":\"/package/%40types%2Fyargs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/yargs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^17.0.32\"}]]}]\n2b:[\"$\",\"$L5\",\"@vscode/web-custom-data\",{\"href\":\"/package/%40vscode%2Fweb-custom-data\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vscode/web-custom-data\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.11\"}]]}]\n2c:[\"$\",\"$L5\",\"chai\",{\"href\":\"/package/chai\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"chai\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0\"}]]}]\n2d:[\"$\",\"$L5\",\"magic-string\",{\"href\":\"/package/magic-string\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"magic-string\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.30.5\"}]]}]\n2e:[\"$\",\"$L5\",\"mocha\",{\"href\":\"/package/mocha\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-"])</script><script>self.__next_f.push([1,"right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mocha\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^10.2.0\"}]]}]\n2f:[\"$\",\"$L5\",\"prettier\",{\"href\":\"/package/prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"2.7.1\"}]]}]\n30:[\"$\",\"$L5\",\"refa\",{\"href\":\"/package/refa\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"refa\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.9.1\"}]]}]\n31:[\"$\",\"$L5\",\"regexp-ast-analysis\",{\"href\":\"/package/regexp-ast-analysis\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"regexp-ast-analysis\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.2.4\"}]]}]\n32:[\"$\",\"$L5\",\"regexpp\",{\"href\":\"/package/regexpp\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"regexpp\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.0\"}]]}]\n33:[\"$\",\"$L5\",\"scslre\",{\"href\":\"/package/scslre\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLine"])</script><script>self.__next_f.push([1,"cap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"scslre\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.1.6\"}]]}]\n34:[\"$\",\"$L5\",\"typedoc\",{\"href\":\"/package/typedoc\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typedoc\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.25.1\"}]]}]\n35:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.2\"}]]}]\n36:[\"$\",\"$L5\",\"vite\",{\"href\":\"/package/vite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.8\"}]]}]\n37:[\"$\",\"$L5\",\"vite-plugin-dts\",{\"href\":\"/package/vite-plugin-dts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite-plugin-dts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.9.1\"}]]}]\n38:[\"$\",\"$L5\",\"yargs\",{\"href\":\"/package/yargs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 2"])</script><script>self.__next_f.push([1,"4\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"yargs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^17.7.2\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>