Markdown 样式测试

这篇文章用来测试各种 Markdown 元素的渲染效果。

标题测试

三级标题

四级标题

五级标题

六级标题

文本样式

这是粗体文本，这是斜体文本，这是粗斜体文本。

这是行内代码示例。

这是~~删除线文本~~。

列表

无序列表

• 第一项
  • 嵌套项目 1
  • 嵌套项目 2
• 第二项
• 第三项

有序列表

1. 第一步
2. 第二步
   1. 子步骤 1
   2. 子步骤 2
3. 第三步

代码块

JavaScript

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

console.log(fibonacci(10)); // 55

Python

def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    
    return quick_sort(left) + middle + quick_sort(right)

CSS

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
}

.blog-post h1 {
  color: #2d3748;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

引用

这是一个引用块。 可以包含多行内容。

这是嵌套引用。

表格

| 功能 | 描述 | 状态 | |------|------|------| | 博客列表 | 显示所有博客文章 | ✅ 完成 | | 博客详情 | 显示单篇文章内容 | ✅ 完成 | | 标签筛选 | 按标签筛选文章 | 🚧 开发中 | | 搜索功能 | 全文搜索 | 📋 计划中 |

链接

这是一个外部链接示例。

这是一个内部链接示例。

水平分割线

---

图片

由于这是测试环境，图片链接可能无法显示：

任务列表

• [x] 完成博客基础功能
• [x] 添加 Markdown 渲染
• [x] 创建样式测试文章
• [ ] 添加代码高亮
• [ ] 实现评论系统
• [ ] SEO 优化

总结

这篇文章展示了各种 Markdown 元素的渲染效果。通过 @tailwindcss/typography 插件，我们可以获得美观且一致的文章排版。