本文测试文章系统全部功能

一、基础 Markdown#

标题层级#

一级标题 h1#

二级标题 h2#

四级标题 h4#

五级标题 h5#

六级标题 h6#

文本样式#

粗体、斜体、~~删除线~~、行内代码、内链、外链（自动 target=_blank）。

列表#

无序项目一
无序项目二
- 嵌套项目

有序第一
有序第二

已完成任务
未完成任务

引用与分割线#

普通引用块。

二、代码块#

// JavaScript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// TypeScript
interface User { name: string; age: number }
const greet = (u: User) => `Hello, ${u.name}!`;

# Python
def quicksort(arr):
    if len(arr) <= 1: return arr
    pivot = arr[len(arr) // 2]
    return quicksort([x for x in arr if x < pivot]) + [pivot] * arr.count(pivot) + quicksort([x for x in arr if x > pivot])

# Shell
npm run build && npm run preview

/* CSS */
.markdown-body { max-width: 100%; overflow-x: auto; }

三、数学公式#

行内： $E = mc^2$ 、 $\int_0^1 x^2 dx$

块级：

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

四、图片#

单图宽度#

图片网格#

五、提示框#

备注

note 提示。

提示

tip 提示。

重要

important 提示。

警告

warning 提示。

注意

caution 提示。

自定义标题

内容带自定义标题的 note。

备注

GitHub alert note。

警告

GitHub alert warning。

六、GitHub 仓库卡片#

Github仓库：github.com/matsuzaka-yuki/Mizuki

Github仓库：github.com/facebook/react

七、剧透遮罩#

这是普通文字这里是剧透内容 可加粗 后面继续。

八、视频嵌入#

YouTube：

哔哩哔哩：

把视频文件：

九、Mermaid 流程图#

十、表格#

基础表格：

特性	语法	来源
提示框	`:::note`	Mizuki
图片网格	`:::grid`	Mizuki
Mermaid	```mermaid	自研

宽表格（横向滚动）：

模块	文件	功能	语法	依赖	状态
图片宽度	rehype-image-width	单图宽度	`w-50%`	unist-util-visit	done
图片网格	rehype-image-grid	响应式网格	`:::grid`	hastscript	done
GitHub 卡	rehype-component-github-card	仓库卡	`::github`	hastscript	done
代码块	code-block.tsx	复制+折叠	自动	DOM	done
Mermaid	mermaid.tsx	流程图+缩放	```mermaid	mermaid	done
视频	rehype-video	视频嵌入	`::video`	-	done
搜索	search.ts	Pagefind	自动	pagefind	done
RSS	rss.ts	全文 feed	自动	-	done
SEO	seo.ts	JSON-LD	自动	-	done

文章

文章系统全特性测试