# 程式碼與 Mermaid

本頁說明 fenced code block、縮排程式碼區塊、語法高亮、複製按鈕與 Mermaid 圖表。

## Fenced Code Block

````markdown
```javascript
const greet = (name) => `Hello, ${name}`;
```
````

輸出結構：

```html
<pre class="prettyprint" name="javascript">
  <code class="language-javascript" name="javascript">
    <ol><li>const&nbsp;greet...</li></ol>
  </code>
  <button class="copy"></button>
</pre>
```

| 規則 | 說明 |
|---|---|
| 圍欄 | 只支援三個反引號；`~~~` 不支援 |
| 每行一個 `<li>` | 由 CSS 顯示行號 |
| 共同縮排 | 以第一行的縮排（取 4 的倍數）為基準，從每一行移除 |
| 內容跳脫 | `<`、`>`、`&`、引號與空白轉成 entity |
| 標準模式 | 不處理，見 [標準模式](/standard-mode) |
| 同一行 | ` ```word``` ` 會把 `word` 當成語言名稱，輸出空的 `<code>` |

## 語言與高亮

語言名稱轉小寫後寫入 `name` 屬性；只有在下列清單中時才加上 `language-<名稱>` class：

`javascript`、`js`、`ts`、`typescript`、`html`、`css`、`xml`、`json`、`sql`、`java`、`python`、`ruby`、`php`、`cpp`、`csharp`、`swift`、`kotlin`、`go`、`rust`、`perl`、`bash`

實際上色由 Google code-prettify 的 `PR.prettyPrint()` 依 `prettyprint` class 完成，它會自行偵測語言，所以不在清單中的語言也可能被上色。`MDViewer` 在每次渲染後自動呼叫。

## 複製按鈕

每個區塊尾端都有 `<button class="copy">`。在 `MDViewer` 中點擊會把第一個子元素（`<code>`）的 `innerText` 寫入剪貼簿，成功時區塊加上 `success` class 1 秒，失敗加上 `error` class。`navigator.clipboard` 需要 HTTPS 或 localhost。

## 縮排程式碼區塊

以 4 個以上空白或 Tab 開頭的連續行輸出 `<pre class="prettyprint"><code>`，同樣帶行號與複製按鈕，但沒有語言。

| 例外 | 原因 |
|---|---|
| 區塊內含 HTML 標籤 | 跳過不轉換，避免把縮排的 HTML 當成程式碼 |
| 巢狀列表 | 列表在前一步已轉換，縮排項目不會變成程式碼 |

## Mermaid

````markdown
```mermaid
graph LR
    A[Editor] --> B[Viewer]
```
````

語言為 `mermaid` 時輸出 `<div class="mermaid">` 而不是 `<pre>`。`MDViewer` 渲染後會把 `<br>` 還原為換行、`&gt;` 還原為 `>`，再呼叫 `mermaid.run()`。Mermaid 11.4.1 由 bundle 自動載入，見 [執行期依賴](/runtime-dependencies)；匯出的 HTML 不載入 Mermaid。