Use this note when you want to see how Markdown turns into a finished article on this template. Everything below is ordinary Markdown (plus a few explicit HTML callouts) rendered inside @lifanh/quiet-paper Prose on /writing/[...slug].

Primary prose heading

Most posts should rely on the frontmatter title above. This body-level # is included so the preview catches the spacing and scale of Markdown H1s when they appear after existing content.

Headings and body text

Paragraphs use a comfortable measure and relaxed line height. Strong emphasis stays in the ink color; italic inherits the same rhythm. Inline code gets a hairline border and surface background.

A second paragraph shows the default spacing between blocks. Links behave like the rest of the site: Writing index, About, or an external reference.

Third-level heading

Fourth-level heading

Fifth-level heading

Sixth-level heading

Lists

Unordered lists use muted markers and tight vertical rhythm:

• One column, one accent, links that carry expression
• Nested items when structure matters
  • Inner item with bold label
  • Another inner item
• A closing top-level item

Ordered steps read cleanly in demos and runbooks:

1. Add a file under src/content/posts/
2. Fill frontmatter: title, description, date
3. Run npm run dev and open /writing/your-slug

Task lists (GFM) align with accent checkboxes when your pipeline preserves task-list markup:

• Publish non-draft posts to /writing
• Wrap post body in Prose
• Replace sample copy with your own voice

Blockquote

Quiet interfaces borrow from documents: one clear column, restrained navigation, and states that feel like marginal notes rather than billboards.

Code blocks

Fenced blocks use Shiki highlighting and surface panels:

import { getPublishedPosts, postPath } from "../lib/posts";

const posts = await getPublishedPosts();
posts.map((post) => postPath(post));

npm run dev
npm run build

Table

Diagram (Mermaid)

sequenceDiagram
    participant Author
    participant Astro
    participant Prose
    Author->>Astro: Markdown in content/posts
    Astro->>Prose: render() to HTML
    Prose-->>Author: Published writing page

Callouts (HTML)

Callouts use explicit classes documented in the design system:

Inline semantics

Keyboard hints use Cmd + K. You can highlight a phrase, show removed copy, cite H₂O or x², and fold optional detail:

Footnotes

Footnotes stay muted and separated from the body.¹