Markdown

Markdown 渲染小坑

Markdown 渲染小坑 封面

Markdown 好写。难的是好读。

文档渲染现场

一篇技术文档,最先被读到的不是观点。是标题、inline code、代码块和引用。复杂度大概是 O(nlogn)O(n log n)。可以跳到 Next.js 文档 查细节。

我会先处理这些

  • 标题锚点要稳定。
  • 代码块要有语言名。
  • 引用别像普通段落。
  • 长表格别硬塞。
桌面上的代码编辑器与笔记

渲染检查表

元素风险处理
超链接颜色太跳用主题蓝色
图片高度乱跳固定比例
表格移动端溢出横向滚动
公式像乱码单独成块
i=1ni=n(n+1)/2\sum_{i=1}^{n} i = n(n + 1) / 2
markdown-parser.tsTypeScript
const headings = tokens  .filter((token) => token.type === "heading")  .map((token) => ({    id: slugify(token.text),    text: token.text,  }));

Markdown 不是纯文本。它是阅读节奏。