Build-time syntax highlighting

Highlighted code

Fenced code blocks highlight at build time — HTML and CSS only, no client JavaScript. Colors come from your skin's $code-* tokens, so highlighting recolors with the theme through the same tokens dark / :theme system that drives the rest of the page. Flip the toggle and watch every block below recolor at once — no toggle script for the code, no flash.

Theme

JavaScript

// A tiny reactive island, declared in Markdown.
const cart = wd.state("cart");
function total(items) {
  return items.reduce((sum, it) => sum + it.price, 0);
}
wd.subscribe("cart", (items) => {
  document.title = `Cart (${items.length})`;
});

Python

from dataclasses import dataclass

@dataclass
class Expense:
    merchant: str
    amount: float  # in dollars

def total(rows: list[Expense]) -> float:
    return sum(r.amount for r in rows)

CSS

.card {
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
}

JSON

{
  "name": "@zvndev/darkmown",
  "type": "module",
  "zeroJsOnStaticPages": true,
  "runtimeBudgetKb": 8
}

Bash

npx @zvndev/darkmown init --template blog
cd blog && npx darkmown dev   # live reload on :5173

HTML

<main class="wide">
  <a class="btn primary" href="/docs/">Read the docs</a>
</main>

How it works. The highlighter is highlight.js, wired into Markdown's fenced-code path and mapped onto $code-* skin tokens. The stylesheet is pay-for-what-you-use — emitted and linked only on pages with a highlighted block. The highlighting itself ships zero JavaScript; the only reactive thing on this page is the theme toggle above (so you can demo the recolor without changing your OS setting). A fence with an unknown or absent language renders as plain escaped <code>, and inline `code` is never highlighted.

Graceful degradation. A bare fence (no language) or an unknown one stays plain — no highlighting, no error:

just a plain block — no language, so no highlighting