feat: enable Prism syntax highlighting in code blocks

- Register CodeHighlightNode in the editor node set
- Add CodeHighlightPlugin that calls registerCodeHighlighting
- Map 20+ Prism token types to mc-tok-* CSS classes with dark theme colors
- Explicitly import prismjs + language components and set globalThis.Prism
  before @lexical/code-prism loads, fixing a Vite dev-mode race where
  the CJS shim could initialize the tokenizer before the global was set
- Added @types/prismjs for type checking

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-25 19:52:54 +01:00
co-authored by Copilot
parent 8240468d1e
commit 860876172e
3 changed files with 29 additions and 1 deletions
+25 -1
View File
@@ -20,7 +20,31 @@ import {
$convertFromMarkdownString,
$convertToMarkdownString,
} from '@lexical/markdown';
import { $isCodeNode, $createCodeNode, CodeNode, registerCodeHighlighting } from '@lexical/code';
import { $isCodeNode, $createCodeNode, CodeNode } from '@lexical/code';
// Prism must be on `globalThis` before @lexical/code-prism initializes its
// tokenizer reference. Vite's dev-mode esbuild CJS shim can race the global
// assignment, so we force it here before importing the module.
import Prism from 'prismjs';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-objectivec';
import 'prismjs/components/prism-sql';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-rust';
import 'prismjs/components/prism-swift';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-cpp';
if (typeof globalThis !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).Prism = Prism;
}
import { registerCodeHighlighting } from '@lexical/code-prism';
import {
$isListNode,
INSERT_ORDERED_LIST_COMMAND,