Markdown 速查表

此頁面也用於測試文章和頁面中使用的元件。

實用連結

• 維基百科上的 XML 和 HTML 字元實體參考列表

我的部落格資訊

• 檢查我的網域是否在中國大陸被封鎖

設計

• Font Awesome

常用表情符號

更多請參考 Emoji Cheatsheet

CSS

按鍵 (kbd)

• {{ kbd Control }} → Control
• {{ kbd Shift ⇧ }} → Shift ⇧ - 使用 Unicode 字元
• {{ kbd Command }} → Command⌘ （展開為 ⌘）
• {{ kbd Option }} → Option⌥ （展開為 ⌥）
• {{ kbd enter }} → enter↵ （會在 enter 之後自動附加 ↵ 符號）
• {{ kbd style="font-weight bold" Ctrl }} → Ctrl （內聯樣式屬性；見下方說明）
• 注意：style="..." 的值不能包含冒號（:），會與 remark-directive 的標籤語法衝突。請使用空格分隔的簡單宣告，例如 font-weight bold。

按鍵對齊佔位符

在固定寬度欄位中排列按鍵時，可使用以下佔位符對齊儲存格：

• {{ box }} → — 標準 keymap 寬度的空白儲存格
• {{ mbox }} → — 較窄的中間儲存格間隙
• {{ left-space }} → — 左側空白
• {{ mid }} → — 中心間隙

這些佔位符在 :::keymap 容器中最為實用（見下文）。

鍵盤映射

:::keymap 指令會將內文以換行符拆分為多行渲染。結合 {{ kbd }} 與上述佔位符，可建構鍵盤佈局圖。

程式碼：

:::keymap
{{ kbd Esc }} {{ kbd F1 }} {{ kbd F2 }} {{ kbd F3 }} {{ kbd F4 }}
{{ kbd ~ }} {{ kbd 1 }} {{ kbd 2 }} {{ kbd 3 }} {{ kbd 4 }}
{{ kbd Tab }} {{ kbd Q }} {{ kbd W }} {{ kbd E }} {{ kbd R }}
:::

結果：

使用佔位符置中佈局：

程式碼：

:::keymap
{{ kbd Ctrl }} {{ kbd Alt }} {{ left-space }} {{ kbd Space }} {{ mid }} {{ kbd Space }} {{ left-space }} {{ kbd Alt }} {{ kbd F4 }}
:::

結果：

Markdown（含外掛）

• ++Inserted++ Inserted
• 註腳 [^1] 用於標記¹，[^1]: 用於註解
• 原生 markdown 跳脫： 將字面值 {{ }}、{%%} 或 ::: 用反引號包裹（例如 `{{ kbd }}`）或放入程式碼區塊。沒有 {% raw %} 外掛 —— 它看起來能用，只是因為解析器會忽略未識別的 {% ... %} 標籤。
• {% youtube [youtube id] %} 僅作為歷史參考保留於此。沒有外掛實作它 —— 該標籤會作為字面文字渲染。若在舊文章中看到它，請視為無效標籤。

使用樣式類別的屬性，例如：

# header {.style-me}
paragraph {data-toggle=modal}
paragraph *style me*{.red} more text

輸出

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
<p>paragraph <em class="red">style me</em> more text</p>

帶樣式的圖片

在圖片所在行的結尾附加 {.className}（或 {: .className}）即可為圖片加上 class。該簡寫僅在段落中生效，不適用於表格儲存格。

代碼：

![cert](https://neo01.com/image.jpg){.cert-thumb}

結果：

表格欄位對齊

程式碼：

結果：

引用區塊

程式碼：

一些引用文字

結果：

一些引用文字

有序清單

程式碼：

1. 項目 1
2. 項目 2

結果：

1. 項目 1
2. 項目 2

無序清單

程式碼：

• 項目 1
• 項目 2

結果：

• 項目 1
• 項目 2

水平線

程式碼： ---

結果：

程式碼區塊（Shiki）

通用圍欄程式碼由 Shiki 使用 github-dark 主題進行高亮。

加入 showLineNumbers 中繼資料可呈現行號：

程式碼：

```js showLineNumbers
function greet(name) {
  return `Hello, ${name}!`;
}
```

結果：

function greet(name) {
  return `Hello, ${name}!`;
}

程式碼區塊

結果：

程式碼區塊

程式碼：

程式碼區塊

GitHub 卡片

使用者

:::githubCard{user="neoalienson"}
:::

結果：

neoalienson

@neoalienson

📁 --

Repositories

⭐ --

Stars

📈 --

Commits

👥 --

Followers

🔄 --

Pull Requests

❗ --

Issues

儲存庫

:::githubCard{user="neoalienson" repo="pachinko"}
:::

結果：

Mermaid JS

長條圖

結果：

折線圖：

提示框塊

LaTeX (KaTeX)

行內公式使用單美元符號：$E=m{c}^2$ 會與內文一同渲染。

區塊公式使用雙美元符號：

常用片段

程式碼：

行內：$a^2 + b^2 = c^2$

區塊：

$$
f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n
$$

結果：

行內：$a^2+b^2=c^2$

區塊：

矩陣與分段函式

程式碼：

$$
A = \begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

$$
f(n) = \begin{cases}
n/2 & \text{若 } n \text{ 為偶數} \\
3n+1 & \text{若 } n \text{ 為奇數}
\end{cases}
$$

結果：