<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>技术写作 | 空垠尘</title><link>/tags/%E6%8A%80%E6%9C%AF%E5%86%99%E4%BD%9C/</link><description>极简纯静态 · 边缘无界</description><generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>Dukang Xu</managingEditor><webMaster>Dukang Xu</webMaster><copyright>© 2026 空垠尘</copyright><lastBuildDate>Wed, 09 Sep 2026 10:00:00 +0800</lastBuildDate><atom:link href="/tags/%E6%8A%80%E6%9C%AF%E5%86%99%E4%BD%9C/index.xml" rel="self" type="application/rss+xml"/><item><title>Markdown 排版规范与高阶扩展实践</title><link>/markdown-guide/</link><pubDate>Wed, 09 Sep 2026 10:00:00 +0800</pubDate><author>Dukang Xu</author><guid isPermaLink="true">/markdown-guide/</guid><description>系统梳理 Markdown 的核心排版标准与中英文混排细节，并深入探索数学公式 (LaTeX) 与架构流程图 (Mermaid) 等进阶排版能力的工程化实践。</description><content:encoded><![CDATA[<h2 id="引言纯文本写作的优雅力量">引言：纯文本写作的优雅力量</h2>
<p>2004 年，约翰·格鲁伯（John Gruber）与阿隆·斯沃茨（Aaron Swartz）共同发明了 Markdown 标记语言。其设计的初衷非常纯粹：“<strong>让人们能够使用易读易写的纯文本格式编写文档，并能够将其轻松转换为结构良好的 XHTML 或 HTML。</strong>”</p>
<p>在现代软件工程与技术写作领域，Markdown 已经成为事实上的通用排版标准。无论是 GitHub 上的开源项目说明（<code>README.md</code>）、技术博客的文章记录，还是企业内部的架构设计文档，Markdown 都以其极轻的语法负担、极佳的版本控制友好性，赢得了无数开发者的青睐。</p>
<p>然而，在实际写作中，“写出 Markdown”和“写出专业、工整且具高度可读性的 Markdown”之间，往往存在着巨大的排版差距。本文将从 <strong>基础排版规范</strong>、<strong>中英文混排美学</strong> 以及 <strong>高阶扩展语法（LaTeX 公式与 Mermaid 架构图）</strong> 三个维度，系统性地梳理 Markdown 的写作实践。</p>
<hr>
<h2 id="一-markdown-核心基础排版规范">一、 Markdown 核心基础排版规范</h2>
<h3 id="1-语义化标题结构与层级严格性">1. 语义化标题结构与层级严格性</h3>
<p>标题是文档大纲与阅读目录（TOC）的单一事实来源。在技术排版中，必须遵守严格的层级递进规则：</p>
<ul>
<li><strong>一级标题 (<code>#</code>)</strong>：单篇文章仅建议出现一次，通常由博客系统的文章元数据（Frontmatter <code>title</code>）自动作为主标题渲染；</li>
<li><strong>二级标题 (<code>##</code>)</strong>：代表文章的核心独立大章；</li>
<li><strong>三级标题 (<code>###</code>)</strong>：大章内部的具体知识模块；</li>
<li><strong>严禁跨层级使用</strong>：例如在 <code>##</code> 下直接跳跃使用 <code>####</code>，这会导致自动生成的目录导航（TOC）结构断裂。</li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="ln">1</span><span class="cl"><span class="cm">&lt;!-- 正确示范：严格逐级递进 --&gt;</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl"><span class="gu">## 1. 架构设计原则
</span></span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="gu">### 1.1 单一职责
</span></span></span><span class="line"><span class="ln">4</span><span class="cl"><span class="gu">### 1.2 开放封闭
</span></span></span><span class="line"><span class="ln">5</span><span class="cl">
</span></span><span class="line"><span class="ln">6</span><span class="cl"><span class="cm">&lt;!-- 错误示范：跳级使用导致大纲解析混乱 --&gt;</span>
</span></span><span class="line"><span class="ln">7</span><span class="cl"><span class="gu">## 1. 架构设计原则
</span></span></span><span class="line"><span class="ln">8</span><span class="cl"><span class="gu">#### 1.1 单一职责 (跳过了 H3)
</span></span></span></code></pre></div><hr>
<h3 id="2-列表排版与嵌套缩进规范">2. 列表排版与嵌套缩进规范</h3>
<p>列表能将散乱的信息结构化呈现。但在多级列表混排时，空格与缩进是常见的格式崩塌点：</p>
<ul>
<li><strong>无序列表</strong>：推荐统一使用减号 <code>-</code>，同级列表项符号必须全局一致，切勿在同一篇文章中混用 <code>*</code>、<code>+</code> 和 <code>-</code>；</li>
<li><strong>嵌套缩进</strong>：子列表必须相较于父级缩进 <strong>2 个空格或 4 个空格</strong>（建议全站统一为 2 个空格）；</li>
<li><strong>列表间距</strong>：紧凑型列表项之间无需空行，若某一项包含多段文字或代码块，则整个列表建议使用松散型空行分隔。</li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="ln">1</span><span class="cl"><span class="k">-</span> **核心中间件层**
</span></span><span class="line"><span class="ln">2</span><span class="cl">  <span class="k">-</span> 身份鉴权拦截器（JWT / WebAuthn 校验）
</span></span><span class="line"><span class="ln">3</span><span class="cl">  <span class="k">-</span> 访问限流中间件（基于 Token Bucket 算法）
</span></span><span class="line"><span class="ln">4</span><span class="cl"><span class="k">-</span> **数据持久化层**
</span></span><span class="line"><span class="ln">5</span><span class="cl">  <span class="k">-</span> SQLite WAL 关系型存储
</span></span><span class="line"><span class="ln">6</span><span class="cl">  <span class="k">-</span> 全局只读 KV 缓存
</span></span></code></pre></div><hr>
<h3 id="3-代码块与语法高亮规范">3. 代码块与语法高亮规范</h3>
<p>代码块是技术文档的核心组成部分。优秀的排版应当满足可读性与功能性的双重要求：</p>
<ol>
<li><strong>显式声明语言标识</strong>：在三个反引号后，必须明确标明编程语言的代号（如 <code>go</code>、<code>typescript</code>、<code>rust</code>、<code>bash</code>、<code>json</code>、<code>sql</code> 等）。这不仅能触发 Chroma 或 Prism 的语法高亮引擎，更能让前端代码卡片正确显示语言 Badge 并启用一键复制功能；</li>
<li><strong>区分行内代码与块级代码</strong>：
<ul>
<li>文件路径（如 <code>/etc/hosts</code>）、命令选项（如 <code>--minify</code>）、变量名（如 <code>userToken</code>）必须使用单个反引号包裹；</li>
<li>包含多行逻辑的程序片段，必须使用独立代码块。</li>
</ul>
</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="ln">1</span><span class="cl"><span class="c1">// 声明语言标识为 typescript
</span></span></span><span class="line"><span class="ln">2</span><span class="cl"><span class="kr">interface</span> <span class="nx">UserSession</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln">3</span><span class="cl">  <span class="nx">userId</span>: <span class="kt">string</span><span class="p">;</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">  <span class="nx">role</span><span class="o">:</span> <span class="s2">&#34;admin&#34;</span> <span class="o">|</span> <span class="s2">&#34;member&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="ln">5</span><span class="cl">  <span class="nx">expiresAt</span>: <span class="kt">number</span><span class="p">;</span>
</span></span><span class="line"><span class="ln">6</span><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><hr>
<h3 id="4-引用块blockquote的层次感">4. 引用块（Blockquote）的层次感</h3>
<p>引用块通常用于<strong>引经据典、特别声明、核心结论或设计准则</strong>的突出强调：</p>
<ul>
<li>可以通过多个 <code>&gt;</code> 符号实现多级嵌套引用；</li>
<li>可以在引用块内部嵌套使用加粗、斜体、列表甚至代码块。</li>
</ul>
<blockquote>
<p><strong>核心设计准则</strong>：</p>
<p>“简单性是可靠性的先决条件。在满足业务需求的前提下，最优秀的代码往往是那些被精简掉的代码。”</p>
<blockquote>
<p><em>—— 艾兹格·迪杰斯特拉（Edsger W. Dijkstra）</em></p>
</blockquote>
</blockquote>
<hr>
<h2 id="二-中英文混排美学与排版细节">二、 中英文混排美学与排版细节</h2>
<p>一份专业的文档不仅在于语法无误，更体现在对标点符号与空白字符等微小细节的雕琢上。</p>
<h3 id="1-中英文与数字之间的盘古之白">1. 中英文与数字之间的“盘古之白”</h3>
<p>在中文排版传统中，汉字属于全角方块字，而英文字母与阿拉伯数字属于半角字符。当中文与英文/数字直接贴合在一起时，视觉上会显得极其拥挤。</p>
<ul>
<li><strong>推荐做法</strong>：在中文字符与英文字符、中文与数字之间，<strong>主动保留一个半角空格</strong>；</li>
<li><strong>排版对比</strong>：
<ul>
<li>❌ <em>差评</em>：<code>我们在2026年使用Hugo编译了全站的HTML文件。</code></li>
<li>✅ <em>推荐</em>：<code>我们在 2026 年使用 Hugo 编译了全站的 HTML 文件。</code></li>
</ul>
</li>
</ul>
<h3 id="2-标点符号的准确使用">2. 标点符号的准确使用</h3>
<ul>
<li><strong>中文主句</strong>：必须使用标准的全角标点符号（，。！？；：“”‘’（））；</li>
<li><strong>英文短语与代码段内</strong>：必须使用标准的半角标点符号（<code>, . ! ? : &quot;&quot; '' ()</code>）；</li>
<li><strong>避免中英标点混用</strong>：中文句子结尾切勿使用英文半角句号 <code>.</code>。</li>
</ul>
<hr>
<h2 id="三-markdown-进阶扩展功能实战">三、 Markdown 进阶扩展功能实战</h2>
<p>现代纯静态博客通过集成 KaTeX 与 Mermaid 渲染引擎，使 Markdown 能够原生渲染复杂的科学公式与软件架构图。</p>
<h3 id="1-原生-latex--katex-数学公式排版">1. 原生 LaTeX / KaTeX 数学公式排版</h3>
<p>无需截取低分辨率的图片，直接在 Markdown 中书写标准 LaTeX 语法即可完成高精度排版。</p>
<h4 id="1-行内数学公式inline-math">(1) 行内数学公式（Inline Math）</h4>
<p>使用单个美元符号 <code>$</code> 包裹公式，常用于正文中穿插参数或简短等式：</p>
<ul>
<li>质能方程：$E = mc^2$</li>
<li>欧拉恒等式：$e^{i\pi} + 1 = 0$</li>
<li>正态分布概率密度函数：$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$</li>
</ul>
<h4 id="2-块级独立公式display-math">(2) 块级独立公式（Display Math）</h4>
<p>使用双美元符号 <code>$$</code> 包裹独立公式块，公式将居中排版并保留完整的上下标与积分范围：</p>
<ul>
<li>
<p><strong>高斯积分公式</strong>：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$</p>
</li>
<li>
<p><strong>离散傅里叶变换 (DFT)</strong>：
$$
X_k = \sum_{n=0}^{N-1} x_n \cdot e^{-i \frac{2\pi}{N} k n} \quad (k = 0, 1, \dots, N-1)
$$</p>
</li>
<li>
<p><strong>麦克斯韦方程组（微分形式）</strong>：
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &amp;= \frac{\rho}{\varepsilon_0} \
\nabla \cdot \mathbf{B} &amp;= 0 \
\nabla \times \mathbf{E} &amp;= -\frac{\partial \mathbf{B}}{\partial t} \
\nabla \times \mathbf{B} &amp;= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$</p>
</li>
</ul>
<hr>
<h3 id="2-mermaid-矢量流程图与架构图">2. Mermaid 矢量流程图与架构图</h3>
<p>在文本中声明 <code>```mermaid</code> 代码块，浏览器将在前端动态渲染为矢量 SVG 图表，支持深浅色模式自适应。</p>
<h4 id="1-现代边缘架构流程图-graph-lr">(1) 现代边缘架构流程图 (<code>graph LR</code>)</h4>
<pre tabindex="0"><code class="language-mermaid" data-lang="mermaid">flowchart LR
    Client[&#34;终端访客&#34;] --&gt;|&#34;HTTPS / HTTP/3&#34;| CDN[&#34;Cloudflare 边缘网络&#34;]
    CDN --&gt;|&#34;缓存命中 (&amp;lt; 10ms)&#34;| EdgeCache[&#34;Edge Cache 边缘缓存&#34;]
    CDN --&gt;|&#34;缓存未命中&#34;| Pages[&#34;Cloudflare Pages 静态分发&#34;]
    Pages --&gt;|&#34;纯净渲染&#34;| Storage[&#34;Markdown 内容库&#34;]
</code></pre><h4 id="2-oauth-21-pkce-状态机交互时序图-sequencediagram">(2) OAuth 2.1 PKCE 状态机交互时序图 (<code>sequenceDiagram</code>)</h4>
<pre tabindex="0"><code class="language-mermaid" data-lang="mermaid">sequenceDiagram
    autonumber
    actor User as 用户
    participant Client as 前端应用
    participant Authz as 认证服务
    participant API as 业务 API

    User-&gt;&gt;Client: 点击通行密钥 Passkey 登录
    Client-&gt;&gt;Client: 生成 code_verifier 与 challenge
    Client-&gt;&gt;Authz: 发起授权请求 /authorize
    Authz-&gt;&gt;User: 触发 WebAuthn 硬件密钥验签
    User--&gt;&gt;Authz: 验证指纹或人脸成功
    Authz--&gt;&gt;Client: 返回临时授权码 Code
    Client-&gt;&gt;Authz: 兑换令牌 /token
    Authz-&gt;&gt;Authz: 校验签名与 challenge 一致
    Authz--&gt;&gt;Client: 签发 JWT Access Token
    Client-&gt;&gt;API: 携带 Token 请求业务数据
    API--&gt;&gt;Client: 200 OK 返回受保护资源
</code></pre><hr>
<h2 id="四-总结docs-as-code-的工程哲学">四、 总结：Docs as Code 的工程哲学</h2>
<p>在现代技术实践中，“<strong>文档即代码（Docs as Code）</strong>”的理念正日益成为共识：</p>
<ol>
<li><strong>版本控制</strong>：文档与源码一同保存在 Git 仓库中，每次修改都有迹可循；</li>
<li><strong>规范化治理</strong>：通过统一的排版规范与样式约定，确保团队产出高标准的知识资产；</li>
<li><strong>内容与展示分离</strong>：纯净的 Markdown 专注于内容本身的逻辑严密性，而视觉呈现交由现代静态渲染引擎全权处理。</li>
</ol>
<p>养成规范、严谨的排版习惯，不仅能让技术总结更加清晰，更能让每一次阅读都成为一种享受。</p>
]]></content:encoded><category>Markdown</category><category>排版规范</category><category>LaTeX</category><category>Mermaid</category><category>技术写作</category></item></channel></rss>