# Markdown / Hexo 全格式测试

这是一篇专门用于检查文章渲染效果的基准文章。后续调整主题、字体、间距、代码样式或移动端布局时，可以优先查看这一页。

# 目录

• 基础文本
• 标题与分隔线
• 列表与任务清单
• 引用与提示
• 链接、图片与媒体
• 表格
• 代码
• LaTeX 数学公式
• HTML 与详情折叠
• 扩展语法

---

# 基础文本

这是一个普通段落，用来检查正文的行高、字距、段落间距和中文标点显示效果。当前文章使用中文，也故意保留了一段 English text，方便观察中英文混排。

这是第二行。
这是通过 Markdown 行尾两个空格产生的换行。

下面是常见的行内样式：粗体、斜体、粗斜体、删除线、高亮、插入内容、 inline code 、H₂O、x²。

转义字符也应该保留原样：* 不是斜体 *，`不是代码`，# 不是标题。

定义一个缩写：*[HTML]: HyperText Markup Language。HTML 是这里定义过的缩写，把鼠标移动到 HTML 上可以检查缩写提示。

# 标题与分隔线

# 三级标题

# 四级标题

# 五级标题

# 六级标题

标题层级从一级到六级都在这篇文章中出现。下面再放一条分隔线：

---

# 列表与任务清单

# 无序列表

• 第一项
• 第二项
  • 二级项目 A
  • 二级项目 B
    • 三级项目
• 第三项，包含 inline code

# 有序列表

1. 第一步：读取文章
2. 第二步：渲染 Markdown
   1. 解析块级元素
   2. 解析行内元素
3. 第三步：检查最终页面

# 任务清单

• 标题、段落和强调样式
• 列表、引用和表格
• 代码块与数学公式
• 本地音乐播放器
• 未来继续补充新的主题组件

# 引用与提示

这是一级引用。

引用可以包含多个段落，也可以包含 粗体、斜体 和 代码 。

这是嵌套引用。

嵌套引用结束。

引用也可以搭配列表：

本次检查重点：

• 文字颜色是否清晰
• 暗色模式是否可读
• 移动端是否溢出

# 链接、图片与媒体

# 链接

• 普通链接：Hexo 官方文档
• 自动链接：https://hexo.io/
• 邮箱链接：hello@example.com
• 带标题的链接：Fluid 主题

# 图片

下面使用仓库中已有的本地图片，检查图片圆角、宽度、懒加载和图注效果。

本地图片图注：春天。

也可以直接使用 HTML 图片并指定尺寸：

# 本地音乐

下面使用 source/music/ 中的本地 MP3，检查播放器在亮色模式、暗色模式和移动端的表现。

スカーレット 本地音乐

播放器只读取站点自身 /music/ 路径下的文件，不依赖外部音乐服务。

# 表格

语法	示例	用途
#	一级标题	页面结构
**text**	粗体	强调重点
`code`	code	行内代码
$x^2$	$x^2$	数学公式

表格单元格中也可以包含 强调、链接和 代码 。

# 代码

# 行内代码

使用 npm run build 构建站点，使用 git status 查看改动。

# JavaScript

const tracks = [
  { title: 'Scarlet', source: '/music/scarlet.mp3' },
  { title: 'Local Demo', source: '/music/demo.ogg' }
];

function playTrack(track) {
  console.log(`Playing: ${track.title}`);
  return track.source;
}

# Python

from pathlib import Path

music_dir = Path("source/music")
tracks = sorted(music_dir.glob("*.mp3"))

for track in tracks:
    print(track.name)

# Shell

npm run clean
npm run build
git status --short

# 代码块带文件名与行号语义

- remote: external-player
+ local: source/music/

# 缩进代码块

这是一段四个空格缩进的代码块。
第二行保留缩进和换行。

# LaTeX 数学公式

行内公式：$E = mc^2$，以及 $sum_{i=1}^{n} i = \frac{n(n+1)}{2}$。

块级公式：

$\begin{aligned} f(x) &= \frac{1}{\sqrt{2\pi\sigma^2}} \exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right) \\ \nabla_\theta J(\theta) &= \mathbb{E}_{x \sim p(x)} \left[\nabla_\theta \log p_\theta(x)\right] \end{aligned}$

矩阵、集合和极限也应该正常显示：

$A = \begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}, \qquad \lim_{n \to \infty}\left(1 + \frac{1}{n}\right)^n = e$

# HTML 与详情折叠

主题允许在 Markdown 中使用 HTML。下面的键盘按键、下划线、标记文本和折叠区域用于检查原生 HTML：

HTML 段落：下划线、标记、小号文字、删除内容。

按下 Ctrl + C 复制，按下 ⌘ + V 粘贴。

点击展开更多测试内容

这里是折叠区域中的内容。它可以包含段落、列表和代码：

• 折叠内容第一项
• 折叠内容第二项

details / summary

# 扩展语法

# 定义列表

Markdown

一种轻量级标记语言。

Hexo

一个快速、简洁且高效的博客框架。

# 脚注

这是带脚注的句子^[1]，这里还有第二个脚注^[2]。

# 上标、下标、插入和高亮

水的化学式是 H₂O，平方写作 x²。这是 插入内容，这是 高亮内容。

# 长文本与中文标点

最后放一段较长文字，用于观察文章宽度、换行、标点和中英文混排：在实际的研究记录中，一篇文章可能同时包含背景介绍、方法说明、实验配置、代码片段、公式推导、图片、表格以及音频素材。一个稳定的文章页面需要在桌面端和移动端都保持清晰的层级，让读者能够快速定位信息，也让作者可以在后续迭代中方便地比较改动前后的效果。

---

测试文章结束。后续如果新增组件或语法，可以继续把最小示例补充到这里。

---

1. 当前项目使用 multi-markdown-it 渲染 Markdown，并开启了多项 markdown-it 插件。 ↩︎

2. 本地音乐播放器使用浏览器原生 HTML5 audio 元素，不需要额外的音乐平台接口。 ↩︎