Skip to content

Replace Prism.js with Highlight.js for broad language support in annotator #516

@waleedkadous

Description

@waleedkadous

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

  1. Replace Prism vendor files (vendor/prism.min.js + 10 language packs) with Highlight.js (vendor/highlight.min.js)
  2. Replace Prism CSS theme (vendor/prism-tomorrow.css) with Highlight.js theme
  3. 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)
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions