Markdown 全格式渲染示例

这是一份用于测试博客前端渲染效果的 Markdown 示例文档。
你可以直接复制到文章系统中，也可以把这份文件作为渲染回归测试样例长期保留。

目录建议

• 标题层级
• 段落与强调
• 引用与分隔线
• 列表与任务清单
• 链接与图片
• 表格
• 行内代码与代码块
• 数学公式
• 脚注
• 折叠块与原生 HTML
• 混合内容排版

一级标题 Heading 1

这是一个普通段落，用来测试正文的默认字号、行高、字间距、段间距以及最大阅读宽度是否合适。

同一个段落中可以包含 粗体、斜体、粗斜体、删除线、行内代码、<mark>高亮文本</mark>，以及 Ctrl + K 这种快捷键写法。

这里再补一个较长的中文自然段，方便观察文本在多行换行时的阅读节奏是否稳定。理想情况下，正文不应该显得过于拥挤，也不应该让行距过于松散，影响连续阅读体验。

二级标题 Heading 2

二级标题下通常承接一个完整小节，适合测试标题的字号层级、与上文的留白距离、标题锚点偏移以及目录高亮状态。

三级标题 Heading 3

三级标题适合做章节内的子主题。

四级标题 Heading 4

四级标题通常用于更细粒度的信息组织。

五级标题 Heading 5

五级标题可以用于说明、附注或边界场景。

六级标题 Heading 6

六级标题一般很少使用，但仍建议测试样式是否可读。

段落与强调

春天适合重新整理内容结构，也适合检查博客的排版系统是否足够稳定。

如果你正在做内容站点，通常会特别关注这些细节：

• 粗体 是否足够醒目
• 斜体 是否与正文有明显区分
• 删除线 是否颜色偏淡导致不可读
• 行内代码 是否有独立背景与圆角

你也可以测试中英文混排，例如：Yunyu blog 在渲染 Markdown article 时，应该保证 English words、数字 2026、以及中文内容之间都保持舒适的阅读节奏。

引用与分隔线

这是一级引用。

引用块常用于摘录、强调观点或做补充说明。

这是一个带嵌套层级的引用。

这是二级引用。

二级引用适合测试边框、缩进和背景层次。

列表与任务清单

无序列表

• 第一项
• 第二项
• 第三项

有序列表

1. 打开博客后台
2. 新建一篇测试文章
3. 粘贴这份 Markdown 内容
4. 检查前端渲染效果

混合列表示例

1. 内容准备
   • 标题
   • 正文
   • 配图
2. 排版检查
   • 间距
   • 字体
   • 对齐
3. 发布预览
   • PC 端
   • 移动端

任务清单

• 标题层级测试
• 列表样式测试
• 代码高亮测试
• 数学公式插件测试
• 脚注插件测试
• 自定义容器测试

链接与图片

这是一个普通链接：云屿项目仓库。

这是一个自动链接：https://example.com/articles/markdown-demo

这是一个带 title 的链接：前往文章详情页。

下面是图片测试：

带说明文字的图片写法可以配合斜体段落一起测试：

图 1：用于测试图片宽度、圆角、阴影、懒加载占位以及 caption 样式。

表格

对齐方式测试：

行内代码与代码块

下面是 bash 代码块：

pnpm install
pnpm dev

下面是 ts 代码块：

interface ArticleTocItem {
  id: string
  text: string
  level: number
}

const toc: ArticleTocItem[] = [
  { id: 'intro', text: '简介', level: 2 },
  { id: 'usage', text: '使用方式', level: 2 }
]

export function formatHeading(text: string): string {
  return text.trim().toLowerCase().replace(/\s+/g, '-')
}

下面是 java 代码块：

/**
 * 文章摘要值对象。
 * 作用：用于在接口层统一返回文章卡片所需的基础信息。
 */
public class PostSummaryResponse {

    /**
     * 文章标题。
     */
    private String title;

    /**
     * 文章摘要。
     */
    private String summary;
}

下面是 json 代码块：

{
  "code": 0,
  "message": "success",
  "data": {
    "id": 10001,
    "title": "Markdown 全格式渲染示例",
    "status": "PUBLISHED"
  }
}

下面是 diff 代码块：

- color: #999;
+ color: #111827;

- line-height: 1.6;
+ line-height: 1.85;

数学公式

行内公式测试：$E=m{c}^2$

块级公式测试：

矩阵公式测试：

如果当前前端没有启用数学公式插件，这一部分可能会按原始文本显示，这也是很有价值的测试结果。

脚注

这是一个带脚注的句子。^1

脚注也可以连续出现。^note

折叠块与原生 HTML

<details>
<summary>点击展开查看附加内容</summary>

这里是折叠区域内部的内容，可以测试原生 HTML 标签在 Markdown 渲染器中的兼容性。

• 支持列表
• 支持段落
• 支持强调文本

</details>

这是一个使用 <kbd> 标签的示例：按下 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存草稿。

这是一个使用 <sub> 和 <sup> 的示例：H₂O 与 x²。

混合内容排版

一个带引用、列表和代码的组合段落

做内容系统时，Markdown 渲染不是“能显示就行”，而是一个持续影响阅读体验的基础能力。

推荐的检查顺序：

1. 先检查标题、段落、列表、引用是否稳定
2. 再检查表格、图片、代码块是否在窄屏下溢出
3. 最后检查扩展语法是否优雅降级

示例代码：

<template>
  <article class="yy-content" v-html="html"></article>
</template>

一段适合测试阅读宽度的长文本

很多博客页面在设计时只关注“看起来像文章页”，但真正上线之后，最常见的问题往往不是功能缺失，而是细节不稳。例如：标题与正文距离过小、列表缩进不统一、代码块在移动端横向滚动体验太差、表格字体过小、链接颜色和正文区分不明显。这些问题单独看都不算严重，但叠加起来会明显影响阅读品质，而一份足够全面的 Markdown 示例，正好可以帮助我们快速发现这些问题。

引用式总结

如果这份文档中的大多数元素都能稳定渲染，说明你的博客前端 Markdown 展示层已经具备了比较完整的基础能力。

扩展语法观察区

下面这些语法是否生效，取决于你的 Markdown 渲染器是否启用了对应插件。

::: info
这是一个自定义容器示例，常见于文档站。
:::

==这是高亮语法示例==

• 这是某些编辑器支持的增强任务列表语法

~下划线/插入语法在部分实现中可能不会生效~

结尾

渲染测试完成后，你可以重点观察以下几类问题：

• 标题层级是否清晰
• 段落间距是否舒适
• 图片和表格是否溢出容器
• 代码块是否具备语言标签与高亮
• 移动端是否出现横向滚动异常
• 扩展语法在未启用插件时是否优雅降级

祝你测试顺利。