返回文稿
/技术写作/5 min

Markdown 格式完整展示

用于验证博客系统对常见 Markdown 与 GFM 语法的解析和展示效果。

这篇文章用于验证当前博客系统对 Markdown 的支持情况。内容覆盖标题、段落、强调、列表、引用、表格、任务列表、链接、图片、代码块等常用格式。

标题层级

Markdown 支持多个标题层级。文章详情页目前主要针对二级标题和三级标题做了专门样式。

三级标题

三级标题适合用于拆分小节,比如说明一个配置项、一段实现细节,或者一组相关示例。

四级标题

四级标题也可以被解析,不过当前站点没有为它单独做强样式,显示会更接近普通标题文本。

段落与换行

这是一个普通段落。段落之间通过空行分隔,适合写正文叙述。

这是第二个段落。技术文章里建议保持段落短一些,方便移动端阅读,也方便读者快速扫读。

如果只是在一行末尾换行, Markdown 通常仍会把它合并成同一个段落。

强调、加粗、删除线与行内代码

这是 斜体文本,这是 加粗文本,这是 加粗斜体

GFM 支持 删除线,适合标记废弃方案或修正记录。

行内代码可以写成 const site = "tao",适合放变量名、命令名、文件名和短配置。

链接与图片

这是一个普通链接:Next.js

这是一个站内链接:回到文稿列表

下面是一张 Markdown 图片,用于验证图片渲染、边框和阴影效果。

站点头像示例

无序列表

  • 阅读体验
  • 代码高亮
  • 移动端适配
  • 暗色模式

有序列表

  1. 写 Markdown 文件。
  2. 补充 frontmatter。
  3. 构建文章列表。
  4. 渲染文章详情页。

嵌套列表

  • 内容层
    • Markdown 文件
    • frontmatter 元数据
  • 渲染层
    • MDXRemote
    • remark 插件
    • rehype 插件

任务列表

  • 1234
  • 支持 GFM 表格
  • 支持代码高亮
  • 支持代码块折叠
  • 支持服务端按需复制代码

引用

技术文章的重点不是堆语法,而是让读者快速理解问题、上下文、取舍和结论。

多段引用也可以这样写:

第一段引用内容。

第二段引用内容,中间用一个空引用行分隔。

分割线

下面是一条分割线。


分割线之后继续正文。

表格

能力语法当前状态
表格GFM table已支持
删除线~~text~~已支持
任务列表- [x] task已支持
代码高亮fenced code已支持

代码块

普通 TypeScript 代码块:

TS

带最大高度配置的 TSX 代码块:

TSX

Shell 命令代码块:

BASH

JSON 代码块:

JSON

HTML

Markdown 中也可以写少量 HTML:

Command + K

不过技术博客里不建议大量混用 HTML,除非是 Markdown 无法表达的交互或特殊排版。

结论

如果这篇文章能正常展示,说明当前博客系统已经能覆盖大多数技术写作场景。后续可以继续补充目录、脚注、数学公式、Mermaid 图表等更高级能力。