A lightweight <code-highlighter> custom element that provides syntax highlighting without DOM mutation, using the CSS Custom Highlight API

Features

• No DOM mutation for highlighting (no <span> injection)
• Uses Prism.js's tokenizer, but lets you decide how to import it
• Works as a read-only viewer or simple editor
• Minimal, only 50 lines of JavaScript

Limitations

• Requires a modern browser with CSS Custom Highlight API support
• Prism must be loaded before <code-highlighter> runs

Usage

Full Example Page

Read-only

<code-highlighter
  language="clojure"
  spellcheck="false"
>
(defn greet [name] (str "Hello, " name))
</code-highlighter>

Simple Editor

<code-highlighter
  language="clojure"
  contenteditable="plaintext-only"
  spellcheck="false"
  oninput="this.highlight()"
>
(defn greet [name] (str "Hello, " name))
</code-highlighter>

Note: Consider debouncing calls to highlight() to avoid re-tokenizing on every keystroke

API

highlight()

Recompute syntax highlighting

<code-highlighter oninput="this.highlight()"></code-highlighter>

Installation

1. Add Prism core and any languages you need

  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-clojure.min.js"></script>

2. Add <code-highlighter>

<script type="module"
        src="https://cdn.jsdelivr.net/npm/@thiago.oak/code-highlighter@latest/code-highlighter.js"></script>

3. Add a theme

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@thiago.oak/code-highlighter@latest/prettylights.css"/>

Styling

Highlight colors are defined with ::highlight() selectors. Your theme sets them

Credits

• Inspired by https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/
• Similar to https://github.com/andreruffert/syntax-highlight-element