Markdown 语法全家桶：一篇文章测完所有渲染元素

F face 2026-06-28 335 字 · 约 1 分钟 51 条评论前端开发

#测试 #Markdown #排版

这是一篇「排版体检」文章，覆盖博客渲染器支持的全部 Markdown 元素。如果你在读这篇文章时发现某个元素显示异常，说明渲染器需要修 bug 了。

#行内元素

普通文字，加粗，斜体，~~删除线~~，行内代码，站内链接，HTML 外链，以及一个脚注式的说明¹。

#引用与嵌套

一级引用：好排版是看不见的排版。

二级引用：所谓深度，就是层次的叠加。

回到一级，引用里也可以有 代码 与强调。

#列表

无序列表：

第一层
- 第二层
  - 第三层内容比较长一些，用来测试行高与缩进的表现是否稳定
复原到第一层

有序列表：

安装依赖
修改配置
构建并部署
1. 本地验证
2. 发布上线

任务列表：

支持任务列表语法
复选框使用主题色
完成暗色模式适配

#代码块

ts

interface Comment {
  readonly coid: number;
  author: string;
  parent?: number;
}

/** 把扁平评论列表组装成嵌套树 */
function buildTree(list: Comment[]): TreeNode[] {
  return list.filter((c) => !c.parent).map(wrap(list));
}

css

.cover-art {
  background:
    radial-gradient(120% 140% at 85% 20%, hsl(190 90% 62% / 0.5), transparent 55%),
    linear-gradient(135deg, #0b1020, #1c2a4d);
}

#表格

语法	示例	状态
对齐左	`#fff`	✅
对齐中	`01`	✅
对齐右	`0xff`	✅

#分隔线与图片

一张远程图片（lazy 加载）：

示例图片

第二张图，用来测试灯箱的多图切换：

示例图片二

以上就是全部元素。渲染器，请开始你的表演。

本文链接：/post/markdown-syntax-showcase/ · 转载请注明出处 · 原文由 Typecho 驱动

//评论 51

测试机器人 8 天前 #3

排版体检通过，各元素渲染正常。
半亩方塘 6 天前 #66

技术选型的部分写得挺中肯，不是无脑吹。

数字游民 6 天前 #69

哈哈，跟我理解的一样，放心用了。

夜航星 6 天前 #104

这个问题我踩过，翻我博客有篇笔记专门讲这个。

数字游民 6 天前 #74

这么一看确实是版本差异导致的，结案。

半亩方塘 6 天前 #107

插个楼：实测下来数据量大了之后要注意缓存。

半亩方塘 6 天前 #86

同问，蹲一个回复。

CC 6 天前 #110

楼上 +1，我也想知道。
FastPHP 6 天前 #67

有几个细节想深入聊聊，已发邮件到你邮箱。

FastPHP 6 天前 #71

楼上 +1，我也想知道。
夜航星 6 天前 #68

正文里的对比表格很直观，数据是实测的吗？
沈青崖 6 天前 #70

参考你这篇把备案和 CDN 也配置好了，感谢！

沈青崖 6 天前 #72

插个楼：实测下来数据量大了之后要注意缓存。

猫爪敲键盘 6 天前 #77

学到了，回頭我也整理一篇。

夜航星 6 天前 #88

插个楼：实测下来数据量大了之后要注意缓存。

隔壁老王 6 天前 #83

补充一点：官方文档里其实有提到这个边界情况。
数字游民 6 天前 #73

写得很清楚，收藏了，回头照着实践一遍。
半亩方塘 6 天前 #75

mark 一下，周末有空细读。
猫爪敲键盘 6 天前 #76

请问博主，这套方案在多实例部署下要注意什么？

隔壁老王 6 天前 #109

感谢解答，疑问解决了！
夜航星 6 天前 #78

技术选型的部分写得挺中肯，不是无脑吹。
CC 6 天前 #79

写得很清楚，收藏了，回头照着实践一遍。