Rendering Kitchen Sink

This page is the rendering test bed for the blog. Every feature below is part of the supported authoring surface. If something looks wrong here, it is a bug in the site, not in the content.

Headings and anchors

Every heading gets a stable id generated with github-slugger. That means this link works: jump to Stable heading anchors.

A level-three heading

A level-four heading

A level-five heading

A level-six heading

Stable heading anchors

The id for this section is stable-heading-anchors. It will not change unless the heading text changes.

Custom anchor

This heading uses Sätteri’s heading-attribute syntax to pin a custom id. Link to it with the custom anchor.

Text formatting

Regular text, bold text, italic text, bold italic, ~~struck-through text~~, inline code, H₂O and x² (subscript and superscript are enabled), plus a normal link, an autolink to https://docs.astro.build, and an email link to [email protected].

A blockquote with formatting and a link.

Nested blockquotes also work.

Lists

Unordered

First item
Second item
- Nested item
- Another nested item
Third item

Ordered

First step
Second step
1. Nested step
2. Another nested step
Third step

Task list

Render Markdown and MDX
Render math with KaTeX
Add more posts
Replace the placeholder site description

Tables

Feature	Status	Notes
Markdown	✅	CommonMark + GFM
MDX	✅	Astro components inside content
Math	✅	KaTeX at build time
Images	✅	Responsive local and remote

A wider table to check horizontal overflow on mobile:

One	Two	Three	Four	Five	Six	Seven	Eight
1	2	3	4	5	6	7	8
alpha	beta	gamma	delta	epsilon	zeta	eta	theta

Blockquotes

Plain blockquote.

Lists inside blockquotes work.

So do links.

Footnotes

Here is a footnote reference¹ and a second one². The definitions are collected at the bottom of the page.

Code blocks

A JavaScript block with a title, line numbers, and line markers:

1
const answer = 42;
2

3
function double(value) {
4
  return value * 2;
5
}
6

7
console.log(double(answer));

A TypeScript block without extra metadata:

interface Post {
  title: string;
  pubDate: Date;
}

const post: Post = {
  title: 'Rendering Kitchen Sink',
  pubDate: new Date('2026-10-23'),
};

A Python block with line highlighting:

def greet(name: str) -> str:
    message = f"Hello, {name}!"
    print(message)
    return message

A shell block:

npm install
npm run dev
npm run build

An Astro component inside a code block:

---
const { name } = Astro.props;
---

<p>Hello, {name}!</p>

A JSON block:

{
  "name": "bamboozl.in",
  "framework": "Astro",
  "version": 7
}

Math

Inline math: $E = mc^2$ , and a slightly more useful one: $f(x) = \frac{1}{1 + e^{-x}}$ .

Display math:

\begin{aligned} \mathcal{L}(\theta) &= -\frac{1}{N} \sum_{i=1}^{N} \log p_\theta(y_i \mid x_i) \\ &= -\frac{1}{N} \sum_{i=1}^{N} \sum_{k=1}^{K} y_{i,k} \log \hat{y}_{i,k}. \end{aligned}

A matrix and an integral:

A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \qquad \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}.

Images

Local image with Markdown syntax

A blue-to-teal gradient with the words “Local image”.

Local image with a caption

An orange-to-magenta gradient with the words “Second local image”. — Figure 1. A local image rendered through the Figure component, with an AVIF/WebP picture element and a responsive srcset.

Remote image with Markdown syntax

A mountain lake surrounded by trees.

Remote image with a caption

A road winding through a mountain landscape. — Figure 2. A remote image from an authorized host, optimized and served responsively.

MDX components

Inline HTML

MDX also accepts HTML elements when you need them:

Press Ctrl + K to search.
Highlighted text is available too.
API is an abbreviation.

An expandable section

This content is inside a native <details> element.

That is the end of the kitchen sink.

The first footnote, with a link back to the images section. ↩
The second footnote, with inline code and formatting. ↩