這個站在技術文章裡可以用的元件，全部列在這裡，也記下做不到的事1。 每一項都是實際渲染出來的，不是截圖 —— 圖可以點右上角放大，程式碼可以複製， 文字都選得起來。寫新文章時我自己也會回來翻這頁。

數學式 Link to heading

建置期就用 KaTeX 渲染完成，訪客端不需要 JavaScript，關掉 JS 也看得到。 不用在 front matter 寫 math = true。

行內用 \( \)：雜湊碰撞的生日界大約在 2n/22^{n/2} 次查詢， 所以 SHA-256 的碰撞抗性是 21282^{128} 而不是 22562^{256}。

區塊用 $$ $$：

P(碰撞)≈1−e−k(k−1)2N P(\text{碰撞}) \approx 1 - e^{-\frac{k(k-1)}{2N}}

多行對齊：

c=Ek(m)⊕r =(m⋅k mod p)⊕r \begin{aligned} c &= E_k(m) \oplus r \ &= (m \cdot k \bmod p) \oplus r \end{aligned}

矩陣與大型運算子：

H=∑i=1n[aibi cidi]其中∫0∞e−x2 dx=π2 H = \sum_{i=1}^{n} \begin{bmatrix} a_i & b_i \ c_i & d_i \end{bmatrix} \quad\text{其中}\quad \int_{0}^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}

為什麼行內不用 $ $ 開了之後「這台設備要價 $50000 到 $60000 台幣」裡的 $50000 到 $ 會被當成一條行內數學式吃掉。價格在技術文章裡太常見，所以行內一律用 \( \)。 行內程式碼與程式碼區塊裡的 $ 不受影響。

圖表 Link to heading

主力是 D2（MPL-2.0）。跟 Mermaid 最大的差別是它在建置期產生 SVG， 所以訪客端零 JavaScript、沒有 CDN 依賴，關掉 JS 也看得到圖。 深色是 SVG 內建的，切換主題會跟著換。

流程圖 Link to heading

攻擊者應用程式伺服器中繼資料服務169.254.169.254物件儲存帶內部網址的請求伺服器代為請求臨時憑證回應內含憑證用憑證直接存取
一次典型的 SSRF 打到雲端中繼資料服務

循序圖 Link to heading

使用者用戶端應用授權伺服器資源伺服器點擊登入導向授權端點顯示同意畫面同意回傳授權碼用授權碼換 tokenaccess_token帶 token 呼叫資料
OAuth 2.0 授權碼流程

類別圖 Link to heading

Cipher-keybytes-noncebytes+encrypt(pt bytes)bytes+decrypt(ct bytes)bytesAEAD+seal(pt bytes, ad bytes)bytes+open(ct bytes, ad bytes)bytes實作
UML 類別，支援存取修飾與型別

ER 圖 / 資料表 Link to heading

usersidintPKemailvarchar(255)created_attimestampsessionsiduuidPKuser_idintFKexpires_attimestampauditidbigintPKuser_idintFKactionvarchar(64)多對一多對一
sql_table 形狀，支援主鍵與外鍵標記

狀態機 Link to heading

D2 沒有專用的狀態機語法，用一般有向圖表達，效果一樣。

CLOSEDLISTENSYN_RCVDESTABLISHEDFIN_WAIT_1TIME_WAITpassive open收到 SYN收到 ACK主動關閉收到 FIN+ACK2MSL 逾時
TCP 連線狀態（節錄）

巢狀容器 / 網路架構 Link to heading

layout="elk" 換成另一個佈局引擎，階層深的圖會比較整齊。

網際網路邊界應用層資料層防火牆負載平衡Web 1Web 2PostgreSQLRedis
容器可以無限巢狀，連線能跨層

網格佈局 Link to heading

機密性完整性可用性加密雜湊備援TLSHMAC叢集
grid 用來排比較表、矩陣這類非流程內容

形狀庫 Link to heading

personcylinderqueuepackagedocumentstephexagonovalclouddiamondstored_dataparallelogramcirclecalloutpage
內建形狀，畫架構圖時夠用

樣式與強調 Link to heading

輸入未驗證的反序列化遠端執行白名單型別檢查安全處理
classes 定義可重複使用的樣式

連線樣式 Link to heading

abcdefghijkl實線虛線粗線雙向無方向菱形端點
虛線、粗細、顏色、雙向、箭頭端點

圖形內嵌 Markdown Link to heading

檢查順序

  1. 驗證來源 IP
  2. 比對簽章
  3. 檢查時間戳
通過才處理
節點裡可以放 Markdown（清單、標題、粗體）

手繪風 Link to heading

想法原型實驗論文不如預期
sketch=“true”，適合草圖與示意

Mermaid（備援） Link to heading

D2 沒有的圖型才用 Mermaid。用到才會載入那 2.5 MB，其他頁面不受影響。

gantt
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    title 研究時程
    section 前期
    文獻回顧        :done,    a1, 2026-09-01, 30d
    環境建置        :active,  a2, 2026-09-20, 20d
    section 實作
    原型開發        :         a3, after a2, 45d
    實驗與量測      :         a4, after a3, 30d
專題時程

D2 做不到的 Link to heading

實測過的限制，寫下來免得下次再試一遍：

項目狀況怎麼辦
甘特圖沒有這個語法，gantt 只會被當成節點名稱用 Mermaid
圓餅圖 / 長條圖同上用 Mermaid，或直接用表格
mindmap同上用一般樹狀圖近似
|latex 區塊直接 panic，會讓建置失敗數學式寫在圖外面
|go 等程式碼區塊文字會超出方框 13–24px改用 |md 或放圖外
icon: 指向外部網址網址會寫進 SVG，訪客瀏覽器會去抓用本地檔案

程式碼 Link to heading

一般區塊 Link to heading

import hashlib, hmac

def verify(secret: bytes, payload: bytes, signature: str) -> bool:
    """用固定時間比較，避免以時間差推回簽章。"""
    expected = hmac.new(secret, payload, hashlib.sha256).hexdigest()
    return hmac.compare_digest(expected, signature)

行號與標記重點行 Link to heading

在 code fence 後面加 {linenos=true, hl_lines=[3-4]}：

1
2
3
4
5
6

func handler(w http.ResponseWriter, r *http.Request) {
    name := r.URL.Query().Get("name")
    // 這兩行是問題所在：使用者輸入直接進了 HTML
    fmt.Fprintf(w, "<h1>Hello %s</h1>", name)
    w.WriteHeader(http.StatusOK)
}

很長的行 Link to heading

超出版面時只有程式碼區塊自己橫向捲動，整頁不會跑版：

openstack server create --flavor m1.large --image ubuntu-24.04 --network lab-net --security-group default --key-name gamma4-lab-key --availability-zone nova my-instance

行內程式碼 Link to heading

設定在 config.toml 的 [markup.highlight]， noClasses 要是 false 配色才會由主題的 _syntax.scss 提供。 等寬字是自帶的 JetBrains Mono。

其他 Link to heading

元件語法渲染時機
數學式\( \) / $$ $$建置期
D2 圖表{{% d2 %}}建置期
Mermaid{{% mermaid %}}瀏覽器端
程式碼code fence建置期

引言：

不被觀測的東西，會安靜地不見。

  1. 註腳會自動收到文章最後面。引用點刻意放在文章開頭 —— 來源與註腳離得近的話，點下去畫面幾乎不動，看不出到底跳了沒。 跳到之後那一條會短暫亮起，回去的箭頭也一樣。 ↩︎