repository·main·Indexed 41 days ago
https://github.com/jonpyt/prism-code-editorA library for creating interactive code editors and highlighted code blocks. Includes prism-react-editor for React applications, as well as markdown-it-prism-code-editor and marked-prism-code-editor plugins to transform fenced code blocks into interactive editors.
Prism code editor is a lightweight web-based code editor component. Unlike heavy-duty editors like Monaco, Ace, or CodeMirror, it is optimized for smaller footprints and is ideal for use in:
It is specifically designed for scenarios where you do not need to display or edit extremely large documents.
Prism code editor is a lightweight and extensible code editor component for the web built on top of Prism. It is designed to be highly efficient, using a Prism instance that is less than 1/3 the size of the standard one, making it better suited for editor environments.
Key characteristics include:
Greedy matching is now controlled solely by the regex global flag. You can remove the greedy property from all tokens in your custom grammars.
Caution: If a non-greedy token has the global flag on its pattern, it will now become greedy. In such cases, remove the global flag from the pattern to restore non-greedy behavior.
You can enhance CodeBlock by passing extension components as children. To create your own extension and access the code block instance or its props, use the usePrismCodeBlock() hook inside your extension component.
import { usePrismCodeBlock } from "prism-react-editor/code-blocks"
function MyCodeBlockExtension() {
const [codeBlock, props] = usePrismCodeBlock()
// ...
}When multiple hotkeys are registered to the same key, you can control their execution order using the precedence parameter in addEditorHotkey.
2).1: Use this when you want to conditionally override existing commands.0: The highest possible precedence. Use with caution, as it can override sequential commands if the key is part of a sequence.The markdown plugins do not inject any JavaScript or CSS. They only generate the HTML structure.
To make the editors interactive on the client side, you must manually call mountEditorsUnder() in your client-side JavaScript.
You can add client-side features like copy buttons, bracket highlighting, or hover descriptions by using forEachCodeBlock() to iterate over the code blocks in your client-side code.
While import order usually doesn't matter, it is critical when one grammar extends or modifies another. If a grammar (like js-templates) depends on features added to another grammar (like typescript or javascript), ensure the base grammar is imported first. If the order is incorrect, the extension may fail to apply to the base language.
// Correct order for extensions
import "prism-code-editor/prism/languages/typescript"
import "prism-code-editor/prism/languages/js-templates"The editor tokenizes all code each time for simplicity. While it optimizes DOM updates by only refreshing changed lines, performance will degrade as the document size increases.
Threshold: Once a file exceeds 1000 lines of code (LOC), the editor will likely experience slowdowns on most hardware. For documents of this size, it is recommended to use a more robust, heavy-duty editor library.
To keep the core lightweight, most functionality is provided via optional extensions. Extensions are implemented as React components that use the usePrismEditor hook to access the editor instance.
Common extensions include:
useBracketMatcher / useHighlightBracketPairs: Bracket matching.useTagMatcher / useHighlightMatchingTags: Tag matching.useSearchWidget / useHighlightSelectionMatches: Search and selection highlighting.useEditorCommands / useEditHistory: Commands and undo/redo.useCopyButton: Copy button functionality.IndentGuides: Visual indentation guides.You can use BasicSetup for a pre-configured set of common extensions, or manually compose your own by importing specific hooks and components.
import { Editor, PrismEditor } from "prism-react-editor"
import { usePrismEditor } from "prism-react-editor/extensions"
import { useBracketMatcher } from "prism-react-editor/match-brackets"
import { IndentGuides } from "prism-react-editor/guides"
function MyExtensions() {
const [editor] = usePrismEditor()
useBracketMatcher(editor)
return <IndentGuides />
}
function MyEditor() {
return <Editor language="jsx" value="const foo = 'bar'">
<MyExtensions />
</Editor>
}Static code blocks require both prism-code-editor/layout.css and prism-code-editor/code-block.css to render correctly.
Code blocks use a pre and code structure similar to the interactive editors:
<pre class="prism-code-editor language-[lang] [extra-classes]">
<code class="pce-wrapper">
<div class="pce-overlays"></div>
<div class="pce-line">
<!-- ::before: line number, ::after: indentation guides -->
</div>
<div class="pce-line"></div>
</code>
</pre>show-line-numbers: Applied if line numbers are enabled.pce-wrap: Applied if word wrap is enabled.pce-nowrap: Applied if word wrap is disabled.pce-preserve: Applied if preserveIndent is enabled.pce-guides: Applied if guideIndents is enabled.pce-rtl: Applied if the rtl option is true.The prism-code-editor library has dedicated rewrites for React (prism-react-editor) and SolidJS (solid-prism-editor).
The editor works by overlaying syntax-highlighted code over a standard <textarea>.
Key architectural advantages include: