This post is a living reference for how the blog renders Markdown. Every element below is produced by the same build pipeline that ships the rest of the site, so if something looks off here, it looks off everywhere — which makes this page a handy rendering smoke test as much as a styleguide.
Text and inline formatting
Paragraphs carry bold, italic, and inline code. Links point at another post or out to the CommonMark spec. No framework — the body is static HTML generated at build time and served from the edge, with nothing running at render time. (The view/like counter, share buttons, and language switch load their own scripts separately.)
Lists
Unordered, with nesting:
- A separate URL per post
- Per-page metadata
- Title and description
- Canonical and hreflang
- Structured data (JSON-LD)
Ordered, for steps:
- Parse the front matter and Markdown
- Inject the per-post SEO metadata
- Write static HTML into
dist/
Code blocks
Fenced blocks are set in monospace and scroll horizontally when a line runs long. Each block carries a bar that stays put: the language on the left, a copy button on the right. A fence must declare its language or the build fails; a diagram or anything else that is not code is text, which gets the panel but no bar; what a program printed is output:
function postUrl(key, lang, slug) {
return lang === 'zh' ? `/zh/${key}/${slug}/` : `/${key}/${slug}/`;
}
Quotes
Search engines rank pages, not sections of a page — so give every post its own URL.
Tables
| Element | Rendered as | Styled by |
|---|---|---|
## Heading | <h2> | .blog-post-body h2 |
> Quote | <blockquote> | .blog-post-body blockquote |
| Table row | <table> | .blog-post-body table |
Images
Images are responsive and rounded. Still reference them by absolute URL — but a local raster image pointed at by a site-absolute /… path (PNG/JPG/WebP) has its intrinsic pixels read at build time and width/height stamped in to reserve the box and cut CLS (SVGs have no fixed pixel box, so they're skipped). Auto-copy and lazy-loading are what's still on the backlog:
That is the full set. Anything the blog supports renders above; anything that doesn't appear here isn't wired up yet.