Markdown 全格式渲染示例

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

iframe嵌入

<iframe width="560" height="315" src="https://www.youtube.com/embed/TOzzma2kDXA?si=n85e4WJZx1JGE_Rk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

html代码测试

todo 代办

目录建议

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

一级标题 Heading 1

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

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

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

二级标题 Heading 2

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

三级标题 Heading 3

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

四级标题 Heading 4

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

五级标题 Heading 5

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

六级标题 Heading 6

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

段落与强调

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

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

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

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

引用与分隔线

这是一级引用。

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

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

这是二级引用。

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

列表与任务清单

无序列表

第一项
第二项
第三项

有序列表

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

混合列表示例

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

任务清单

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

链接与图片

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

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

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

下面是图片测试：

示例封面图

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

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

表格

字段	类型	是否必填	说明
title	string	是	文章标题
summary	string	否	文章摘要
contentMarkdown	string	是	Markdown 正文
coverImage	string	否	封面图地址
publishedAt	datetime	否	发布时间

对齐方式测试：

左对齐	居中对齐	右对齐
Vue	Nuxt	4.3
Java	Spring Boot	3.4
MySQL	Redis	8.4

行内代码与代码块

下面是 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}$ 、 $a_{n} = a_{1} + (n - 1) d$ 、 $x_{1}, x_{2}, \dots, x_{n}$ 、 $H_{2} O$ 、 $x^{2} + y^{2} = z^{2}$ 。

如果行内公式已经正常渲染，通常能顺带看出：

上下标是否贴合正文基线
公式字号是否和正文协调
多个公式连续出现时是否有不自然跳动

分数、根号与上下标

下面这一组主要用来测试分数、根号、上下标和括号伸展：

\frac{1}{2} + \frac{3}{4} = \frac{5}{4}

a^{2} + b^{2} = c

x_{n + 1} = x_{n} - \frac{f ( x _{n} )}{f ^{'} ( x _{n} )}

(\frac{x ^{2} + 1}{x - 1})^{2}

极限、求和与积分

这一组更适合观察大符号在正文中的纵向节奏是否稳定：

n \to \infty lim (1 + \frac{1}{n})^{n} = e

k = 1 \sum n k = \frac{n ( n + 1 )}{2}

\int_{0}^{1} x^{2} d x = \frac{1}{3}

\int_{- \infty}^{+ \infty} e^{- x^{2}} d x = π

多行推导

多行公式能很好地暴露块级容器、对齐和窄屏滚动问题：

f (x) f^{'} (x) f^{''} (x) = x^{3} - 3 x + 1 = 3 x^{2} - 3 = 6 x

\nabla \cdot E \nabla \cdot B \nabla \times E \nabla \times B = \frac{ρ}{ε _{0}} = 0 = - \frac{\partial B}{\partial t} = μ_{0} J + μ_{0} ε_{0} \frac{\partial E}{\partial t}

矩阵与线性代数

矩阵最适合用来检查：

横向内容是否会溢出
行列间距是否自然
移动端是否有可控滚动

147258369

(λ - a - c - b λ - d)

A^{- 1} = \frac{1}{a d - b c} [d - c - b a]

概率与统计

如果你的内容站后面会写技术、算法或数据分析类文章，这一组也很值得长期保留：

P (A ∣ B) = \frac{P ( B ∣ A ) P ( A )}{P ( B )}

μ = \frac{1}{n} i = 1 \sum n x_{i}

σ^{2} = \frac{1}{n} i = 1 \sum n (x_{i} - μ)^{2}

复杂公式观察点

如果这部分都能稳定渲染，建议重点再观察这些细节：

长公式是否会撑破正文容器
块级公式在移动端是否能平滑横向滚动
公式块上下留白是否和段落、表格、代码块协调
行内公式与中文正文混排时是否显得突兀

脚注

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

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

折叠块与原生 HTML

点击展开查看附加内容

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

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

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

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

混合内容排版

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

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

推荐的检查顺序：

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

示例代码：

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

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

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

引用式总结

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

扩展语法观察区

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

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

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

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

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

结尾

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

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

祝你测试顺利。

测试-md示例