一些Markdown擴展語法

2022 年 1 月 19 日
筆記

相信很多人跟我一樣，對Markdown是「一知半解」，會打一點，知道一點，但是其實從沒花哪怕一分鐘了解過。其實除了標題粗體插入程式碼，Markdown還有很多有趣的基礎語法和擴展語法。

Markdown基本語法就是由 John Gruber 最初設計的語法（如標題，加粗，斜體等），它很簡單且很常用，但是功能相當有限。由於一直沒有Markdown的確定標準，各個平台自製的「民間Markdown」應運而生，擴展語法增加了許多高級的功能（表格，角標等），可以實現更多功能。各個地方的擴展語法不盡相同。在一些網路平台或者本地編輯器上有效的語法，可能在其他地方並不能正確顯示。不過對於一些最常見的擴展語法，各個地方還是大致統一的。

表格(Tables)

大家應該都用過自動生成的Markdown表格，事實上自己打也並不複雜。Markdown支援創建任意mxn表格，並且可以對每一列設置對齊方式

|中國|美國|日本|韓國| 
|-:|-|:-:|:-:|
|北京|華盛頓|東京|首爾|
|`1450000000`|327000000|126300000|52000000|

中國	美國	日本	韓國
北京	華盛頓	東京	首爾
`1450000000`	327000000	126300000	52000000

一個mxn表格由m+1行構成，其中第一行是表頭，第二行指定對齊方式(Alignment)，之後所有的行是剩餘的行。每一行由n+1個分隔符|分割為n格，每一格儲存該列的資訊。不同列的長度可以不同，無需對齊，這一列會自動調整寬度，完整顯示一列里最寬的數據。列里的數據也支援簡單的語法

上面的程式碼創建了一個3×4的表格。觀察第二行的對齊方式。可以發現：

---:表示向右對齊（-可以有任意多個，下同）
:--:表示向中對齊
:--或--（即默認值）表示向左對齊

列表，引用的嵌套(Nested List & Quotation)

不算擴展的語法，但是很有意思。Markdown中有序或無序列表的嵌套規則是以縮進(Indent)來決定

1. First
   - Indent1
   - Indent2
2. Second
   1. Indent1
   2. Indent2

First
- Indent1
- Indent2
Second
1. Indent1
2. Indent2

實際上，要在任何列表間插入其他內容，都可以不用打斷列表，在列表的兩項之間縮進就可以，列表的順序和結構是完全由縮進來決定的

1. First
   > Quotation in First
2. Second

First

Quotation in First
Second

而引用的嵌套只有大於號的個數決定，幾個大於號就是幾層嵌套，甚至一級引用里可以直接出現三級引用。同一級引用會在引用框左邊自動連接。

> line1
> > line2
> > > line3
> 
> line4
> line5
> > > line6

line1

line2

line3

line4
line5

line6

注意引用內的文字也需要多打一個回車才能分開，否則可能會顯示在一行（這裡沒有）。

還有一種形式的列表：

First
: First

Second Term
: Second
    : Thrird
: Fourth

First

First

Second

Second: Thrird

Fourth

這個是在markdown.com.cn)上看到的，我本機並不支援，部落格園可以預覽，但像上面一樣炸了，其嵌套規則也是看縮進。不過這個東西描述為「定義列表」，應該用來做定義，並不應該用來嵌套。

刪除線、高亮線與轉義表示(Strickout, Highlight and Escape)

~~這是刪除~~~~這是刪除~~

==這是高亮==這是高亮

刪除線還算常見，但是高亮很多地方並不支援（但是部落格園支援）。要在刪除線內使用~字元，使用轉義字元\~即可。

~~這是\~\~刪除~~~~這是~~刪除~~

對於加粗或者斜體也是一樣，用\*替代*

**ds\*\*ad**ds**ad

但是行內程式碼字元`並不支援這麼做，你可以自己進行嘗試，即使進行轉義，它往往也會優先匹配最近的兩個`，留下空空一個\

`\`and` 顯示效果：\and`。

正確的做法：如果行內程式碼里出現`，就把兩端的一個反引號改為兩個：``（當然要加上空格，不要連在一起）。那如果行內程式碼里也出現了兩個`呢？那就把兩端的兩個改為三個，以此類推。

`` ` ``顯示效果：`

``` `` ```顯示效果：``(那我是怎麼打出三重反引號的？那就在邊上加4個了)

鏈接(HyperLink)，圖片(Picture)與Title

一般的鏈接是這樣：[一般的鏈接是這樣](//www.cnblogs.com/ofnoname/p/15823373.html)

在鏈接後可以添加一個字元串作為Title：[在鏈接後可以添加一個字元串作為Title](//www.cnblogs.com/ofnoname/p/15823373.html "Hello?Hello!")

這樣，當你把滑鼠移至添加了Title的鏈接而不點擊時，滑鼠旁就會顯示出Title。圖片也是一個道理，可以在滑鼠指向圖片時顯示Title。

直接鏈接：將鏈接直接用`<>`括起來即可，不過有些網站不能正確識別

<//www.cnblogs.com/ofnoname/p/15823373.html>//www.cnblogs.com/ofnoname/p/15823373.html

引用鏈接：將鏈接放在之後的引用里，在鏈接處只用數字代表

[Click Me][1]

[1]: //www.cnblogs.com/ofnoname/p/15823373.html

Click Me

同時，這個鏈接也可以用來指向文中其他位置（定位到其他標題），最常見的就是標題標籤的跳轉，但是我在部落格園測試出來不支援，所以就不再多講。

給圖片增加鏈接：讓圖片變成可點擊的，實現方法很多。其中一種是直接將兩個鏈接暴力嵌套

腳註(Footnote)

上面的「引用鏈接”已經提到過一點了。真正的腳註用[^1]類似來標記

悔相道之不察[^1]兮，延佇乎吾將反[^3]

[^1]: Footnote 1
[^3]: Footnote 2

悔相道之不察^[1]兮，延佇乎吾將反^[2](點擊鏈接跳轉到文尾)

可以使用任意標記關聯腳註，會自動以1,2,3…排列。

待辦列表(Todolist)

格式簡單，無序列表加上一個框。

- [x] Write the press release
- [ ] Update the website
- [] Contact the media

框里的x表示已完成，否則未完成。一般可以手動點擊更改。部落格園不支援，大部分地方沒有。Typora等本地編輯器有，非常美觀。

添加Emoji

Emoji本質是Unicode字元，你可以直接複製表情然後粘貼在文本里（當然同一個符號在不同平台上有不同風格的，樣式可能不一樣，但是都是同一個表情）。不過在部落格園，粘貼圖片表情都會自動上傳圖片過後粘貼圖片鏈接，很方便。

附魔怔笑

更通用的辦法是使用:表情程式碼:的形式。在emojipedia上可以查詢各種的表情的顯示以及短程式碼，常見的都可以被識別

:sweat_smile:
:joy:

😅

😂

不過這個仍然比較小眾，很多地方沒有。

自動目錄(TOC)

輸入[TOC]召喚下面的目錄（全文目錄，標題等級動態生成的），比較常見。

表格(Tables)
列表，引用的嵌套(Nested List & Quotation)
刪除線、高亮線與轉義表示(Strickout, Highlight and Escape)
鏈接(HyperLink)，圖片(Picture)與Title
腳註(Footnote)
待辦列表(Todolist)
添加Emoji
自動目錄(TOC)
流程圖

流程圖

很多筆記軟體都支援的流程圖。具體實現是在程式碼框中使用flowchart或者mermaid。這樣程式碼區域就會自動繪製流程圖。

    ```flow或者mermaid
    //程式碼
    ```

程式碼里可以定義各種圖形，文字以及其連接方式。除了一般的流程圖，有的還可以做時序圖等等。不過部落格園是不支援的，並且我也很難用習慣，這裡不多做介紹。給大家貼一篇別的文章，描述流程圖內的語法。

Footnote 1 ↩︎
Footnote 2 ↩︎