程式碼與 Mermaid
本頁說明 fenced code block、縮排程式碼區塊、語法高亮、複製按鈕與 Mermaid 圖表。
Fenced Code Block
```javascript
const greet = (name) => `Hello, ${name}`;
```
輸出結構：
<pre class="prettyprint" name="javascript">
<code class="language-javascript" name="javascript">
<ol><li>const greet...</li></ol>
</code>
<button class="copy"></button>
</pre>
| 規則 | 說明 |
|---|---|
| 圍欄 | 只支援三個反引號；~~~ 不支援 |
每行一個 <li> |
由 CSS 顯示行號 |
| 共同縮排 | 以第一行的縮排（取 4 的倍數）為基準，從每一行移除 |
| 內容跳脫 | <、>、&、引號與空白轉成 entity |
| 標準模式 | 不處理，見 標準模式 |
| 同一行 | ```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
```mermaid
graph LR
A[Editor] --> B[Viewer]
```
語言為 mermaid 時輸出 <div class="mermaid"> 而不是 <pre>。MDViewer 渲染後會把 <br> 還原為換行、> 還原為 >，再呼叫 mermaid.run()。Mermaid 11.4.1 由 bundle 自動載入，見 執行期依賴；匯出的 HTML 不載入 Mermaid。