Extensions
Code Highlight (Prism)
Syntax highlighting for code blocks using Prism.js
The Code Highlight Prism extension adds syntax highlighting to code blocks using Prism.js.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { CodeHighlightPrismExtension } from "@typix-editor/extension-code-highlight-prism";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme,});export default function CodeHighlightPrismExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Use Ctrl+Shift+C to insert a code block..." /> </div> <CodeHighlightPrismExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-code-highlight-prismnpm install @typix-editor/extension-code-highlight-prismyarn add @typix-editor/extension-code-highlight-prismSetup
import { CodeHighlightPrismExtension } from '@typix-editor/extension-code-highlight-prism';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<CodeHighlightPrismExtension />
</EditorRoot>
);
}CodeNode and CodeHighlightNode are included in defaultExtensionNodes.
Exports
| Export | Type | Description |
|---|---|---|
CodeHighlightPrismExtension | Component | Prism-based syntax highlighter |
See also
- Code Highlight (Shiki) — Alternative highlighting with Shiki