Code block widget

{}

The code block widget renders source code with server-side syntax highlighting via Chroma. Token classes map to Material design color tokens so the same markup recolors on theme change without re-running the highlighter.

Go

Explicit language via WithLanguage("go"). Comments are dimmed-italic, keywords use the primary color, types use the secondary, and string and numeric literals use the tertiary.

package main

import (
	"fmt"
	"net/http"
)

// HandleHello greets the requester.
func HandleHello(w http.ResponseWriter, r *http.Request) {
	name := r.URL.Query().Get("name")
	if name == "" {
		name = "world"
	}
	fmt.Fprintf(w, "Hello, %s!", name)
}

func main() {
	http.HandleFunc("/hello", HandleHello)
	http.ListenAndServe(":8080", nil)
}

Python

Same widget, different lexer. Decorators (@dataclass), built-ins (print, sorted, len) and class names each get their own token class. Line numbers are enabled here via WithLineNumbers(true).

 1from dataclasses import dataclass
 2from typing import Iterable
 3
 4
 5@dataclass
 6class State:
 7    abbrev: str
 8    name: str
 9    population: int
10
11    def density(self, land_sq_mi: float) -> float:
12        """People per square mile."""
13        return self.population / land_sq_mi
14
15
16def by_population(states: Iterable[State]) -> list[State]:
17    return sorted(states, key=lambda s: s.population, reverse=True)
18
19
20if __name__ == "__main__":
21    sample = [
22        State("CA", "California", 39_538_223),
23        State("TX", "Texas",      29_145_505),
24        State("FL", "Florida",    21_538_187),
25    ]
26    for s in by_population(sample):
27        print(f"{s.abbrev}: {s.population:,}")

HTML

Mixed-language highlighting: tags, attributes, embedded CSS inside <style>, and embedded JavaScript inside <script> all get their respective lexers chained together by Chroma's HTML lexer. This block is capped at 10 visible rows via WithMaxRows(10); scroll the inner pane to see the rest.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <style>
        body { font-family: sans-serif; color: #222; }
        .greeting { font-size: 2rem; font-weight: 600; }
    </style>
</head>
<body>
    <h1 class="greeting">Hello, world!</h1>
    <p>This is a <a href="/about">simple page</a>.</p>
    <script>
        document.querySelector(".greeting").addEventListener("click", () => {
            alert("clicked");
        });
    </script>
</body>
</html>