Code blocks
Syntax-highlighted code in a CRT-glass frame. <pre><code class="lang"> is enough.
Use
Wrap source in <pre><code class="lang">. The system supplies the frame, the chip label, the hue, and the selection treatment.
<pre><code class="python">def greet(name): return f"Hi, {name}"</code></pre>Renders as:
def greet(name): return f"Hi, {name}"Include the highlighter
Add the script once to the page <head>:
<script src="https://cdn.jsdelivr.net/gh/Deufel/toolbox@<commit>/js/highlight.js"></script>Without it, code blocks still render with the frame and chip — they just lose per-token coloring.
Supported languages
Each language has a brand-derived --hue.
package main
func main() {
println("hi")
}def main():
print("hi")
main()<!DOCTYPE html>
<html>
<body>hi</body>
</html>.btn {
background: var(--bg);
color: var(--fg);
}Also: javascript (alias js), rust, ruby, bash (alias sh).
Override the hue
Each language's default hue can be overridden per-instance.
<pre style="--hue: 200"><code class="python">…</code></pre>The frame, scanlines, glow, chip, and selection all re-derive against the new hue. No other CSS needed.
def greet(name): return f"Hi, {name}"Optional copy button
Drop a <button> inside the <pre>, after the <code>. The framework positions it; you wire the handler.
<pre>
<code class="python">…</code>
<button class="icon-btn" onclick="navigator.clipboard.writeText(
this.previousElementSibling.textContent)">
<svg>…</svg>
</button>
</pre>The whole block is also user-select: all by default — one click anywhere in the code selects everything.
def greet(name): return f"Hi, {name}".crt wrapper
The same glass-screen treatment, applied to any container. Use for terminal output, status panels, retro chrome — wherever the code-block aesthetic fits non-code content.
<div class="crt" style="--hue: 130">
<pre>SYSTEM STATUS — nominal</pre>
</div>SYSTEM STATUS — sector 7 ═══════════════════════════════════════ reactor 82% nominal coolant 64% nominal containment 97% nominal uptime: 47d 13h 22m