<syntax-highlight>

A custom element that uses the CSS Custom Highlight API for syntax highlighting

npm install syntax-highlight-element

Demo Playground

Installation & Usage

Install

Install via npm

npm install syntax-highlight-element

Usage

JavaScript

Import as ES module

import 'syntax-highlight-element';

Or via CDN

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

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

Attributes

language The syntax 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

/** * @typedef Config * @type {object} * @property {string[]} [languages=['markup', 'css', 'javascript']] - Language grammars to highlight. * @property {{ [key: string]: string[] }} languageTokens - Language specific token types. */ window.she = window.she || {}; /** @type {Config} */ window.she.config = {};

Full list of all languages supported by the prism tokenizer.

Credits

Bramus Van Damme and his blog post where I first read about using the CSS Custom Highlight API for syntax highlighting.
Prism's tokenizer.