Every component available for technical posts on this site, along with the limits I have actually run into1. Everything below is really rendered rather than screenshotted — diagrams enlarge from the button in their corner, code copies, and all of the text selects. I come back to this page when writing.

Mathematics Link to heading

Rendered at build time with KaTeX. No JavaScript is needed in the browser, and no math = true in front matter.

Inline maths uses \( \): the birthday bound puts a collision at roughly 2n/22^{n/2} queries, which is why SHA-256 offers 21282^{128} collision resistance rather than 22562^{256}.

Block maths uses $$ $$:

P(collision)≈1−e−k(k−1)2N P(\text{collision}) \approx 1 - e^{-\frac{k(k-1)}{2N}}

Aligned equations:

c=Ek(m)⊕r =(m⋅k mod p)⊕r \begin{aligned} c &= E_k(m) \oplus r \ &= (m \cdot k \bmod p) \oplus r \end{aligned}

Matrices and large operators:

H=∑i=1n[aibi cidi]where∫0∞e−x2 dx=π2 H = \sum_{i=1}^{n} \begin{bmatrix} a_i & b_i \ c_i & d_i \end{bmatrix} \quad\text{where}\quad \int_{0}^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

Why inline maths does not use $ $ With single dollars enabled, “the rig costs $50000 to $60000” has $50000 to $ swallowed as an inline formula. Prices are common in technical writing, so inline maths always uses the parenthesis form.

Diagrams Link to heading

The primary tool is D2 (MPL-2.0). Unlike Mermaid it produces SVG at build time, so readers download no JavaScript and there is no CDN dependency. Dark mode is baked into the SVG and follows the site theme toggle.

Flowchart Link to heading

AttackerApplication serverMetadata service169.254.169.254Object storageRequest with internal URLServer fetches on its behalfTemporary credentialsResponse leaks credentialsDirect access with stolen creds
A typical SSRF reaching the cloud metadata service

Sequence diagram Link to heading

UserClient appAuthorisation serverResource serverClicks sign inRedirect to authorise endpointConsent screenApprovesAuthorisation codeExchange code for tokenaccess_tokenCall with tokenData
OAuth 2.0 authorisation code flow

Class diagram Link to heading

Cipher-keybytes-noncebytes+encrypt(pt bytes)bytes+decrypt(ct bytes)bytesAEAD+seal(pt bytes, ad bytes)bytes+open(ct bytes, ad bytes)bytesimplements
UML classes with visibility and types

ER diagram Link to heading

usersidintPKemailvarchar(255)created_attimestampsessionsiduuidPKuser_idintFKexpires_attimestampmany to one
sql_table shapes with key constraints

State machine Link to heading

D2 has no dedicated state-machine syntax; a plain directed graph does the job.

CLOSEDLISTENSYN_RCVDESTABLISHEDFIN_WAIT_1TIME_WAITpassive openSYN receivedACK receivedactive closeFIN+ACK received2MSL timeout
TCP connection states (excerpt)

Nested containers and network layout Link to heading

layout="elk" switches engines; it lays deep hierarchies out more tidily.

InternetEdgeApplicationDataFirewallLoad balancerWeb 1Web 2PostgreSQLRedis
Containers nest arbitrarily and edges cross levels

Grid layout Link to heading

ConfidentialityIntegrityAvailabilityEncryptionHashingRedundancyTLSHMACClustering
grid suits matrices and comparison tables

Shape library Link to heading

personcylinderqueuepackagedocumentstephexagonovalclouddiamondstored_dataparallelogramcirclecalloutpage
Built-in shapes, enough for architecture diagrams

Styling and emphasis Link to heading

InputUnvalidated deserialisationRemote executionAllowlisted type checkSafe handling
classes define reusable styles

Edge styles Link to heading

abcdefghijklsoliddashedthickbidirectionalundirecteddiamond head
Dashes, weight, colour, bidirectional, arrowheads

Markdown inside shapes Link to heading

Order of checks

  1. Verify source IP
  2. Compare signature
  3. Check timestamp
Handle only if all pass
Nodes can hold Markdown - lists, headings, bold

Sketch mode Link to heading

IdeaPrototypeExperimentPaperdid not work out
sketch mode, good for rough ideas

Mermaid (fallback) Link to heading

Mermaid covers the types D2 lacks. Its 2.5 MB bundle only loads on pages that actually use it.

gantt
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    title Research schedule
    section Preparation
    Literature review   :done,    a1, 2026-09-01, 30d
    Environment setup   :active,  a2, 2026-09-20, 20d
    section Implementation
    Prototype           :         a3, after a2, 45d
    Experiments         :         a4, after a3, 30d
Project schedule

What D2 cannot do Link to heading

Limits I have actually hit, recorded so I do not retry them:

ItemStatusWorkaround
Gantt chartNo such syntax; the keyword is parsed as a node nameUse Mermaid
Pie / bar chartSameUse Mermaid, or a table
MindmapSameApproximate with a tree
LaTeX blockPanics, failing the buildPut maths outside the diagram
Code block inside a shapeText overflows its shape by 13-24pxUse a Markdown block instead
Remote icon URLThe URL is written into the SVG, so readers fetch itUse a local file

Code Link to heading

Plain block Link to heading

import hashlib, hmac

def verify(secret: bytes, payload: bytes, signature: str) -> bool:
    """Constant-time comparison, so timing cannot leak the signature."""
    expected = hmac.new(secret, payload, hashlib.sha256).hexdigest()
    return hmac.compare_digest(expected, signature)

Line numbers and highlighted lines Link to heading

Append {linenos=true, hl_lines=[3-4]} to the fence:

1
2
3
4
5
6

func handler(w http.ResponseWriter, r *http.Request) {
    name := r.URL.Query().Get("name")
    // These two lines are the bug: user input goes straight into HTML
    fmt.Fprintf(w, "<h1>Hello %s</h1>", name)
    w.WriteHeader(http.StatusOK)
}

Very long lines Link to heading

Only the code block scrolls sideways; the page itself never overflows:

openstack server create --flavor m1.large --image ubuntu-24.04 --network lab-net --security-group default --key-name gamma4-lab-key --availability-zone nova my-instance

Inline code Link to heading

Configured under [markup.highlight] in config.toml; noClasses must be false so the palette comes from the theme _syntax.scss. The monospace face is a self-hosted JetBrains Mono.

Everything else Link to heading

ComponentSyntaxRendered
Mathsparentheses / double dollarsat build time
D2 diagramd2 shortcodeat build time
Mermaidmermaid shortcodein the browser
Codefenced blockat build time

Block quotes:

What goes unobserved disappears quietly.

  1. Footnotes collect at the end. The reference is deliberately near the top of the page — with the two close together the view barely moves and you cannot tell whether the jump happened. The target flashes briefly on arrival, and so does the reference when you jump back. ↩︎