Rendering Pipeline Showcase: From Text to Diagrams

This is a sample post. It is not meant to be read start to finish — it is meant to be checked section by section: every piece of markup below should have a matching rendering result. If something looks off, the pipeline is broken.

A bit of everything inline: italic, bold, ~~struck through~~, inline code, an internal post, and a footnote¹.

1. Text and typography

Lists and nesting

Top-level item
- Nested one level
  - Nested two levels
Second top-level item

Step one: parse the Markdown
Step two: transform to hast
Step three: emit static HTML

Task list:

Syntax highlighting
Window frames and file names
Line numbers
Collapsible sections (plugin not enabled)

Blockquotes

First line of the quote. Second line, no blank line in between, so it should merge into one paragraph.

Tables

Element	Syntax	Notes
Inline code	backticks	Uses the site token colors
Strikethrough	double tilde	Comes from GFM
Tables	pipes	Wide tables scroll horizontally
Diagrams	mermaid fence	Rendered in the browser
Footnotes	bracket + caret	Collected at the end

2. Code blocks

File name and line numbers

1
type Node<K, V> = { key: K; value: V; prev?: Node<K, V>; next?: Node<K, V> };
2

3
export class LRUCache<K, V> {
4
  private map = new Map<K, Node<K, V>>();
5
  private head?: Node<K, V>;
6
  private tail?: Node<K, V>;
7

8
  constructor(private readonly capacity: number) {
9
    if (capacity <= 0) throw new RangeError("capacity must be positive");
10
  }
11

12
  get(key: K): V | undefined {
13
    const node = this.map.get(key);
14
    if (!node) return undefined;
15
    this.moveToFront(node);
16
    return node.value;
17
  }
18

19
  set(key: K, value: V): void {
20
    const existing = this.map.get(key);
21
    if (existing) {
22
      existing.value = value;
23
      this.moveToFront(existing);
24
      return;
25
    }
26
    if (this.map.size === this.capacity) this.evict();
27
    const node: Node<K, V> = { key, value };
28
    this.map.set(key, node);
29
    this.moveToFront(node);
30
  }
31

32
  private moveToFront(node: Node<K, V>): void {
33
    this.unlink(node);
34
    node.next = this.head;
35
    node.prev = undefined;
36
    if (this.head) this.head.prev = node;
37
    this.head = node;
38
    this.tail ??= node;
39
  }
40

41
  private unlink(node: Node<K, V>): void {
42
    if (node.prev) node.prev.next = node.next;
43
    if (node.next) node.next.prev = node.prev;
44
    if (this.head === node) this.head = node.next;
45
    if (this.tail === node) this.tail = node.prev;
46
  }
47

48
  private evict(): void {
49
    if (!this.tail) return;
50
    this.map.delete(this.tail.key);
51
    this.unlink(this.tail);
52
  }
53
}

Line highlighting

Put line numbers in curly braces — commas for singles, hyphens for ranges. Note that line numbers are relative to the block itself, not to the original source file:

1
  get(key: K): V | undefined {
2
    const node = this.map.get(key);
3
    if (!node) return undefined;
4
    this.moveToFront(node);
5
    return node.value;
6
  }

Text markers

Wrap the fragment you want to highlight in slashes:

1
  constructor(private readonly capacity: number) {
2
    if (capacity <= 0) throw new RangeError("capacity must be positive");
3
  }

Diff

1
get(key: K): V | undefined {
2
  const node = this.map.get(key);
3
  if (!node) return undefined;
4
  this.moveToFront(node);
5
  this.hits += 1;
6
  return node.value;
7
}

Very long lines

Lines wider than the column wrap, and keep their original indentation:

1
const endpoint = "https://api.example.com/v1/tenants/8f14e45fceea167a5a36dedd4bea2543/reports/daily-occupancy?from=2026-01-01&to=2026-08-30&dimensions=tenant,store,channel&metrics=adr,revpar,occupancy";

Terminal

1
npm install
2
npm run build
3
npm run preview

Plain text

1
┌──────────┐    ┌──────────┐    ┌──────────┐
2
│ Markdown │───►│  remark  │───►│  rehype  │
3
└──────────┘    └──────────┘    └──────────┘
4
                                      │
5
                                      ▼
6
                            ┌───────────────────┐
7
                            │  Expressive Code  │
8
                            └───────────────────┘

3. Diagrams

Flowchart

flowchart LR MD["Markdown source"] --> RM(["remark parses"]) RM --> RH(["rehype transforms"]) RH --> DEC{"has code block?"} DEC -- yes --> EC["Expressive Code"] DEC -- no --> HTML["static HTML"] EC --> HTML HTML --> PF[("Pagefind index")]

Sequence diagram

sequenceDiagram participant B as Browser participant C as CDN edge participant O as Object storage B->>C: request article page C->>O: fetch static files O-->>C: HTML and CSS C-->>B: 200 OK Note over B: first paint waits for no JS B->>C: load ec.js on demand

4. Odds and ends

A horizontal rule, to check the hr style inside the article body:

Bare URLs become links on their own: https://expressive-code.com/

Footnote text is collected at the end of the post¹.

This is the footnote. It proves the GFM footnote extension is enabled and rendered below the body copy. ↩ ↩²