Markdown 深度排版指南：从基础语法到手账标签 | VueWeb 随笔

工欲善其事，必先利其器。优秀的文字需要得体的排版衬托。在 FlatPaper 主题中，除了原生 Markdown 语法外，还内置了许多独具手账特色的排版增强标签。

本文是一份全要素排版速查指南，演示常用样式在真实场景中的呈现效果。

1. 原生 Markdown 基础元素

标题与层级

在文章中合理组织二级、三级标题，右侧的粘性目录（TOC）会自动生成并跟随滚动高亮。

引用与列表

读书破万卷，下笔如有神。好的排版如润物细无声，让读者的视线舒适停留。

• 无序列表项：适合陈列同层级要点
  • 嵌套层级子项
• 待办清单：
  • 完成博客基础设施搭建
  • 调优自定义手帐主题
  • 撰写系列深度技术博文

---

2. FlatPaper 手帐 Note 便签组件

FlatPaper 支持六种不同语意的彩色便签。当提供标题参数时，便签还会自动渲染为原生 <details> 可折叠手风琴！

默认便签

这是一个 default 类型的便签，适合记录常规补充说明。

提示说明信息

这是一个 info 类型的便签，带有清爽的蓝色强调色。

恭喜完成

这是一个 success 类型的便签，通常用于标记操作成功或阶段性成果。

注意事项（可折叠）

注意：提供标题时 Note 默认会折叠收起，非常适合放置长篇补充代码或折叠备忘。

风险告警

这是一个 danger 类型的便签，用于提醒高风险操作或破坏性变更。

---

3. 选项卡 Tabs 切换组件

当需要对比不同环境下的命令或代码时，使用 Tabs 是最省空间且直观的方案：

npmpnpmyarn

npm install hexo-theme-flatpaper --save

---

4. 表格排版示例

语法类型	呈现效果	适用场景
**加粗**	主题色高亮文字	强调关键术语
{% note %}	彩色手账便签纸	额外补充与安全警示
{% tabs %}	紧凑选项卡切换	多端代码对比
代码块	语法高亮与行号	技术教程与命令示例

合理组合以上排版元素，你的手账博客也能兼具极高的美感与实用性！