Back to writing

Template: Markdown Showcase (delete me)

December 2, 20235 min read

A reference post showing everything the .markdown stylesheet renders. Copy whatever you need, then delete this file.

Headings

Only ## and ### are styled as display headings — the post title is rendered separately by the page, so don't add a top-level #.

Sub-section

Bold and italic work inline. So do links, which are styled with the primary color.

Lists

  • Unordered lists use discs
  • Nested items are indented
  • Keep list items short
  1. Ordered lists render as numbers
  2. Useful for steps and recipes
  3. Like this one

Blockquotes

A blockquote gets a primary-color border on the left and muted text. Good for pull quotes or "why I wrote this" asides.

Code

Inline code like const slug = file.replace(/\.md$/, "") gets a subtle background chip.

Fenced blocks render in a card-styled container with horizontal scroll:

$ pnpm build
▲ Next.js 15 — 13 static pages generated
✓ Compiled successfully

Horizontal rule

Use --- as a thematic break:

Images

Drop the file in content/blog/_images/<slug>/ and reference it by name. The build decides where it ends up: copied to the CDN for a public post, inlined into the gated HTML for a locked one.

A diagram

Captions and side-by-side pairs use raw HTML:

<figure>

![Alt text](/placeholder.jpg)

<figcaption>What the reader should notice.</figcaption>
</figure>

<div class="md-row">

![Before](/placeholder.jpg)
![After](/placeholder.jpg)

</div>

Final note

Delete this file once you've stolen the pieces you need.

Template: Markdown Showcase (delete me) | Hưng Trần