本文件用于测试博客前端的 Markdown 渲染效果。

1. 标题（Heading）

H1 一级标题

H2 二级标题

H3 三级标题

H4 四级标题

H5 五级标题

H6 六级标题

2. 段落与换行（Paragraph & Line Break）

这是第一段文字，用于测试普通段落渲染。段落之间通过空行分隔，渲染后应显示为独立段落，且 prose 样式下段落应有合适的间距与行高。

这是第二段文字。 这一行使用了行尾两个空格（硬换行），渲染后应紧接上一行换行，而不是新起一个段落。

这是第三段文字， 这一行直接换行（软换行），GFM 默认将软换行渲染为换行（br），与硬换行效果类似。

3. 粗体（Bold）

这是 粗体文字 的测试，用于强调关键词。粗体应在段落中明显加粗。

4. 斜体（Italic）

这是 斜体文字 的测试，斜体文字应呈现倾斜效果。

5. 粗斜体（Bold Italic）

这是 粗斜体文字 的测试，同时加粗并倾斜。

6. 删除线（Strikethrough，GFM）

这是 被删除的文字 的测试，渲染后文字上应有删除线。

7. 行内代码（Inline Code）

这是 console.log("hello") 行内代码测试，应使用等宽字体并带有代码底色。

包含特殊字符的行内代码：<div class="box">、a && b || !c、$variable。

8. 代码块（Code Block）

无语言标注的代码块：

const greeting = "hello world";
console.log(greeting);

JavaScript 代码块（应触发 highlight.js 高亮）：

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10)); // 55

TypeScript / JSX 代码块：

interface Post {
  id: number;
  title: string;
  tags: string[];
}

export function PostCard({ post }: { post: Post }) {
  return (
    <article className="post-card">
      <h2>{post.title}</h2>
      {post.tags.map((tag) => (
        <span key={tag}>#{tag}</span>
      ))}
    </article>
  );
}

Python 代码块：

from collections import Counter

def word_count(text: str) -> Counter:
    return Counter(text.lower().split())

print(word_count("hello world hello"))

Shell 代码块：

npm run dev
curl -X POST https://api.cbye.top/api/posts \
  -H "Content-Type: application/json" \
  -d '{"title": "test"}'

JSON 代码块：

{
  "name": "CBye's Blog",
  "version": "0.1.0",
  "dependencies": ["next", "react", "react-markdown"]
}

CSS 代码块：

.prose pre {
  background: #0f172a;
  border-radius: 8px;
  overflow-x: auto;
  padding: 1rem;
}

9. 链接（Link）

行内链接：CBye 的博客 和 带标题的链接。。

引用式链接：后端 API 文档，引用式链接的复用。

10. 图片（Image）

行内图片：

引用式图片：

"占位图"

图片应自适应宽度（max-w-full h-auto）、居中并带有 loading="lazy" 懒加载。

11. 无序列表（Unordered List）

• 苹果
• 香蕉
• 樱桃
  • 嵌套项 1
  • 嵌套项 2
• 榴莲

12. 有序列表（Ordered List）

1. 第一步：初始化项目
2. 第二步：编写 Markdown 测试文档
3. 第三步：在前端查看文章并核对渲染
4. 第四步：发现问题并修复渲染组件

13. 嵌套列表（Nested List）

• 前端技术栈
  • 框架
    1. Next.js 15
    2. React 19
  • 样式
    • Tailwind CSS 4
    • CSS Modules
• 后端技术栈
  1. FastAPI
  2. SQLite / Alembic

14. 任务列表（Task List，GFM）

• 编写测试文档
• 覆盖基础语法（标题、列表、链接）
• 覆盖 GFM 扩展（表格、删除线、脚注）
• 核对代码高亮效果
• 核对 KaTeX 公式渲染

15. 引用块（Blockquote）

这是单层引用块。 引用块内支持 粗体、行内代码 等行内元素。

嵌套引用块：

外层引用

内层引用，用于测试嵌套层级样式

第三层引用

引用块内包含列表：

引用内的无序列表：

• 项目 A
• 项目 B

以及代码块：

console.log("in blockquote");

16. 水平分割线（Horizontal Rule）

分割线之前的内容。

分割线之后的内容。上方应显示一条水平线，--- 前后需要空行才能正确解析为分割线。

另一种写法：

17. 表格（Table，GFM）

基本表格：

对齐方式测试：

含行内元素的表格：

18. 脚注（Footnote，GFM）

这是一段带脚注的文字¹，脚注应渲染在文章底部并支持点击跳转。

同一脚注可多次引用¹，也可以引用另一个脚注²。

19. 数学公式（Math，KaTeX）

行内公式：欧拉公式 $e^{i\pi} + 1 = 0$，以及勾股定理 $a^2 + b^2 = c^2$。

块级公式（display）：

矩阵与求和：

20. Mermaid 图表（Mermaid Diagram）

21. 转义字符（Escape Character）

以下特殊字符前加反斜杠可转义，渲染时应显示字面符号而非语法效果：

*不是斜体*、_也不是_

# 不是标题

> 不是引用

\* 与 \# 反斜杠本身也可以显示。

22. HTML 内联（Inline HTML）

<span style="color: red">这行是 HTML span 标签</span>，当前渲染栈未启用 rehype-raw，react-markdown 默认 不渲染 原始 HTML 标签，此段落用于确认该预期行为。

<u>下划线标签</u> 与 <kbd>Ctrl</kbd> + <kbd>C</kbd> 同理，应显示为纯文本（或被跳过）。

23. 标题锚点（Heading Anchor，rehype-slug）

每个标题都应自动生成带 id 的锚点，可通过 # 链接跳转，例如：

• 跳转到「标题」段落
• 跳转到「表格」段落
• 跳转到「数学公式」段落

浏览器地址栏输入 #1-标题heading 应能定位到对应标题。

24. 特殊字符与实体（Special Characters）

• 与号：AT&T、Tom & Jerry，应显示为 & 而非 &
• 尖括号：a < b 且 c > d
• 引号：「中文引号」与 "英文引号"
• Emoji：🚀 ✨ 🎉（测试 prose 字体与 emoji 显示）
• 中英文混排：这是中文 English 混排测试 12345

测试核对清单：

• 各段落标题正确渲染且自动生成锚点
• 代码块按语言高亮
• 数学公式正常显示（KaTeX）
• Mermaid 图表渲染为图形而非代码
• 表格对齐、删除线、任务列表、脚注均生效
• 图片懒加载且自适应宽度