Kitchen sink

A reference post exercising everything the Markdown pipeline renders, so you can see it once instead of hunting for it in the docs. Open this file in src/content/blog/kitchen-sink.md to compare source to output.

Code blocks

Filenames and line numbers

A fence with a title gets a filename frame; add showLineNumbers to number the lines.

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

1
export function add(a: number, b: number): number {
2
  return a + b;
3
}

Diffs

A fence tagged diff with lang="…" highlights +/- lines as inserted or deleted while still syntax-highlighting the rest of the line.

function total(items: number[]): number {
  return items.reduce((a, b) => a + b);
  return items.reduce((a, b) => a + b, 0);
}

Text

Inline code like npm run build sits in a sentence without breaking it.

A blockquote: everything below the fold is generated from this one Markdown file (the theme, the reading time, and the table of contents all read the same source).

Tables

Lists

• Write the kitchen-sink post
• Exercise code, tables, and footnotes
• Flip on math and mermaid for a real diagram

Image

By default an image fills the column’s width; add a width attribute to shrink it, like the sized example below.

Math and diagrams

features.math and features.mermaid (in src/config.ts) ship off by default, so $$…$$ and ```mermaid blocks would render as inert text rather than a formula or diagram. Shown here as an escaped reference instead of live, possibly-broken output. Flip the flags on to render them for real.

$$
E = mc^2
$$

graph TD
  A[Markdown] --> B[remark-mermaid]
  B --> C[Rendered diagram]

Footnotes

Reading time on this post is computed from the rendered text, CJK included¹.