<syntax-highlight> element

Syntax Highlighting using the CSS Custom Highlight API.

The code is highlighted without having to wrap a bunch of <span> elements around each token, thanks to Prism's tokenizer and the CSS Custom Highlight API.

<div align="center"> <br> <br> <img src="media/cover.png" alt="Screenshot of the <syntax-highlight> element demo in the browser with DevTools open"> <br> <br> </div>

Examples

For examples checkout the CodePen <syntax-highlight> collection.

Install

Install via npm

shell
npm install syntax-highlight-element

Usage

JavaScript

Import as ES module

js
import 'syntax-highlight-element';

Or via CDN

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

HTML

html
<syntax-highlight language="js">
  // ... 
</syntax-highlight>

CSS

Make sure to load a theme e.g. syntax-highlight-element/themes/prettylights.css.

Or via CDN

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/syntax-highlight-element@1/dist/themes/prettylights.min.css">

Currently there are only limited themes available/converted. You can always create your own theme. Contributions are also very welcome.

Attributes

language The code language. The default is plaintext. Default suported languages html|css|js.
content-selector A CSS selector to specify the content element. The default is the element itself.

Configuration

js
/**
 * @typedef Config
 * @type {object}
 * @property {string[]} languages - List of languages to support for syntax highlighting.
 * @property {string[]} tokenTypes - Token types used during lexing/parsing.
 * @property {{[key: string]: string[]}} languageTokens - Mapping of language names to their specific tokenization rules.
 * @property {function} setup - Runs before the custom element gets defined in the registry.
 * @property {function} tokenize - Tokenize text based on the specified language grammar
 */

window.she = window.she || {};

/** @type {Config} */
window.she.config = {
  languages: ['markup', 'css', 'javascript'], // Default
  tokenTypes: [],
  languageTokens: {},
  setup: async () => {},
  tokenize: (text, language) => [],
};