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
+3
View File
@@ -25,6 +25,7 @@
"@lexical/headless": "0.42.0",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^25.5.0",
"@types/prismjs": "^1.26.6",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "5.1.0",
@@ -338,6 +339,8 @@
"@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
"@types/prismjs": ["@types/prismjs@1.26.6", "", {}, "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw=="],
"@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
"@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+1
View File
@@ -34,6 +34,7 @@
"@lexical/headless": "0.42.0",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^25.5.0",
"@types/prismjs": "^1.26.6",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "5.1.0",
+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,