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
Loading preview...
import { EditorContent, EditorRoot, createEditorConfig, defaultExtensionNodes,} from "@typix-editor/react";import { CodeHighlightShikiExtension } from "@typix-editor/extension-code-highlight-shiki";import { theme } from "./theme";import "./style.css";const config = createEditorConfig({ extensionNodes: defaultExtensionNodes, theme,});export default function CodeHighlightShikiExample() { return ( <EditorRoot config={config}> <EditorContent placeholder="Insert a code block..." /> <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.