这篇用来演示博客是怎么把 Markdown 渲染成页面的，会随渲染逻辑一起更新。下面每种元素走的都是全站同一套构建管线，所以这页要是渲染正常，全站基本也不会有问题。
文字与行内格式
正文里能用加粗、斜体、行内代码。链接既能跳到 另一篇文章，也能指向站外的 CommonMark 规范。 这里没有框架，正文就是构建时生成好的静态 HTML，直接从边缘发出去，渲染不靠任何运行时脚本——浏览量、点赞、分享这些页面交互才另外挂 JS。
列表
无序列表，可以嵌套：
- 每篇文章一个独立 URL
- 每页独立的元数据
- 标题和描述
- canonical 与 hreflang
- 结构化数据（JSON-LD）
有序列表，用来写步骤：
- 解析 front matter 和 Markdown
- 注入每篇的 SEO 元数据
- 把静态 HTML 写进
dist/
代码块
代码块用等宽字体排版，遇到长行就横向滚动。每块顶上固定一条栏：左侧标出语言，右侧一键复制。fence 必须声明语言，否则构建直接失败；示意图这类非代码写 text，只出面板不出栏；程序输出写 output：
function postUrl(key, lang, slug) {
return lang === 'zh' ? `/zh/${key}/${slug}/` : `/${key}/${slug}/`;
}
引用
搜索引擎排名的单位是页面，不是页面里的某一段——所以每篇文章都该有自己的 URL。
表格
| 元素 | 渲染成 | 样式来自 |
|---|---|---|
## 标题 | <h2> | .blog-post-body h2 |
> 引用 | <blockquote> | .blog-post-body blockquote |
| 表格行 | <table> | .blog-post-body table |
图片
图片会自适应宽度，带圆角。引用还是只能给绝对 URL——但只要是 / 开头指向站内的本地光栅图（PNG/JPG/WebP 这些）， 构建时会自动读出它的原始像素、补上 width/height 把版面先占住，省掉 CLS（SVG 没有固定像素框，会跳过）。 剩下自动拷贝、懒加载这两步还在待办：
就这些。博客支持的元素全在上面了；没列出来的，就是还没接进来。