單元 4 · 程式碼

行內 code、程式碼區塊與語法高亮 — Code

行內程式碼 · Inline Code

在句子裡提到檔名、指令、變數時,用反引號 ` 包起來。反引號是鍵盤左上角、~ 下面那個鍵。

原始碼 · SOURCE
執行 `npm install` 來安裝,
設定檔是 `config.json`。
渲染結果 · RENDERED

執行 npm install 來安裝,
設定檔是 config.json

提示:若內容本身就含反引號,可用雙反引號包:`` 反引號 ` 在內 ``

程式碼區塊 · Code Blocks

多行程式碼用三個反引號(fence)包住,這是現今最主流的方式(GitHub Flavored Markdown 支援)。

原始碼 · SOURCE
```python
def greet(name):
    return f"Hello, {name}!"
```
渲染結果 · RENDERED
def greet(name):
    return f"Hello, {name}!"

另一種舊寫法:整段縮排四個空格或一個 Tab 也能產生區塊,但沒有語法高亮,不建議。

語法高亮 · Syntax Highlighting

開頭的三個反引號後面寫上語言名稱,渲染器就會著色:```python```js```bash

支援的常見語言標籤 · LANGUAGES
python  js  javascript  ts  typescript  bash  sh  shell
json  yaml  html  css  go  rust  java  c  cpp  sql
diff  markdown  text(純文字,不高亮)

在區塊內顯示「三個反引號」

要示範「程式碼區塊」本身時,外層用四個反引號包住內層的三個反引號。

原始碼 · SOURCE
````text
```
# 這是程式碼區塊的語法
```
````
渲染結果 · RENDERED
```
# 這是程式碼區塊的語法
```

特殊字元要跳脫 · Escaping

想讓語法字元「顯示字元本身」而不是被解析,在前面加反斜線 \

原始碼 · SOURCE
\*不是斜體\*,\# 不是標題
渲染結果 · RENDERED

*不是斜體*,# 不是標題

提醒:在 HTML 原始檔裡(像本教學頁),&<> 要寫成 &amp; 等才能正確顯示——那是 HTML 的規則,不是 Markdown 的。
看完這頁你應該能說出:
  • 行內 code 用 `、區塊用 ```
  • 在 fence 開頭寫語言名即可語法高亮。
  • 如何用四重反引號示範「三個反引號」本身。
  • \ 跳脫語法字元。

延伸閱讀