Syntax Highlighting using the CSS Custom Highlight API.
Test status npm version npm downloads jsDelivr hits (npm)
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.
For examples checkout the CodePen <syntax-highlight> collection.
Install via npm
npm install syntax-highlight-element
Import as ES module
import 'syntax-highlight-element';
Or via CDN
<script type="module" src="https://cdn.jsdelivr.net/npm/syntax-highlight-element@1/+esm"></script>
<syntax-highlight language="js"> // ... </syntax-highlight>
Make sure to load a theme e.g. syntax-highlight-element/themes/prettylights.css.
Or via CDN
<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.
languageThe code language. The default isplaintext. Default suported languageshtml|css|js.content-selectorA CSS selector to specify the content element. The default is the element itself.
/** * @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) => [], };
Full list of all languages supported by the prism tokenizer.
- Bramus Van Damme and his blog post where I first read about using the CSS Custom Highlight API for syntax highlighting.
- Prism's tokenizer.
Distributed under the MIT license. See LICENSE for details.