这一页把 MDViewer 能渲染的东西全部演示一遍。你可以把它当作渲染能力自检表——每个区块都应当显示为排版后的效果，而不是原始符号。
提示
把这个文件下载到本地，用首页的阅读器打开，能得到完全一致的渲染结果。
一、文本与行内格式#
普通段落文字。粗体、斜体、粗斜体、删除线、下划线插入、高亮标记、行内代码。
数学下标与上标：H2O、E = mc2、第 42nd 项。
行内链接 CommonMark 规范
、自动链接 https://developer.mozilla.org/
、站内链接
。
缩写会在悬停时显示全称：HTML 与 CSS 都是前端基础。
*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets
表情符号：🚀 ✨ 📚 ✅ ⚠️
强制换行在行尾加两个空格：
这一行与上一行同属一个段落。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
普通段落文字。**粗体**、*斜体*、***粗斜体***、~~删除线~~、++下划线插入++、==高亮标记==、`行内代码`。
数学下标与上标：H~2~O、E = mc^2^、第 42^nd^ 项。
行内链接 [CommonMark 规范](https://commonmark.org/)、自动链接 <https://developer.mozilla.org/>、[站内链接](../quick-start/)。
缩写会在悬停时显示全称：HTML 与 CSS 都是前端基础。
*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets
表情符号：:rocket: :sparkles: :books: :white_check_mark: :warning:
强制换行在行尾加两个空格：
这一行与上一行同属一个段落。
|
二、标题层级#
标题会自动生成锚点，右侧目录可跳转，鼠标悬停时标题末尾出现 # 链接。
三级标题#
四级标题#
五级标题#
六级标题#
三、列表#
无序列表#
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
|
- 第一项
- 第二项
- 嵌套第二层
- 嵌套第三层
- 第三项
|
有序列表#
- 准备内容
- 用 Markdown 写作
- 起草正文
- 边写边预览
- 发布出去
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
|
1. 准备内容
2. 用 Markdown 写作
1. 起草正文
2. 边写边预览
3. 发布出去
|
任务列表#
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
|
- [x] 支持 GFM 任务列表
- [x] 已完成项显示删除线
- [ ] 未完成项
- [ ] 支持嵌套
- [x] 子项也可勾选
- [ ] 子项未完成
|
定义列表#
- Mermaid
- 用纯文本描述图表的语法，可渲染成流程图、时序图等。
- Markdown
- 一种轻量级标记语言，用纯文本表达排版结构。
- KaTeX
- 在浏览器里渲染 TeX 公式的排版库，以速度见长。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
7
8
|
Mermaid
: 用纯文本描述图表的语法，可渲染成流程图、时序图等。
Markdown
: 一种轻量级标记语言，用纯文本表达排版结构。
KaTeX
: 在浏览器里渲染 TeX 公式的排版库，以速度见长。
|
四、引用与警示块#
普通引用块。引用可以包含行内格式、代码，以及多个段落。
这是引用中的第二段。
嵌套引用。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
|
> 普通引用块。引用可以包含**行内格式**、`代码`，以及多个段落。
>
> 这是引用中的第二段。
>
> > 嵌套引用。
|
GitHub 风格的警示块会渲染成带图标的彩色卡片：
提示
一条能让你更省事的建议。比如：按 ? 可以查看全部快捷键。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
> [!NOTE]
> 用于补充说明的一般性信息，不影响主流程。
> [!TIP]
> 一条能让你更省事的建议。比如：按 <kbd>?</kbd> 可以查看全部快捷键。
> [!IMPORTANT]
> 完成任务所必需的关键信息，跳过会导致失败。
> [!WARNING]
> 需要立即注意的内容，忽略可能带来负面后果。
> [!CAUTION]
> 有风险的操作，执行前请确认你清楚后果。
|
五、代码#
行内与围栏代码#
安装命令是 npm install，配置文件是 package.json。
1
2
3
4
5
|
# 找出目录下所有 Markdown 文件
find . -name "*.md" -not -path "./node_modules/*"
# 汇总总字数
wc -w $(find . -name "*.md") | tail -1
|
多语言高亮#
1
2
3
4
5
6
7
8
|
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({ html: true, linkify: true });
export function render(source) {
const { data, content } = parseFrontMatter(source);
return { meta: data, html: md.render(content) };
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
from dataclasses import dataclass
@dataclass
class Document:
path: str
words: int
@property
def minutes(self) -> int:
"""按每分钟 450 字估算中文阅读时长。"""
return max(1, round(self.words / 450))
docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "分钟")
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
package main
import (
"fmt"
"strings"
)
func Slugify(title string) string {
return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}
func main() {
fmt.Println(Slugify("Hello Markdown World"))
}
|
1
2
3
4
5
6
7
8
9
10
11
|
#[derive(Debug, Clone)]
pub struct Heading {
pub level: u8,
pub text: String,
}
impl Heading {
pub fn anchor(&self) -> String {
self.text.to_lowercase().replace(' ', "-")
}
}
|
1
2
3
4
5
6
7
8
9
10
|
SELECT d.path,
COUNT(h.id) AS heading_count,
SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
|
1
2
3
4
5
6
7
8
|
markup:
goldmark:
extensions:
passthrough:
enable: true
delimiters:
block: [["\\[", "\\]"], ["$$", "$$"]]
inline: [["\\(", "\\)"], ["$", "$"]]
|
1
2
3
4
5
|
function render(source) {
- return marked(source);
+ const { data, content } = parseFrontMatter(source);
+ return md.render(content);
}
|
代码块右上角提供复制、行号开关、自动换行按钮；超过 24 行会自动折叠。
六、表格#
支持对齐语法，表头可点击排序，超宽时横向滚动。
| 功能 |
引擎 |
体积 |
加载方式 |
| Markdown 解析 |
markdown-it |
505 KB |
首屏加载 |
| 代码高亮 |
highlight.js |
含在主包 |
首屏加载 |
| 数学公式 |
KaTeX |
261 KB |
按需加载 |
| 图表 |
Mermaid |
3.3 MB |
按需加载 |
| 全文搜索 |
Fuse.js |
含在主包 |
首屏加载 |
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
7
|
| 功能 | 引擎 | 体积 | 加载方式 |
|:-----|:----:|-----:|:---------|
| Markdown 解析 | markdown-it | 505 KB | 首屏加载 |
| 代码高亮 | highlight.js | 含在主包 | 首屏加载 |
| 数学公式 | KaTeX | 261 KB | 按需加载 |
| 图表 | Mermaid | 3.3 MB | 按需加载 |
| 全文搜索 | Fuse.js | 含在主包 | 首屏加载 |
|
左对齐 / 居中 / 右对齐分别由 :---、:---:、---: 控制。
含复杂内容的表格#
| 语法 |
写法 |
效果 |
| 粗体 |
**文字** |
文字 |
| 代码 |
`code` |
code |
| 公式 |
$a^2+b^2$ |
$a^2+b^2$ |
| 链接 |
[名称](url) |
名称
|
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
|
| 语法 | 写法 | 效果 |
|------|------|------|
| 粗体 | `**文字**` | **文字** |
| 代码 | `` `code` `` | `code` |
| 公式 | `$a^2+b^2$` | $a^2+b^2$ |
| 链接 | `[名称](url)` | [名称](https://example.com) |
|
七、数学公式#
行内公式#
质能方程 $E = mc^2$ 与欧拉恒等式 $e^{i\pi} + 1 = 0$ 都可以直接写在句子里。当 $n \to \infty$ 时，$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$。
显示 Markdown 源码
隐藏 Markdown 源码
1
|
质能方程 $E = mc^2$ 与欧拉恒等式 $e^{i\pi} + 1 = 0$ 都可以直接写在句子里。当 $n \to \infty$ 时，$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$。
|
块级公式#
$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$
$$
A = \begin{pmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \cdots & a_{mn}
\end{pmatrix}
$$多行对齐#
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$分段函数与求和#
$$
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \\
-x^2 & \text{if } x < 0
\end{cases}
\qquad
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx
$$八、图表（Mermaid）#
图表会跟随明暗主题自动换色，悬停时右上角可复制源码或下载 SVG。
流程图#
时序图#
状态图#
实体关系图#
甘特图#
用户旅程图#
思维导图#
Git 分支图#
九、折叠区块#
点击展开：为什么图表引擎要按需加载？
Mermaid 打包后约 3.3 MB，是整个项目里最大的依赖。如果放进首屏主包，即使一篇文档里没有任何图表，用户也要先下载它。
因此 MDViewer 把 Mermaid 和 KaTeX 拆成独立的 ES 模块，只有当页面中真的出现 mermaid 代码块或数学公式时，才通过动态 import() 拉取。对于纯文字文档，首屏只需加载约 505 KB 的主包。
点击展开：支持哪些 Front Matter 格式？
三种都支持，阅读器会自动识别并在文档标题下方以折叠卡片展示：
- YAML：以
--- 包裹，最常用
- TOML：以
+++ 包裹
- JSON：以
{ } 包裹
title、description、date、author、tags 等字段会被提取到文档头部单独呈现。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<details>
<summary>点击展开：为什么图表引擎要按需加载？</summary>
Mermaid 打包后约 3.3 MB，是整个项目里最大的依赖。如果放进首屏主包，即使一篇文档里没有任何图表，用户也要先下载它。
因此 MDViewer 把 Mermaid 和 KaTeX 拆成独立的 ES 模块，只有当页面中真的出现 `mermaid` 代码块或数学公式时，才通过动态 `import()` 拉取。对于纯文字文档，首屏只需加载约 505 KB 的主包。
</details>
<details>
<summary>点击展开：支持哪些 Front Matter 格式？</summary>
三种都支持，阅读器会自动识别并在文档标题下方以折叠卡片展示：
- **YAML**：以 `---` 包裹，最常用
- **TOML**：以 `+++` 包裹
- **JSON**：以 `{ }` 包裹
`title`、`description`、`date`、`author`、`tags` 等字段会被提取到文档头部单独呈现。
</details>
|
十、脚注#
Markdown 诞生于 2004 年，用来在纯文本文件里写带格式的内容。如今大多数工具遵循 CommonMark 规范，并在其上叠加 GitHub 风格扩展。
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
|
Markdown 诞生于 2004 年[^origin]，用来在纯文本文件里写带格式的内容。如今大多数工具遵循 CommonMark 规范[^spec]，并在其上叠加 GitHub 风格扩展[^gfm]。
[^origin]: 由 John Gruber 与 Aaron Swartz 共同设计，目标是让文本在渲染之前就已经好读。
[^spec]: 2014 年发布的精确规范，消除了原始描述里大量的歧义。
[^gfm]: 增加了表格、任务列表、删除线与自动链接，也就是今天大多数人默认的那套语法。
|
十一、图片#
图片支持点击放大、滚轮缩放与拖拽平移。带标题的图片会渲染为居中的图注。
三栏布局：左侧文件树、中间正文、右侧大纲
十二、原始 HTML#
Markdown 中可以直接写 HTML，会原样渲染：
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
6
|
<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
<span class="badge">徽章组件</span>
<span class="badge">直接写 HTML</span>
<kbd>Ctrl</kbd> + <kbd>K</kbd>
<progress value="72" max="100" style="width:8rem"></progress>
</div>
|
十三、转义与特殊字符#
反斜杠转义：*不是斜体*、`不是代码`、# 不是标题。
HTML 实体：© — … → ≤ ≠
中文标点与西文混排：“引号”、《书名号》、破折号——以及省略号……
显示 Markdown 源码
隐藏 Markdown 源码
1
2
3
4
5
|
反斜杠转义：\*不是斜体\*、\`不是代码\`、\# 不是标题。
HTML 实体：© — … → ≤ ≠
中文标点与西文混排：“引号”、《书名号》、破折号——以及省略号……
|
渲染自检清单#
如果下面每一项都符合预期，说明渲染链路完全正常：