Markdown 语法全面测试指南

欢迎来到这份终极 Markdown 语法指南！本文旨在测试并展示由 next-mdx-remote 配合 Shadcn UI 与 Tailwind CSS 渲染出的各个基础排版组件。

强大的 MDX

MDX 允许我们在 Markdown 中直接嵌入 JSX 组件。但在享受这项强大特性之前，我们需要确保系统的底层 HTML 标签已经具备现代、优雅的排版样式。

基础排版测试

这里展示了一段包含 加粗、斜体 以及 删除线 的排版效果。你还可以将它们组合使用，比如 加粗且倾斜。

在技术博客中，我们经常会用到行内代码块：console.log('Hello, World!')。系统会自动为其赋予高亮背景与专属的等宽字体。

引用块 (Blockquotes) 非常适合高亮关键信息或引用外部文献。 系统会自动为其添加左侧高亮边框，并使用柔和颜色的文字加以区分。

列表展示

无序列表

• 列表项一
• 列表项二
• 列表项三
  • 嵌套项 A
  • 嵌套项 B

有序列表

1. 初始化项目
2. 配置环境变量
3. 执行构建
   1. 编译服务器组件
   2. 生成静态页面

链接与图像

欢迎查阅 Next.js 官方文档。系统会自动为超链接渲染品牌主色调，并配置恰到好处的下划线间距。

高级 GFM 语法拓展

得益于 remark-gfm 插件的生态支持，我们可以原生渲染 GitHub 风格的进阶 Markdown 语法。

表格测试

代码块与语法高亮

借助 rehype-pretty-code，系统会渲染出外观华丽且底层 HTML 结构语义清晰的代码块。

// src/example.js
import { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      已点击 {count} 次
    </button>
  );
}

# 一段简单的 Python 脚本
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
 
print("10 的斐波那契求和为:", fibonacci(10))

自动生成目录导航 (TOC)

我们在服务端的编译阶段集成了 rehype-slug，系统会自动为本文的每一个标题节点 (##, ###) 生成独立的锚点 ID。配合自定义的 extractTocFromMarkdown 函数，服务端在解析源文件时能够自动提取这些锚点，从而在屏幕一侧渲染出你现在看到的悬浮目录树！

阶段性总结

如果你能流畅、愉悦地阅读到这里，并且目录能准确完成跳转定位，这说明我们的多语言静态博客系统 (Phase 5) 已经大功告成！🚀