WaiJade 头像WaiJade's BLOG

Article / 2026.03.15

MDX 语法与样式测试

用于集中测试当前博客支持的 Markdown、MDX 与扩展指令样式。

测试 MDX 样式

这篇文章专门用来回归测试文章渲染效果。这里会同时覆盖 Markdown、GFM、数学公式、原生 HTML 对齐块，以及新接入的指令语法，比如 行内高亮。

标题层级

三级标题

四级标题

五级标题
六级标题

段落与行内样式

这是一个普通段落，包含 加粗文本、斜体文本、加粗斜体、删除线 和 行内代码。

也可以测试链接样式：返回首页 和 关于页。

列表

  • 无序列表第一项
  • 无序列表第二项
    • 子项 2.1
    • 子项 2.2
  • 无序列表第三项
  1. 有序列表第一项
  2. 有序列表第二项
    1. 子项 2.1
    2. 子项 2.2
  3. 有序列表第三项

任务列表

  • 已完成的样式检查
  • 待确认移动端样式
  • 待补充更多自定义语法

引用

这是一级引用。

第二段引用用来测试段落间距。

这是另一组引用。

这里是二级引用，用来测试嵌套层级。

Callout 指令

AI 总结块

AI 总结

这是一段用于测试 AI 总结容器的内容。它应该默认折叠、保留渐变描边，并在标题前显示参考博客同款的星形标记。

  • 适合放长文导读
  • 适合放模型生成摘要
  • 也适合放阅读前提示
指令版折叠块

这里测试 :::details 语法，确认以后你不用再手写 <details> 和 <summary>。

表格

字段类型默认值是否必填说明
title字符串无是文章标题
pubDate日期无是文章发布时间
tags字符串数组[]否标签集合
description字符串""否首页摘要与 SEO 描述
featured布尔值false否是否作为首页精选展示

代码块

type PostMeta = {
  title: string;
  pubDate: string;
  tags: string[];
};

export function formatMeta(meta: PostMeta) {
  return `${meta.title} - ${meta.pubDate} - ${meta.tags.join(", ")}`;
}
npm run build
npm run check
{
  "title": "MDX 语法与样式测试",
  "draft": false,
  "tags": ["测试", "MDX", "样式"]
}

数学公式

行内公式示例：eiπ+1=0e^{i\pi} + 1 = 0。

块级公式示例：

∫01x2 dx=13\int_{0}^{1} x^2 \, dx = \frac{1}{3}

图片

站点头像测试图

原生 HTML 交互块

按下 Ctrl + K 可以呼出站内搜索。

展开查看更多说明

这里用来测试 details / summary 的展开样式，以及内部段落、链接和行内代码的间距。

原生 HTML 对齐块

风吹山影动
夜色慢慢落进杯中
如果这一段还是忽紧忽松
就继续拿它当行距测试样本

（2026年3月15日 23:40）

尾注

这是一段带尾注的测试文本，用来检查脚注引用和底部脚注区样式。1

混合内容

最后再放一段混合内容，确认 高亮文字、inline code、普通链接 和列表不会互相打架：

如果要展示原始写法，可以写成 :highlight[高亮文字]{color="var(--accent)"}。

  • 第一项里包含 重点词。
  • 第二项里包含 const answer = 42。
  • 第三项里包含一个链接到 归档页。

Footnotes

  1. 这是测试尾注内容，后面可以继续用它检查长文本、链接和换行。 ↩

COMMENTS

评论区