Reading · André Ruffert's blog

Mar 13, 2025

Open SourceWeb Components

Reading time about a minuteLast updated Mar 13, 2025

Table of contents

01 — Try it
02 — Further reading

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

Code highlighting works without modification. No need to wrap each token with a <span> element.

Try it#

Code Playground

HTML

<syntax-highlight language="js">// Hello world
console.log('Hello world!');
</syntax-highlight>

CSS

@import url(https://cdn.jsdelivr.net/npm/syntax-highlight-element@1/dist/themes/prettylights.min.css);

syntax-highlight {
  display: block;
  border-radius: .5rem;
  padding: 1rem;
}

import 'https://cdn.jsdelivr.net/npm/syntax-highlight-element@1/+esm';

<syntax-highlight> element v1.0.0

Try it#

Further reading#

Comments