Feature
The annotator currently uses Prism.js with only 10 hardcoded languages (JS, TS, Python, Bash, JSON, YAML, CSS, HTML, Markdown, plaintext). Most file types render without syntax highlighting.
Desired Behavior
Replace Prism.js with Highlight.js to get 196+ language support with a smaller bundle.
Migration Plan
File: packages/codev/templates/open.html
- Replace Prism vendor files (
vendor/prism.min.js + 10 language packs) with Highlight.js (vendor/highlight.min.js)
- Replace Prism CSS theme (
vendor/prism-tomorrow.css) with Highlight.js theme
- Update call sites:
Prism.highlight(line, prismLang, lang) → hljs.highlight(line, { language: lang }).value
Prism.highlightElement(block) → hljs.highlightElement(block)
- Language detection: map file extensions to hljs language names (hljs has built-in auto-detection as fallback)
- Keep everything else unchanged: line numbers (CSS grid), annotations, edit mode (textarea), markdown preview (marked.js)
Why Highlight.js
- 196 languages vs 10 currently
- 15-25KB core (smaller than current Prism setup of ~60KB for core + language packs)
- Auto-detection for unknown file types
- Drop-in compatible API
- Designed for viewers, not editors
Feature
The annotator currently uses Prism.js with only 10 hardcoded languages (JS, TS, Python, Bash, JSON, YAML, CSS, HTML, Markdown, plaintext). Most file types render without syntax highlighting.
Desired Behavior
Replace Prism.js with Highlight.js to get 196+ language support with a smaller bundle.
Migration Plan
File:
packages/codev/templates/open.htmlvendor/prism.min.js+ 10 language packs) with Highlight.js (vendor/highlight.min.js)vendor/prism-tomorrow.css) with Highlight.js themePrism.highlight(line, prismLang, lang)→hljs.highlight(line, { language: lang }).valuePrism.highlightElement(block)→hljs.highlightElement(block)Why Highlight.js