博客全功能演示与排版测试

2026-03-11

这是一个专门用于测试和展示博客系统所有功能的页面。你可以在这里查验 Markdown 基础排版、代码高亮、Mermaid 图表 以及 响应式布局。

1. 基础排版测试 (Typography)

1层级与段落

这里是一个普通的段落。我们支持加粗、斜体以及 ~~删除线~~。你甚至可以给文字加上超链接。

这是一个引用块 (Blockquote)。它可以用于展示名言警句或者参考资料。

—— 高飞宇

列表展示

无序列表项 A
无序列表项 B
- 嵌套列表项 B1
- 嵌套列表项 B2

有序列表第一项
有序列表第二项
有序列表第三项

表格支持

技能名称	熟练度	备注
Next.js	精通	基于 App Router
Tailwind CSS	熟练	响应式设计
MDX	资深	动态组件渲染

2. 代码高亮演示 (Code Syntax Highlighting)

基于 rehype-pretty-code 和 Shiki 的原生高亮，支持多种语言。

JavaScript (ES6+)

// 测试 React Hook 代码
import { useState, useEffect } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Count is: {count}
    </button>
  );
}

Python

def hello_world(name: str):
    """一个简单的测试函数"""
    print(f"Hello, {name}!")
    return True
 
hello_world("Goofy")

3. Mermaid 图表演示 (Diagrams)

利用集成的 Mermaid 组件进行实时渲染。

流程图 (Flowchart)

序列图 (Sequence Diagram)

4. 样式适配与暗黑模式

本页面在“明亮”和“暗黑”模式下拥有不同的表现：

背景与文字：对比度自动切换，减轻视觉疲劳。
排版 (Typography)：基于 @tailwindcss/typography 的紫色主调 (text-primary) 链接。
代码块：使用 github-dark 主题，保证在任何模式下都清晰易读。

总结

如果你能看到上面的所有元素排版整齐、颜色和谐、图表渲染正确，说明我们的博客引擎已经完美就绪了！