Markdown 渲染测试全格式样张

这篇文章用于在本地 CMS 和前端博客页面中检查 Markdown 渲染效果。正文刻意覆盖常见格式，方便回归测试样式、目录锚点、代码高亮、表格横向滚动和图片说明。

文字样式 #

普通段落应该保持舒适的行高和段间距。这里包含 加粗文字、斜体文字、加粗斜体、删除线、inline code，以及一个外部链接：Markdown Guide。

中文和 English mixed content should render correctly. 数字、标点、代码名如 bodyMarkdown、renderBlogArticle 和 markdown-it 也应该保持清晰。

标题层级 #

三级标题 #

三级标题会进入文章目录，并且应该带有可点击的锚点。

四级标题 #

四级标题也会进入目录，用来测试嵌套层级。

五级标题

五级标题不会进入当前目录配置，但正文样式仍然应该正常。

列表 #

无序列表：

• 支持普通列表项
• 支持带有 inline code 的列表项
• 支持长文本自动换行，换行后不应该破坏项目符号和缩进

有序列表：

1. 打开本地 CMS
2. 发布这篇测试文章
3. 在前端博客详情页检查渲染

嵌套列表：

• 内容编辑
  • 标题、摘要、正文
  • 标签和 SEO 字段
• 前端展示
  • 目录锚点
  • 代码高亮
  • 响应式表格

引用 #

这是一个普通引用块。它应该和正文有明显区分，但不应该显得像错误或警告。

第二段引用文本用于检查多段 blockquote 的间距。

表格 #

对齐表格：

代码块 #

TypeScript：

type ArticleStatus = 'draft' | 'published'

interface MarkdownFixture {
  title: string
  slug: string
  status: ArticleStatus
  tags: string[]
}

export function publishFixture(article: MarkdownFixture): MarkdownFixture {
  return {
    ...article,
    status: 'published'
  }
}

Bash：

pnpm --dir cms dev
pnpm build
pnpm test

JSON：

{
  "slug": "markdown-rendering-kitchen-sink",
  "locale": "zh",
  "published": true,
  "tags": ["markdown", "cms", "qa"]
}

Diff：

- onMounted(() => ensureArticleContext(true))
+ onMounted(() => ensureArticleContext())

图片 #

普通图片：

带说明文字的图片：

提示块 #