回到列表
这是一篇渲染测试文章。每一节都先给出语法（代码块里的源码），再紧跟效果（实际渲染）。对照着看，哪一节的效果和语法对不上，就是需要完善的地方。
标题
语法：
# 一级标题 H1
## 二级标题 H2
### 三级标题 H3
#### 四级标题 H4
##### 五级标题 H5
###### 六级标题 H6效果：
一级标题 H1
二级标题 H2
三级标题 H3
四级标题 H4
五级标题 H5
六级标题 H6
文本样式
语法：
**粗体** *斜体* ***粗斜体*** ~~删除线~~ `行内代码`效果：粗体 斜体 粗斜体 删除线 行内代码
组合语法：
**粗体里有 `代码`**、*斜体里有[链接](/blog)*、**粗体加~~删除线~~混排**组合效果：粗体里有 代码、斜体里有链接、粗体加删除线混排
扩展文本（HTML 内联元素）
语法：
<mark>高亮</mark> <kbd>Ctrl</kbd> + <kbd>C</kbd>
E = mc<sup>2</sup>、H<sub>2</sub>O
<abbr title="HyperText Markup Language">HTML</abbr>
<u>下划线</u>、<ins>插入</ins>、<del>删除</del>
第一行<br />第二行由 br 换行
效果：高亮 Ctrl + C、E = mc2、H2O、HTML、下划线、插入、删除。第一行
第二行由 br 换行。
转义、实体、Emoji、表达式
语法：
转义：\*不是斜体\*、\#不是标题
实体：© ™ — … < > &
Emoji：🎉 ✅ 🚀 💡 🐛
表达式：{2 ** 10}效果：转义 *不是斜体*、#不是标题；实体 © ™ — … < > &；Emoji 🎉 ✅ 🚀 💡 🐛；表达式 2 的 10 次方是 1024。
链接
语法：
[行内链接](/blog)
[带标题](https://github.com "GitHub 首页")
裸链接自动识别：https://nextjs.org
[页内锚点](#标题)
引用式：[Next.js][next] 与 [Tailwind][tw]
[next]: https://nextjs.org
[tw]: https://tailwindcss.com
效果：
列表
语法：
- 无序项一
- 无序项二
- 子项 A
- 子项 B
1. 有序项一
2. 有序项二
1. 子步骤效果：
- 无序项一
- 无序项二
- 子项 A
- 子项 B
- 有序项一
- 有序项二
- 子步骤
任务列表
语法：
- [x] 已完成
- [ ] 未完成
- [x] 嵌套已完成
- [ ] 嵌套未完成效果：
- 已完成
- 未完成
- 嵌套已完成
- 嵌套未完成
引用
语法：
> 单行引用
> 第一段
>
> 第二段
>
> > 嵌套引用效果：
单行引用
第一段
第二段
嵌套引用
代码块
语法（用四个反引号包住三个反引号，即可展示代码块本身）：
```js
const x = 1
```把 js 换成 python、go、bash、json、diff 等语言标注即可。下面是几种语言的效果：
function fib(n) {
if (n < 2) return n
return fib(n - 1) + fib(n - 2)
}class Stack:
def __init__(self):
self._items = []
def push(self, item):
self._items.append(item)#!/usr/bin/env bash
set -euo pipefail
for file in *.log; do
gzip "${file}"
done{
"name": "nextme",
"scripts": { "dev": "next dev", "build": "next build" }
}- const version = '1.0.0'
+ const version = '1.1.0'
export default version无语言代码块（不写语言标注）：
这是没有语言标注的代码块，
保留等宽字体与原始换行。超长行（测试横向滚动）：
const veryLongLine = 'this is a intentionally very long single line of code that should trigger horizontal scrolling inside the code block instead of wrapping onto multiple lines'表格
语法：
| 左对齐 | 居中 | 右对齐 |
| :----- | :--: | -----: |
| a | b | 1.00 |
| 长一些 | 居中 | 20.50 |效果：
| 左对齐 | 居中 | 右对齐 |
|---|---|---|
| a | b | 1.00 |
| 长一些 | 居中 | 20.50 |
单元格含行内格式：
| 名称 | 说明 |
|---|---|
| 粗体 | 含加粗文字 |
| 代码 | 含 inline code |
| 链接 | 含链接 |
图片
语法：
普通图片：
带图注（alt: 前缀会在图下显示说明）：
带链接的图片：
[](/blog)效果：
这是图注文字，会显示在图片下方
分隔线
语法：
上一段
---
下一段效果：
上一段
下一段
脚注
语法：
正文引用一个脚注[^1]。
[^1]: 这是脚注的内容。折叠内容
语法：
<details>
<summary>点击展开</summary>
折叠区域里的 Markdown 内容。
</details>效果：
点击展开更多内容
折叠区域里同样可以写 Markdown：
- 列表项一
- 列表项二
console.log('折叠区域里的代码')自定义组件
Callout 提示框
语法：
<Callout emoji="💡">
这是一个 Callout 提示框。
</Callout>效果：
💡
这是一个 Callout 提示框，用来强调重要信息。
ProsCard / ConsCard
语法：
<ProsCard title="MDX" pros={['优点一', '优点二']} />
<ConsCard title="MDX" cons={['缺点一', '缺点二']} />效果：
MDX
支持 React 组件
支持 JSX 语法
扩展性强
便于维护
You might not use MDX if...
需要额外配置
学习成本略高
构建更慢
TechCard 技术栈卡片
语法：
<TechCard techList={[{ category: '框架', tech: 'Next.js' }]} />效果：
Project Tech
框架
Next.js
样式
Tailwind CSS
内容
MDX
Table 数据表格组件
语法：
<Table data={{ headers: ['字段', '类型'], rows: [['title', 'string']] }} />效果：
| 字段 | 类型 | 必填 |
|---|---|---|
| title | string | 是 |
| image | string | 否 |
| category | string | 是 |
ImageTabs 图片标签切换
语法：
<ImageTabs items={[
{ label: '其一', src: '/blog-img/jianlai/v36.webp' }, // 本地图片
{ label: '远程', src: 'https://picsum.photos/seed/tab/1200/800' }, // 网络图片
]} />src 支持本地路径（/blog-img/…）和远程 URL（https://…），tab 过多时会自动换行、不出现横向滚动条。
效果：
结尾
如果每一节的「效果」都和上面的「语法」对得上——标题分级、文本样式、列表缩进、引用嵌套、代码高亮、表格对齐、图片与图注、脚注、折叠块、以及自定义组件——那么博客的 Markdown 渲染就是完善的。哪一节对不上，就去补哪一节。