# 文章功能测试

> 本文覆盖本博客支持的 MDX 扩展能力与标准 Markdown 语法，每种至少留一个实例，用于一次性验证渲染效果。站内媒体组件（视频 / 音频 / 下载 / B 站内嵌）另成一文：《站内媒体组件》。若…

- 原文：https://wanrenhuifu.github.io/blog/syntax-test/
- 发布：2026-05-04
- 部门：试验部
- 标签：MDX、Markdown、测试
- 字数：8770
- 许可：https://creativecommons.org/licenses/by-nc-sa/4.0/（署名—非商业性使用—相同方式共享）
- 站点：https://wanrenhuifu.github.io/

---

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

---

## 一、MDX 扩展能力

### 1.1 变量插值

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

### 1.2 内联 JSX 组件

<div className="rounded-2xl p-6 my-6 bg-card border border-borderline">
  <div className="flex flex-col md:flex-row gap-5 items-center">
    <div className="w-14 h-14 rounded-2xl bg-primary flex items-center justify-center text-2xl flex-shrink-0 text-on-primary">
      🔮
    </div>
    <div className="flex-1 text-center md:text-left">
      <h3 className="text-lg font-bold text-title !mt-0 !mb-2">JSX 卡片</h3>
      <p className="text-body text-sm !m-0 leading-relaxed">完全用 <strong>Tailwind CSS</strong> 写成，直接嵌在 Markdown 里，可以带响应式布局与语义化 Token。</p>
    </div>
  </div>
</div>

### 1.3 条件渲染与列表映射

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

{(() => {
  const features = ['变量插值', '条件渲染', '列表映射', '组件嵌入'];
  return (
    <div className="my-4 p-5 rounded-xl bg-card border border-borderline">
      <span className="text-sm font-medium text-title">MDX 核心能力（共 {features.length} 项）</span>
      <ul className="space-y-1.5 list-none pl-0 mt-2">
        {features.map((item, i) => (
          <li key={i} className="flex items-center gap-2 text-sm text-body">
            <span className="text-primary font-mono text-xs">{String(i + 1).padStart(2, '0')}</span>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
})()}

### 1.4 组件组合

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

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 my-6">
  {[
    { icon: '📝', title: 'Markdown 基础', desc: '标题、列表、表格、代码块' },
    { icon: '⚛️', title: 'JSX 组件', desc: '内联组件、条件渲染、列表映射' },
    { icon: '📐', title: '数学公式', desc: 'KaTeX 行内与块级渲染' },
  ].map((card) => (
    <div key={card.title} className="p-4 rounded-xl bg-card border border-borderline text-center">
      <div className="text-2xl mb-2">{card.icon}</div>
      <div className="text-sm font-medium text-title mb-1">{card.title}</div>
      <div className="text-xs text-muted">{card.desc}</div>
    </div>
  ))}
</div>

---

## 二、基础排版

### 2.1 文本样式

**加粗**，*斜体*，***加粗斜体***，~~删除线~~，<u>下划线</u>，行内代码 `npm run build`，<mark>高亮文本</mark>，<kbd>Ctrl</kbd> + <kbd>K</kbd>。

上标：X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>；下标：H<sub>2</sub>O。

### 2.2 链接

**行内链接**：[Next.js 官网](https://nextjs.org "Next.js 官网")。

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

[react]: https://react.dev "React 官方文档"
[tailwind]: https://tailwindcss.com "Tailwind CSS 官网"

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

### 2.3 图片

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

<img
  src="https://cdn.jsdelivr.net/gh/wanrenhuifu/blog-assets@v4/images/claude-meme.webp"
  alt="梗图：Claude-4.6-opus ——「一开始以为，只试一次不会怎样的…」"
  width={1290}
  height={1219}
  className="rounded-lg my-4 max-w-md mx-auto"
/>

---

## 三、列表

### 3.1 无序列表

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

### 3.2 有序列表

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

### 3.3 任务列表

- [x] 配置基础环境
- [x] 完成博客搭建
- [x] 添加文章目录 TOC
- [x] 集成 Waline 评论
- [ ] 撰写更多技术文章
  - [ ] Next.js App Router 深度解析
  - [ ] Tailwind CSS v4 迁移指南

---

## 四、表格

### 4.1 对齐表格

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

### 4.2 复杂内容表格

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

---

## 五、代码块

### 5.1 多语言高亮

**TypeScript**：

```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**：

```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**：

```bash
#!/bin/bash
# 批量构建脚本

set -euo pipefail

echo "🔨 开始构建…"
npm run build
```

**YAML**：

```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 代码块元信息

带**标题**的代码块：

```typescript title="lib/mdx.ts"
import remarkGfm from "remark-gfm";

export const mdxOptions = { remarkPlugins: [remarkGfm] };
```

带**行号**的代码块：

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

带**行号 + 标题**的代码块：

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

### 5.3 Diff 代码块

```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 引用内嵌其他元素

> **引用内的格式化文本**
>
> - 无序列表项
> - 另一个列表项
>
> ```bash
> # 甚至可以嵌入代码块
> echo "Hello from blockquote"
> ```
>
> 以及行内代码 `const x = 1` 和[链接](https://example.com)。

---

## 八、脚注与分割线

### 脚注

MDX 是 Markdown 的扩展[^1]，允许在文档中直接嵌入 JSX 组件[^2]，这个博客用 `next-mdx-remote` 编译内容[^3]。

[^1]: [MDX 官方文档](https://mdxjs.com) —— A markdown format that lets you use JSX.
[^2]: [JSX 介绍](https://react.dev/learn/writing-markup-with-jsx) —— React 的 JavaScript 语法扩展。
[^3]: [next-mdx-remote GitHub](https://github.com/hashicorp/next-mdx-remote) —— 服务端 MDX 编译方案。

### 水平分割线

---

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

---

## 九、HTML 元素兼容性

### 9.1 折叠面板

<details>
<summary><strong>点击展开</strong> —— 查看详细说明</summary>

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

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

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

</details>

### 9.2 键盘输入

| 操作 | 快捷键 |
| :--- | :--- |
| 保存文件 | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
| 查找 | <kbd>Ctrl</kbd> + <kbd>F</kbd> |
| 命令面板 | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> |

### 9.3 高亮与缩写

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

<abbr title="HyperText Markup Language">HTML</abbr> 与 <abbr title="Cascading Style Sheets">CSS</abbr> 是网页开发的基础。*鼠标悬停在缩写词上可查看完整释义。*

### 9.4 定义列表

<dl>
  <dt><strong>MDX</strong></dt>
  <dd>Markdown 的扩展格式，允许在文档中直接嵌入 JSX 组件与 JavaScript 表达式。</dd>

  <dt><strong>GFM</strong></dt>
  <dd>GitHub Flavored Markdown，新增了表格、任务列表、删除线、自动链接等语法。</dd>
</dl>

---

## 十、排版边界情况

### 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 站内嵌）另成一文：[《站内媒体组件》](/blog/media-components/)。发现渲染异常欢迎反馈。