Code, math, and diagrams on one page

Some ideas need all three: the formula, the code that implements it, and the diagram that explains it.

# The formula and the implementation, side by side

Technical writing breaks down when the math lives in a screenshot and the code lives in a gist. On lucid.page they are the same document. Display math is set with KaTeX:

$$e^{i\pi} + 1 = 0$$

Inline math like $O(n \log n)$ sits in the sentence where it belongs. The code below it is highlighted by Shiki — over twenty languages, with a copy button that works:

fn is_prime(n: u64) -> bool {
    match n {
        0 | 1 => false,
        2 => true,
        _ if n % 2 == 0 => false,
        _ => (3..=((n as f64).sqrt() as u64)).step_by(2).all(|d| n % d != 0),
    }
}

# Diagrams without leaving the editor

Architecture, flows, state machines — a fenced Mermaid block becomes the diagram, rendered on the page, next to the argument it supports. No export, no image hosting, no stale PNG drifting away from the text it illustrates.

# One link carries all of it

Send the page to a colleague, a reviewer, a classroom. It opens fast, reads well on a phone, respects dark mode, and prints cleanly. The Markdown source stays one URL away at /raw/, so a reader who wants to build on your work starts from the source, not from a copy-paste of rendered HTML.

# Common questions

# Which languages are syntax-highlighted?

The common ones — JavaScript, TypeScript, Python, Rust, Go, Java, Kotlin, C, C++, SQL, shell, and more — highlighted by Shiki with VS Code’s own grammars and themes.

# What math syntax can I use?

Standard TeX: $...$ for inline math and $$...$$ for display math, rendered with KaTeX.

# Do diagrams need any setup?

None. Fence a block as mermaid and it renders as a diagram on the published page.