Markdown 写作与渲染最佳实践

基础 Markdown 语法速览

文本样式

• 粗体：**粗体**
• 斜体：*斜体*
• 删除线：~~删除线~~
• 行内代码：`行内代码`

列表

无序列表：

• 项目一
• 项目二
  • 子项目

有序列表：

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

代码块

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

GFM 扩展语法

GitHub Flavored Markdown 提供了更多实用功能：

表格

特性	支持情况	备注
表格	✅	列对齐
任务列表	✅	- [x] 格式
删除线	✅	~~text~~
自动链接	✅	URL 自动转换

任务列表

- [x] 已完成的任务
- [ ] 待完成的任务
- [ ] 另一个待办事项

代码高亮配置

在 Next.js 中，推荐使用 rehype-highlight 插件实现代码语法高亮：

import rehypeHighlight from "rehype-highlight";

const options = {
  mdxOptions: {
    rehypePlugins: [rehypeHighlight],
  },
};

需要配合 CSS 主题文件来渲染高亮颜色。常用的有 GitHub、Nord、One Dark Pro 等主题。

小结

Markdown 看似简单，但通过 GFM 扩展和代码高亮，可以写出非常精美、可读性强的技术文档。