<?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>Mermaid | 空垠尘</title><link>/zh-hant/tags/mermaid/</link><description>極簡純靜態 · 邊緣無界</description><generator>Hugo -- gohugo.io</generator><language>zh-Hant</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="/zh-hant/tags/mermaid/index.xml" rel="self" type="application/rss+xml"/><item><title>Markdown 排版規範與高階擴展實踐</title><link>/zh-hant/markdown-guide/</link><pubDate>Wed, 09 Sep 2026 10:00:00 +0800</pubDate><author>Dukang Xu</author><guid isPermaLink="true">/zh-hant/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>