Modern Syntax Highlighter with CSS Custom Highlight API

The <syntax-highlight> is a web component that tokenizes source code into styled text using the CSS Custom Highlight API. It relies on the well-established Prism.js library for language parsing but takes a modern approach to rendering. Instead of wrapping every token in a <span> tag, it applies styles through a new, more performant browser API. This keeps the DOM clean and lightweight.

The primary problem this component solves is performance. Traditional syntax highlighters can bog down a page by injecting hundreds of <span> elements into the DOM for a single code block. The <syntax-highlight> sidesteps this entirely, which is a significant benefit for documentation sites, technical blogs, or any page with numerous code examples.

Features:

• Zero DOM manipulation – no <span> wrappers around tokens
• 200+ programming languages supported via Prism.js
• CSS Custom Highlight API for clean, performant highlighting
• Custom element architecture (<syntax-highlight>)
• Configurable language loading and token customization
• Multiple theme support with CSS-only styling
• Content selector attribute for flexible markup structure
• Automatic accessibility features (tabindex, role attributes)

How to use it:

1. Install and import the <syntax-highlight> web component.

# NPM
$ npm install syntax-highlight-element

import 'syntax-highlight-element';

// OR from a CDN
<script type="module" src="https://cdn.jsdelivr.net/npm/syntax-highlight-element@1/+esm"></script>

2. Load the necessary themes in the document.

<link rel="stylesheet" href="/dist/themes/prettylights.min.css">
<link rel="stylesheet" href="/dist/themes/prism.css">
<link rel="stylesheet" href="/dist/themes/theme-defaults.css">

3. Wrap your code snippets in the <syntax-highlight>, specify the programming language, and define a CSS selector for finding the code within the element (By default, it uses the element’s own text content) as follows.

<syntax-highlight language="js" content-selector="">
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}
</syntax-highlight>

4. You can also provide a global configuration to specify which Prism.js languages to load on initialization. This can be useful for supporting languages beyond the default html, css, and js. You define this on the window.she.config object before the element script loads.

window.she = window.she || {};
window.she.config = {
  languages: ['markup', 'css', 'javascript', 'python', 'rust']
};

5. More configuration options.

• tokenTypes: Token types used during lexing/parsing.
• languageTokens: Mapping of language names to their specific tokenization rules.
• setup: Runs before the custom element gets defined in the registry.
• tokenize: Tokenize text based on the specified language grammar

window.she.config = {
  tokenTypes: [],
  languageTokens: {},
  setup: async () => {},
  tokenize: (text, language) => [],
};

Changelog:

v1.2.0 (08/09/2025)

• feat: introduce language setter
• feat(loadPrismLanguage): resolve language aliases
• feat: config.setup, config.tokenize, config.tokenTypes
• feat: SyntaxHighlightElement.config getter/setter

v1.1.1 (07/13/2025)

• Update dependencies