{"_back":"^?panel="}
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>