文章功能测试

本文覆盖本博客支持的 MDX 扩展能力与标准 Markdown 语法，每种至少留一个实例，用于一次性验证渲染效果。站内媒体组件（视频 / 音频 / 下载 / B 站内嵌）另成一文：《站内媒体组件》。若发现显示异常，欢迎在评论区反馈。

一、MDX 扩展能力

1.1 变量插值

这篇文章的作者是：万人恢复。构建日期：2026 年 5 月 4 日。

1.2 内联 JSX 组件

🔮

JSX 卡片

完全用 Tailwind CSS 写成，直接嵌在 Markdown 里，可以带响应式布局与语义化 Token。

1.3 条件渲染与列表映射

MDX 里可以直接写 IIFE（立即执行函数表达式），条件渲染与列表映射都在里面：

MDX 核心能力（共 4 项）

01变量插值
02条件渲染
03列表映射
04组件嵌入

1.4 组件组合

JSX 片段与 Markdown 可以在同一文档里自由组合：

📝

Markdown 基础

标题、列表、表格、代码块

⚛️

JSX 组件

内联组件、条件渲染、列表映射

📐

数学公式

KaTeX 行内与块级渲染

二、基础排版

2.1 文本样式

加粗，斜体，加粗斜体，~~删除线~~，下划线，行内代码 npm run build，高亮文本，Ctrl + K。

上标：X² + Y² = Z²；下标：H₂O。

2.2 链接

行内链接：Next.js 官网。

引用式链接：React 文档推荐使用函数组件。Tailwind CSS 提供工具类优先的样式方案。

自动链接（GFM）：https://github.com 在 GFM 中会自动转为可点击链接。

2.3 图片

大图放图床仓库（wanrenhuifu/blog-assets）经 jsDelivr 引用，width/height 必须显式写出 —— 构建期只能读本地文件的尺寸，外部图片读不到，缺了它懒加载就没法预留位置：

三、列表

3.1 无序列表

一级项目
- 二级项目 A
  - 三级项目 —— 更深层级
- 二级项目 B
另一个一级项目

3.2 有序列表

第一步：安装依赖 —— npm install next、npm install tailwindcss @tailwindcss/typography
第二步：配置项目
1. 创建 next.config.ts
2. 配置 Tailwind 插件
3. 设置路径别名 @/
第三步：启动开发服务器（npm run dev，访问 http://localhost:3000）

3.3 任务列表

四、表格

4.1 对齐表格

框架	渲染模式	静态导出	学习曲线
Next.js	SSR / SSG / ISR	✅	中等
Astro	SSG / SSR	✅	平缓
Gatsby	SSG	❌	陡峭

4.2 复杂内容表格

功能	语法	说明
行内代码	`const x = 1`	使用反引号包裹
链接	`[文本](url)`	行内链接语法
粗体	`文本`	双星号包裹
管道符转义	`\|` 或 `\|`	表格中使用需转义

五、代码块

5.1 多语言高亮

TypeScript：

interface Post {
  slug: string;
  title: string;
  tags: string[];
  readingTime: number;
}
 
async function getPost(slug: string): Promise<Post | null> {
  const raw = await fs.readFile(`content/blog/${slug}/index.mdx`, 'utf-8');
  const { data, content } = matter(raw);
  return { slug, ...data, readingTime: estimateReadingTime(content) } as Post;
}

Python：

@dataclass
class Post:
    slug: str
    title: str
    reading_time: int
 
def extract_toc(content: str) -> list[dict]:
    """从 Markdown 内容提取目录结构"""
    return [
        {"level": len(m.group(1)), "text": m.group(2).strip()}
        for line in content.split('\n')
        if (m := re.match(r'^(#{2,3})\s+(.+)$', line))
    ]

Bash：

#!/bin/bash
# 批量构建脚本
 
set -euo pipefail
 
echo "🔨 开始构建…"
npm run build

YAML：

# GitHub Actions 工作流
name: Deploy
on:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci

5.2 代码块元信息

带标题的代码块：

lib/mdx.ts

import remarkGfm from "remark-gfm";
 
export const mdxOptions = { remarkPlugins: [remarkGfm] };

带行号的代码块：

def fibonacci(n: int) -> int:
    a, b = 0, 1
    for _ in range(2, n + 1):
        a, b = b, a + b
    return b

带行号 + 标题的代码块：

src/main.rs

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    println!("Sum: {}", numbers.iter().sum::<i32>());
}

5.3 Diff 代码块

// 优化前
function getPosts() {
- const data = fs.readFileSync('posts.json', 'utf-8');
- return JSON.parse(data);
+ const raw = fs.readFileSync('posts.json', 'utf-8');
+ return JSON.parse(raw).filter(post => post.published);
}

六、数学公式

6.1 行内公式

勾股定理： $a^2 + b^2 = c^2$ ；圆周率： $\pi \approx 3.14159$ ；欧拉恒等式： $e^{i\pi} + 1 = 0$ 。

6.2 块级公式

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

矩阵乘法：

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

七、引用

7.1 单层引用

"萧瑟秋风今又是，换了人间。" —— 《浪淘沙·北戴河》

7.2 嵌套引用

外层引用内容。

内层嵌套引用。这一层可以表达补充说明或引申观点。

第三层嵌套 —— 多见于学术论文或深度讨论中的多重转引。

回到外层，继续正文内容。

7.3 引用内嵌其他元素

引用内的格式化文本

无序列表项

另一个列表项
# 甚至可以嵌入代码块
echo "Hello from blockquote"
以及行内代码 const x = 1 和链接。

八、脚注与分割线

脚注

MDX 是 Markdown 的扩展¹，允许在文档中直接嵌入 JSX 组件²，这个博客用 next-mdx-remote 编译内容³。

水平分割线

分割线常用于在视觉上分隔内容区块，保持阅读节奏。

九、HTML 元素兼容性

9.1 折叠面板

点击展开 —— 查看详细说明

折叠面板（<details> + <summary>）适合 FAQ、附录或需要按需显示的长内容。

支持内嵌 Markdown 列表
支持粗体和斜体
支持行内代码 inline code

{ "hidden": true, "message": "这段 JSON 默认折叠" }

9.2 键盘输入

操作	快捷键
保存文件	`Ctrl` + `S`
查找	`Ctrl` + `F`
命令面板	`Ctrl` + `Shift` + `P`

9.3 高亮与缩写

使用高亮标记强调关键信息，也可以标记多个关键词。

HTML 与 CSS 是网页开发的基础。鼠标悬停在缩写词上可查看完整释义。

9.4 定义列表

MDX: Markdown 的扩展格式，允许在文档中直接嵌入 JSX 组件与 JavaScript 表达式。
GFM: GitHub Flavored Markdown，新增了表格、任务列表、删除线、自动链接等语法。

十、排版边界情况

10.1 中英文混排

React 18 引入了 Concurrent Features，包括 useTransition 和 useDeferredValue 两个核心 Hook。在 Next.js 15 中 App Router 已经成为推荐的架构模式，它基于 React Server Components（RSC）实现。TypeScript 的 strict 模式开启了 strictNullChecks、noImplicitAny 等检查项。

'net/http' 是 Go 语言的标准库 HTTP 包。在 Rust 中对应的 crate 有 hyper、axum 和 actix-web。

中文标点与英文混排：他说"Hello World！"；她回复"你好，世界！"；代码 console.log('hello'); 在行内使用。

10.2 特殊字符转义

字符	转义写法	渲染结果
星号	`\*`	不是斜体
下划线	`\_`	_不是斜体_
井号	`\#`	# 不是标题
反引号	\`	`不是代码`
管道符	`\|`	\| 不是表格列分隔
尖括号	`\<` `\>`	<不是 HTML>

10.3 超长内容

超长行内代码：const extremelyLongVariableNameThatMakesTheInlineCodeStretchAcrossMultipleLinesOrAtLeastOneVeryLongLineInTheParagraph = someFunctionCall(argument1, argument2, argument3)

超长 URL：https://github.com/vercel/next.js/tree/canary/packages/next/src/shared/lib/router/utils

10.4 深度嵌套列表

第一层
- 第二层
  - 第三层
    - 第四层 —— 这一层开始编号样式可能变化
- 回到第二层
回到第一层

以上覆盖了本博客目前支持的 MDX 扩展能力与标准 Markdown 语法。站内媒体组件（视频 / 音频 / 下载 / B 站内嵌）另成一文：《站内媒体组件》。发现渲染异常欢迎反馈。

MDX 官方文档 —— A markdown format that lets you use JSX. ↩
JSX 介绍 —— React 的 JavaScript 语法扩展。 ↩
next-mdx-remote GitHub —— 服务端 MDX 编译方案。 ↩

一、MDX 扩展能力

1.1 变量插值

这篇文章的作者是：万人恢复。构建日期：2026 年 5 月 4 日。

1.2 内联 JSX 组件

🔮

JSX 卡片

完全用 Tailwind CSS 写成，直接嵌在 Markdown 里，可以带响应式布局与语义化 Token。

1.3 条件渲染与列表映射

MDX 里可以直接写 IIFE（立即执行函数表达式），条件渲染与列表映射都在里面：

MDX 核心能力（共 4 项）

01变量插值
02条件渲染
03列表映射
04组件嵌入

1.4 组件组合

JSX 片段与 Markdown 可以在同一文档里自由组合：

📝

Markdown 基础

标题、列表、表格、代码块

⚛️

JSX 组件

内联组件、条件渲染、列表映射

📐

数学公式

KaTeX 行内与块级渲染

二、基础排版

2.1 文本样式

加粗，斜体，加粗斜体，~~删除线~~，下划线，行内代码 npm run build，高亮文本，Ctrl + K。

上标：X² + Y² = Z²；下标：H₂O。

2.2 链接

行内链接：Next.js 官网。

引用式链接：React 文档推荐使用函数组件。Tailwind CSS 提供工具类优先的样式方案。

自动链接（GFM）：https://github.com 在 GFM 中会自动转为可点击链接。

2.3 图片

三、列表

3.1 无序列表

一级项目
- 二级项目 A
  - 三级项目 —— 更深层级
- 二级项目 B
另一个一级项目

3.2 有序列表

第一步：安装依赖 —— npm install next、npm install tailwindcss @tailwindcss/typography
第二步：配置项目
1. 创建 next.config.ts
2. 配置 Tailwind 插件
3. 设置路径别名 @/
第三步：启动开发服务器（npm run dev，访问 http://localhost:3000）

3.3 任务列表

四、表格

4.1 对齐表格

框架	渲染模式	静态导出	学习曲线
Next.js	SSR / SSG / ISR	✅	中等
Astro	SSG / SSR	✅	平缓
Gatsby	SSG	❌	陡峭

4.2 复杂内容表格

功能	语法	说明
行内代码	`const x = 1`	使用反引号包裹
链接	`[文本](url)`	行内链接语法
粗体	`文本`	双星号包裹
管道符转义	`\|` 或 `\|`	表格中使用需转义

五、代码块

5.1 多语言高亮

TypeScript：

interface Post {
  slug: string;
  title: string;
  tags: string[];
  readingTime: number;
}
 
async function getPost(slug: string): Promise<Post | null> {
  const raw = await fs.readFile(`content/blog/${slug}/index.mdx`, 'utf-8');
  const { data, content } = matter(raw);
  return { slug, ...data, readingTime: estimateReadingTime(content) } as Post;
}

Python：

@dataclass
class Post:
    slug: str
    title: str
    reading_time: int
 
def extract_toc(content: str) -> list[dict]:
    """从 Markdown 内容提取目录结构"""
    return [
        {"level": len(m.group(1)), "text": m.group(2).strip()}
        for line in content.split('\n')
        if (m := re.match(r'^(#{2,3})\s+(.+)$', line))
    ]

Bash：

#!/bin/bash
# 批量构建脚本
 
set -euo pipefail
 
echo "🔨 开始构建…"
npm run build

YAML：

# GitHub Actions 工作流
name: Deploy
on:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci

5.2 代码块元信息

带标题的代码块：

lib/mdx.ts

import remarkGfm from "remark-gfm";
 
export const mdxOptions = { remarkPlugins: [remarkGfm] };

带行号的代码块：

def fibonacci(n: int) -> int:
    a, b = 0, 1
    for _ in range(2, n + 1):
        a, b = b, a + b
    return b

带行号 + 标题的代码块：

src/main.rs

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    println!("Sum: {}", numbers.iter().sum::<i32>());
}

5.3 Diff 代码块

// 优化前
function getPosts() {
- const data = fs.readFileSync('posts.json', 'utf-8');
- return JSON.parse(data);
+ const raw = fs.readFileSync('posts.json', 'utf-8');
+ return JSON.parse(raw).filter(post => post.published);
}

六、数学公式

6.1 行内公式

勾股定理： $a^2 + b^2 = c^2$ ；圆周率： $\pi \approx 3.14159$ ；欧拉恒等式： $e^{i\pi} + 1 = 0$ 。

6.2 块级公式

二次方程求根公式：

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

矩阵乘法：

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

七、引用

7.1 单层引用

"萧瑟秋风今又是，换了人间。" —— 《浪淘沙·北戴河》

7.2 嵌套引用

外层引用内容。

内层嵌套引用。这一层可以表达补充说明或引申观点。

第三层嵌套 —— 多见于学术论文或深度讨论中的多重转引。

回到外层，继续正文内容。

7.3 引用内嵌其他元素

引用内的格式化文本

无序列表项

另一个列表项
# 甚至可以嵌入代码块
echo "Hello from blockquote"
以及行内代码 const x = 1 和链接。

八、脚注与分割线

脚注

MDX 是 Markdown 的扩展¹，允许在文档中直接嵌入 JSX 组件²，这个博客用 next-mdx-remote 编译内容³。

水平分割线

分割线常用于在视觉上分隔内容区块，保持阅读节奏。

九、HTML 元素兼容性

9.1 折叠面板

点击展开 —— 查看详细说明

折叠面板（<details> + <summary>）适合 FAQ、附录或需要按需显示的长内容。

支持内嵌 Markdown 列表
支持粗体和斜体
支持行内代码 inline code

{ "hidden": true, "message": "这段 JSON 默认折叠" }

9.2 键盘输入

操作	快捷键
保存文件	`Ctrl` + `S`
查找	`Ctrl` + `F`
命令面板	`Ctrl` + `Shift` + `P`

9.3 高亮与缩写

使用高亮标记强调关键信息，也可以标记多个关键词。

HTML 与 CSS 是网页开发的基础。鼠标悬停在缩写词上可查看完整释义。

9.4 定义列表

MDX: Markdown 的扩展格式，允许在文档中直接嵌入 JSX 组件与 JavaScript 表达式。
GFM: GitHub Flavored Markdown，新增了表格、任务列表、删除线、自动链接等语法。

十、排版边界情况

10.1 中英文混排

'net/http' 是 Go 语言的标准库 HTTP 包。在 Rust 中对应的 crate 有 hyper、axum 和 actix-web。

中文标点与英文混排：他说"Hello World！"；她回复"你好，世界！"；代码 console.log('hello'); 在行内使用。

10.2 特殊字符转义

字符	转义写法	渲染结果
星号	`\*`	不是斜体
下划线	`\_`	_不是斜体_
井号	`\#`	# 不是标题
反引号	\`	`不是代码`
管道符	`\|`	\| 不是表格列分隔
尖括号	`\<` `\>`	<不是 HTML>

10.3 超长内容

超长行内代码：const extremelyLongVariableNameThatMakesTheInlineCodeStretchAcrossMultipleLinesOrAtLeastOneVeryLongLineInTheParagraph = someFunctionCall(argument1, argument2, argument3)

超长 URL：https://github.com/vercel/next.js/tree/canary/packages/next/src/shared/lib/router/utils

10.4 深度嵌套列表

第一层
- 第二层
  - 第三层
    - 第四层 —— 这一层开始编号样式可能变化
- 回到第二层
回到第一层

MDX 官方文档 —— A markdown format that lets you use JSX. ↩
JSX 介绍 —— React 的 JavaScript 语法扩展。 ↩
next-mdx-remote GitHub —— 服务端 MDX 编译方案。 ↩

一、MDX 扩展能力

1.1 变量插值

1.2 内联 JSX 组件

JSX 卡片

1.3 条件渲染与列表映射

1.4 组件组合

二、基础排版

2.1 文本样式

2.2 链接

2.3 图片

三、列表

3.1 无序列表

3.2 有序列表

3.3 任务列表

四、表格

4.1 对齐表格

4.2 复杂内容表格

五、代码块

5.1 多语言高亮

5.2 代码块元信息

5.3 Diff 代码块

六、数学公式

6.1 行内公式

6.2 块级公式

七、引用

7.1 单层引用

7.2 嵌套引用

7.3 引用内嵌其他元素

八、脚注与分割线

脚注

水平分割线

九、HTML 元素兼容性

9.1 折叠面板

9.2 键盘输入

9.3 高亮与缩写

9.4 定义列表

十、排版边界情况

10.1 中英文混排

10.2 特殊字符转义

10.3 超长内容

10.4 深度嵌套列表

Footnotes

相关标签

评论

一、MDX 扩展能力

1.1 变量插值

1.2 内联 JSX 组件

JSX 卡片

1.3 条件渲染与列表映射

1.4 组件组合

二、基础排版

2.1 文本样式

2.2 链接

2.3 图片

三、列表

3.1 无序列表

3.2 有序列表

3.3 任务列表

四、表格

4.1 对齐表格

4.2 复杂内容表格

五、代码块

5.1 多语言高亮

5.2 代码块元信息

5.3 Diff 代码块

六、数学公式

6.1 行内公式

6.2 块级公式

七、引用

7.1 单层引用

7.2 嵌套引用

7.3 引用内嵌其他元素

八、脚注与分割线

脚注

水平分割线

九、HTML 元素兼容性

9.1 折叠面板

9.2 键盘输入

9.3 高亮与缩写

9.4 定义列表