Extensions
Code Highlight (Shiki)
Syntax highlighting for code blocks using Shiki
The Code Highlight Shiki extension adds syntax highlighting to code blocks using Shiki, which uses TextMate grammars for accurate highlighting.
Demo
import { createEditorConfig, defaultExtensionNodes, defaultTheme, EditorContent, EditorRoot,} from "@typix-editor/react";import { CodeHighlightShikiExtension } from "@typix-editor/extension-code-highlight-shiki";import { Toolbar } from "./Toolbar";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme: defaultTheme,});export default function CodeHighlightShikiExample() { return ( <EditorRoot config={config}> <div className="editor-container"> <Toolbar /> <EditorContent placeholder="Use Ctrl+Shift+C to insert a code block..." /> </div> <CodeHighlightShikiExtension /> </EditorRoot> );}Installation
pnpm add @typix-editor/extension-code-highlight-shikinpm install @typix-editor/extension-code-highlight-shikiyarn add @typix-editor/extension-code-highlight-shikiSetup
import { CodeHighlightShikiExtension } from '@typix-editor/extension-code-highlight-shiki';
function MyEditor() {
return (
<EditorRoot>
<EditorContent />
<CodeHighlightShikiExtension />
</EditorRoot>
);
}CodeNode and CodeHighlightNode are included in defaultExtensionNodes.
Exports
| Export | Type | Description |
|---|---|---|
CodeHighlightShikiExtension | Component | Shiki-based syntax highlighter |
Prism vs Shiki
| Feature | Prism | Shiki |
|---|---|---|
| Grammar system | Custom | TextMate (VS Code) |
| Accuracy | Good | Excellent |
| Bundle size | Smaller | Larger (lazy-loaded) |
| Theme support | CSS-based | Built-in themes |
Use Prism for lighter bundles, Shiki for VS Code-accurate highlighting.