Highlight — toolbox

Tool

highlight.js

Syntax highlighting for code blocks. One script, no configuration.

Use

Add the script to the page <head>. It finds every <pre><code class="lang"> on the page and colors it. Nothing to call, nothing to initialize.

<head>
  <link rel="stylesheet" href="…/css/style.css">
  <script src="…/js/highlight.js"></script>
</head>

The colors are drawn from the active theme, so highlighted code switches with light and dark mode automatically. Try the theme toggle — this block re-colors with it.

def fib(n: int) -> list[int]:
    seq = [0, 1]
    while len(seq) < n:
        seq.append(seq[-1] + seq[-2])
    return seq[:n]

print(fib(10))

Supported languages

Set the language as the class on the <code> element.

go python html css javascript rust ruby bash

javascript also answers to js; bash also answers to sh.

Pairs with the code-block component

The highlighter colors the tokens; the <pre><code> component supplies the frame, the language chip, and the hue. They are independent — the component works without the script, the code just stays uncolored.

<pre><code class="rust">fn main() {
    println!("Hello!");
}</code></pre>

Renders with frame, chip, and syntax color together:

fn main() {
    println!("Hello!");
}

See Code blocks in the CSS section for the frame, the chip, the copy button, and the .crt wrapper.