This page exists to stress every feature the markdown pipeline ships with — drop cap, headings down to h6, inline emphasis, three flavours of list, code blocks in three languages, tables with alignment, KaTeX math (inline + display + aligned + matrix + cases), footnotes, blockquotes, horizontal rules, raw HTML, sub/superscript, kbd, mark, abbr, definition lists, task lists. If anything looks ugly, this page is where to find it.

headings

h1 — page title (rare in body)

h2 — section

h3 — subsection

h4 — sub-subsection

h5 — minor heading

h6 — minimal heading

inline emphasis

This is italic, this is bold, this is bold italic, this is ~~strikethrough~~, this is inline code, this is an unstyled link, this is a link with a title. A soft break
inside a paragraph (note the two trailing spaces above). Subscript: water is H₂O. Superscript: the area of a circle is πr². Highlighted text stays inside the run, and Cmd+K keys read as keys. The HTML standard ships with abbreviations.

blockquotes

A single-line quote. italic, bold, code, $\zeta(s)$ , all inline.

Multi-line: the second line of the same quote should hang neatly under the first without breaking the left rule.

Nested quotes:

inner quote

and one deeper

lists

unordered

alpha
beta — with a longer description that wraps onto a second line so we can see how the bullet aligns to the first line
gamma
- nested gamma · 1
- nested gamma · 2
  - and a deeper child
delta

ordered

first item
second item
third item
1. sub-first
2. sub-second
3. sub-third
fourth item

mixed nesting

ordered parent
- unordered child
- another unordered child
  1. ordered grandchild
  2. another ordered grandchild
second ordered parent

task list (GFM)

write the kitchen-sink post
enable KaTeX, color-code variables, hook synthwave shiki
add per-page substrate fn
OG image
roll panel toolkit through flow / scry / lattice

definition list

math: the language of structure
code: the executable form of math
art: math made visible — sometimes audible, occasionally edible

horizontal rule

text above the rule

text below the rule

code blocks

Inline first: const φ = (1 + Math.sqrt(5)) / 2; and var(--accent).

A typescript block with a filename, line markers, and inline marks:

// generate evenly-distributed hues by the golden angle
const phi = (1 + Math.sqrt(5)) / 2;
const goldenStep = 360 / phi;            // ≈ 222.4922°

const palette = (n: number, h0: number, l = 76, c = 0.18) =>
  Array.from({ length: n }, (_, i) =>
    `oklch(${l}% ${c} ${(h0 + i * goldenStep) % 360})`
  );

palette(8, 170);
//  → ['oklch(76% 0.18 170)', 'oklch(76% 0.18 32.5)', ...]

A glsl fragment with a filename:

#version 300 es
precision highp float;
uniform vec2 u_res;
out vec4 fragColor;

void main() {
  vec2 q = (gl_FragCoord.xy - 0.5 * u_res) / min(u_res.x, u_res.y);
  float r = length(q);
  vec3 col = 0.5 + 0.5 * cos(6.28 * (vec3(0.0, 0.33, 0.66) + r));
  fragColor = vec4(col, 1.0);
}

A python block:

# Mandelbrot escape time, smooth
import numpy as np

def escape(c, max_iter=256):
    z = 0.0 + 0.0j
    for n in range(max_iter):
        z = z * z + c
        if abs(z) > 2:
            return n - np.log2(np.log2(abs(z) ** 2)) + 4
    return max_iter

A terminal frame (no language → terminal-style chrome):

pnpm install
pnpm dev
# server up at http://127.0.0.1:4321/

A plain (no-language, no title) block:

+-------------------+
|  ascii diagrams   |
|  also work fine   |
+-------------------+

tables

simple

symbol	meaning
`∂`	partial derivative
`∮`	contour integral
`ζ`	Riemann zeta
`∇²`	Laplacian

with alignment

left	centre	right
a	b	c
100	200	300
longer text	xxx · yyy	right-bias
short	middle	$\pi$

with inline content

key	description	code
bold	italic	`inline()`
math	inline $\pi r^2$	symbol $\nabla \cdot \mathbf{E}$
link	astro	mixed: `id` + $\sum$
~~old~~	strike text	`--var-l: 78%`

math

Inline: Euler’s identity $e^{i\pi} + 1 = 0$ has every fundamental constant.

Display:

\oint_C f(z)\,\mathrm{d}z = 2\pi i \sum_{k} \mathrm{Res}(f, z_k)

Aligned (Maxwell’s equations):

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0}, & \nabla \cdot \mathbf{B} &= 0, \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t}, & \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Matrix and inverse:

A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \quad A^{-1} = \frac{1}{ad - bc} \begin{pmatrix} d & -b \\ -c & a \end{pmatrix}

Piecewise:

f(x) = \begin{cases} x^2 & x \ge 0 \\ -x & x < 0 \end{cases}

Continued fraction:

\varphi = 1 + \cfrac{1}{1 + \cfrac{1}{1 + \cfrac{1}{1 + \cdots}}}

Sums and integrals with limits:

\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p \,\text{prime}} \frac{1}{1 - p^{-s}}, \qquad \Gamma(z) = \int_0^{\infty} t^{z-1} e^{-t}\,\mathrm{d}t

footnotes

The smoothing trick¹ removes integer banding. The Riemann hypothesis² is still open. A trailing reference to the same footnote¹ should reuse the same number.

images

The site’s favicon (small svg) inline:

raw html that markdown wouldn’t otherwise reach

A <details> block:

Click to expand a folded note

Inside a <details> block, prose still works fine — italic, bold, code, even $\zeta(s)$ inline math. Nested:

bullet inside details
another bullet

A <figure> with caption:

z[n+1] = z[n]² + c

fig 1 — the Mandelbrot recurrence in ASCII

diagrams (mermaid)

Flowchart:

flowchart LR
  A[markdown source] --> B{has math?}
  B -->|yes| C[remark-math + rehype-katex]
  B -->|no| D[plain prose]
  C --> E[per-variable colorize]
  D --> F[shiki / expressive-code]
  E --> G[rendered page]
  F --> G
  G --> H((reader))

Sequence:

sequenceDiagram
  autonumber
  participant U as user
  participant B as browser
  participant S as static site
  U->>B: open /blog/post
  B->>S: GET /blog/post/index.html
  S-->>B: pre-rendered HTML + KaTeX + Shiki
  B->>B: hydrate diagrams (lazy)
  B-->>U: paint
  Note over B: no FOUC, no client-side TeX

State diagram (a fractal pixel’s life):

stateDiagram-v2
  [*] --> Iterating
  Iterating --> Iterating: |z|² ≤ 256
  Iterating --> Escaped: |z|² > 256
  Iterating --> Bound: n ≥ maxIter
  Escaped --> Coloured: μ = n − log₂log₂|z|² + C
  Bound --> Black
  Coloured --> [*]
  Black --> [*]

Class diagram (the lab _shared module surface):

classDiagram
  class GL {
    +getGL(canvas) WebGL2RenderingContext
    +program(gl, vs, fs) WebGLProgram
    +quadVAO(gl) VAO
    +loop(step) stop
  }
  class Panel {
    +createPanel(opts) Panel
    +bind(target, key, opts)
    +folder(title, build)
    +button(label, onClick)
  }
  class Lab {
    +run(canvas) stop
  }
  Lab ..> GL : uses
  Lab ..> Panel : uses

Pie chart (Mermaid):

pie showData
  title where the bytes go
  "shaders + lab JS" : 38
  "katex (fonts + css)" : 22
  "fonts (redaction + krypton)" : 18
  "mermaid + chart + cyto" : 14
  "everything else" : 8

charts (chart.js)

A line chart of compute-over-time on the iteration loop:

A grouped bar chart of the lab inventory:

A radar chart (palette token coverage):

graphs (cytoscape)

A small force-directed dependency graph of the lab modules:

a final paragraph

If anything on this page looks broken — a bullet that doesn’t sit right, a table without padding, a footnote arrow that disappears, an <abbr> underline that’s invisible — the styles to fix it live in src/styles/global.css under the .prose selector.

Renormalised iteration count: $\mu = n - \log_2 \log_2 |z_n|^2 + C$ . Falls out of $|z_{n+1}| \approx |z_n|^2$ near escape. ↩ ↩²
Every non-trivial zero of $\zeta(s)$ has $\Re(s) = \tfrac{1}{2}$ — conjectured 1859, unsolved. ↩