Markdown教程

Markdown是一種純文本格式的標記語言，通過簡單的標記語法，它可以使普通文本內容具有一定的格式，語法規則可以借鑒HTML語言，也可以匯出為HTML檔案，

1. 概述

1.1 設計理念

??Markdown致力于使閱讀和創作檔案變得容易，

??Markdown視可讀性為最高準則，Markdown檔案應該以純文本形式原樣發布，不應該包含標記標簽和格式化指令，盡管Markdown的語法受到了以下這些 text-to-HTML過濾器的影響：包括Setext、atx、Textile、reStructuredText、Grutatext還有EtText，但是Markdown語法靈感最大的來源還是純文本email 的格式，

??基于以上背景，Markdown完全由標點符號組成，這些標點經過仔細挑選以使他們看上去和表達的含義相同，例如，星號標記的單詞就像強調，串列就像是串列，如果你使用過email的話，就連塊參考都像參考的文本段落，

1.2 行內HTML

??Markdown是用于創作web檔案的，

??Markdown從來都不是要取代HTML，它的語法集非常小，只對應一小部分HTML標簽，它要做的不是創造一種新的語法以使插入HTML標簽變得更容易，在我看來，HTML標簽已經很容易插入了，Markdown的目標是易于閱讀，創作和編輯文章，HTML是一種發布格式，Markdown是一種創作格式，因此，Markdown處理的都是純文本，

??對于Markdown中未包含的標簽，可以直接使用HTML，沒有必要使用定界符或識別符號來表明從Markdown切換到HTML，直接使用標簽就行了，

??唯一的限制就是對于HTML塊級元素，像 <div>, <table>, <pre>, <p>等等，必須另起一行單獨放，并且開始和結束標簽前面不能有任何縮進，Markdown會自動識別這些塊級元素而不會在他們周圍添加額外的<p>標簽，

??例如，下面是添加HTML表格到Markdown檔案:

This is a regular paragraph，

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph，

??注意Markdown語法結構在HTML塊級元素中不會被處理，例如，你不該在HTML塊級元素中使用Markdown式的語法如*emphasis*，

??HTML行內元素例如 <span>, <cite>, <del>可以在Markdown段落，串列項，標題中任意使用，如果你樂意，你甚至可以使用HTML標簽替代Markdown格式；例如你可以用HTML<a>和<img>標簽替代Markdown的鏈接和圖片語法，

??不同于HTML塊級元素，Markdown語法可以在行內元素中決議，

1.3 特殊字符自動轉義

??在HTML中，<和&這兩個字符需要特殊對待，<用于起始標簽；&符號用于表示HTML字符物體，如果你想將它們用作字面量, 你必須將它們轉義為字符物體，例如<, 和&，

??&符號尤其使網頁作者備受折磨. 如果你想得到 ‘AT&T’, 你得這樣寫 ‘AT&T’，你甚至需要轉義 URL 中的&符號，因此, 如果你想鏈接到:
??http://images.google.com/images?num=30&q=larry+bird

??你需要編碼 href 屬性為：
??http://images.google.com/images?num=30&q=larry+bird

??不用說，這很容易被忘記，也是HTML校驗中最容易出現的錯誤，

??你可以在Markdown中自由地使用這些字符，這些字符在生成HTML時會被自動轉義，如果你在HTML字符物體中使用英鎊符號，它將保持不變，否則它將被轉義為&，

??因此，如果你需要得到著作權符號，可以寫©，Markdown不會將其轉義，但是如果你寫AT&T，Markdown會將其轉義為AT&T，

??類似的，由于Markdown支持行內HTML，如果你使用<作為HTML標簽定界符，Markdown將不會進行轉義，但是如果你寫4 < 5，Markdown會將其轉義為4 < 5，

??總而言之，Markdown的塊級元素和行內元素中，尖括號和英鎊符號總是被自動編碼，這使得用Markdown來寫HTML代碼很容易，(相較之下，原始的HTML中就很難書寫HTML代碼，因為代碼中的每個<和&都需要被轉義，)

2. 塊級元素

2.1 段落與換行

1. 段落的前后必須是空行：

空行指的是行內什么都沒有，或者只有空白符(空格或制表符)
相鄰兩行文本，如果中間沒有空行會顯示在一行中(換行符被轉換為空格)

2.如果需要在段落內加入換行：

可以在前一行的末尾加入至少兩個空格，然后換行寫其它的文字
也可以使用在一行末尾添加標簽<br>

3.Markdown中的多數區塊都需要在兩個空行之間，

2.2 縮進

段首縮進：使用html空格物體(Space entity)

&ensp;或者 表示一個半角的空格(1/2個中文寬度)
&emsp;或者 表示一個全角的空格(1個中文寬度)
 或者 表示非斷行空格

半角(&ensp;&ensp;)效果
??故鄉的風箏時節，是春二月，倘聽到沙沙的風輪聲，仰頭便能看見一個淡墨色的蟹風箏或嫩藍色的蜈蚣風箏，還有寂寞的瓦片風箏，沒有風輪，又放得很低，伶仃地顯出憔悴可憐的模樣，但此時地上的楊柳已經發芽，早的山桃也多吐蕾，和孩子們的天上的點綴相照應，打成一片春日的溫和，我現在在哪里呢？四面都還是嚴冬的肅殺，而久經訣別的故鄉的久經逝去的春天，卻就在這天空中蕩漾了，
全角(&emsp;&emsp;)效果
??故鄉的風箏時節，是春二月，倘聽到沙沙的風輪聲，仰頭便能看見一個淡墨色的蟹風箏或嫩藍色的蜈蚣風箏，還有寂寞的瓦片風箏，沒有風輪，又放得很低，伶仃地顯出憔悴可憐的模樣，但此時地上的楊柳已經發芽，早的山桃也多吐蕾，和孩子們的天上的點綴相照應，打成一片春日的溫和，我現在在哪里呢？四面都還是嚴冬的肅殺，而久經訣別的故鄉的久經逝去的春天，卻就在這天空中蕩漾了，
全角(  )效果
故鄉的風箏時節，是春二月，倘聽到沙沙的風輪聲，仰頭便能看見一個淡墨色的蟹風箏或嫩藍色的蜈蚣風箏，還有寂寞的瓦片風箏，沒有風輪，又放得很低，伶仃地顯出憔悴可憐的模樣，但此時地上的楊柳已經發芽，早的山桃也多吐蕾，和孩子們的天上的點綴相照應，打成一片春日的溫和，我現在在哪里呢？四面都還是嚴冬的肅殺，而久經訣別的故鄉的久經逝去的春天，卻就在這天空中蕩漾了，

2.3 標題

在想要設定為標題的文字前面加#來表示
#是一級標題，##是二級標題，以此類推，支持六級標題，

#前需要加空格

# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題

效果如下：在這里插入圖片描述

2.4 塊參考

在參考的文字前加>即可，參考也可以嵌套，如加>>， >>>，

示例：

>這是參考的內容
>>這是參考的內容
>>>這是參考的內容

效果如下：

這是參考的內容

這是參考的內容

這是參考的內容

2.5 串列

2.5.1 無序串列

語法：無序串列用- + *任何一種都可以，

- 串列內容1
+ 串列內容2
* 串列內容3

注意：- + * 跟內容之間都要有一個空格，

效果如下：

串列內容1

串列內容2

串列內容3

2.5.2 有序串列

語法：數字加點，

1. 串列內容1
2. 串列內容2
3. 串列內容3

注意： 序號跟內容之間要有空格，

效果如下：

串列內容1
串列內容2
串列內容3

2.5.3 串列嵌套

語法：上一級和下一級之間敲三個空格，

- 一級無序串列內容
   - 二級無序串列內容
   - 二級無序串列內容
   - 二級無序串列內容

效果如下：

一級無序串列內容
- 二級無序串列內容
- 二級無序串列內容
- 二級無序串列內容

1. 一級有序串列內容
   1. 二級無序串列內容
   2. 二級無序串列內容
   3. 二級無序串列內容

效果如下：

一級有序串列內容
1. 二級無序串列內容
2. 二級無序串列內容
3. 二級無序串列內容

2.6 代碼塊

反引號(`)方式

插入行內代碼，即插入一個單詞或者一句代碼的情況，使用`code`這樣的形式插入，效果code，
插入多行代碼，分別使用三個反引號(```)包裹多行代碼，在第一組反引號(```)后標記語言，可實作語法高亮，效果如下，

# python
print("Hello, World!");

# C++
int main(void)
{
    printf("Hello world\n");
}

縮進(Tab)方式，插入多行代碼

縮進式插入前方必須有空行；
縮進 4 個空格或是 1 個制表符；
一個代碼區塊會一直持續到沒有縮進的那一行(或是檔案結尾)，

代碼：

此處有空行
    #include  <stdio.h>
    int main(void)
    {
        printf("Hello world\n");
    }

顯示效果：

#include  <stdio.h>
int main(void)
{
printf("Hello world\n");
}

2.7 分割線

三個或者三個以上的-或者*都可以，

示例：

---
----
***
*****

效果如下：
可以看到，顯示效果是一樣的，

2.8 背景色

由于<style>標簽和標簽的style屬性不被支持，所以這里只能是借助<table>, <tr>, <td>等表格標簽的bgcolor屬性來實作背景色，故這里對于文字背景色的設定，只是將那一整行看作一個表格，更改了那個格子的背景色，

<table><tr><td bgcolor=pink align="center">背景色Pink</td></tr></table>

背景色Pink

3. 行內元素

3.1 字體

Markdown是一種可以使用普通文本編輯器撰寫的標記語言，通過類似HTML的標記語法，它可以使普通文本內容具有一定的格式，但是它本身是不支持修改字體、字號與顏色等功能的，我們可以使用HTML標簽<font>來實作這些功能，

字體，字號和顏色編輯代碼如下：

<font face="宋體">這是宋體，</font>
<font face="微軟雅黑">這是微軟雅黑，</font>
<font face="華文彩云">這是華文彩云，</font>
<font color=#006757 size=5 face="黑體">這是顏色為#006757，字號為5，字體為黑體，</font>

color：調整字體顏色
size：調整字體大小
face：調整字體型別

效果如下：

這是宋體，
這是微軟雅黑，
這是華文彩云，
這是顏色為#006757，字號為5，字體為黑體，

3.2 鏈接

Markdown支持兩種鏈接形式：行內和參考，
這兩種形式下鏈接文本的定界符都是 [中括號]，

3.2.1 行內

要創建行內鏈接，只需在[鏈接文本]的右括號后面緊接一對圓括號，圓括號里面放所需的URL鏈接，還可以放一個可選的鏈接標題，標題要用引號包圍，

This is the URL of [alt](href "title")

alt: 鏈接名
href: 鏈接地址
title: 鏈接標題，滑鼠移動到超鏈接上時顯示的內容，可以不寫

示例：

This is the URL of [Github](https://github.com/ "點擊訪問Github").

效果如下：
This is the URL of Github.

如果是參考相同服務器下的本地資源，還可以用相對路徑：

See my [About](/about/) page for details.

此外，還可以使用<a>標簽創建鏈接，

<a href=""， target="">alt</a>

alt: 鏈接名
href: 鏈接地址
target: 鏈接打開方式，"_blank"表示在新頁面中打開
title: 鏈接標題，滑鼠移動到鏈接上時顯示的內容，可以不寫

示例：

This is the URL of <a href="https://github.com/", target="_blank", title="點擊訪問Giuhub">Github</a>.

效果如下：
This is the URL of Github.

注意： Markdown本身語法不支持鏈接在新頁面中打開，某些平臺可能支持，如果想要在新頁面中打開超鏈接就可以用html語言的<a>標簽代替，

3.2.2 參考

參考型別的鏈接放在第二個中括號里，括號里面放鏈接標簽：

This is [an example][id] reference-style link.

接下來，在檔案中的任意位置，你可以像下面那樣定義鏈接標簽，需要單獨占一行：

[id]: http://example.com/  "Optional Title Here"

方括號中包含鏈接識別符號 (可以用三個以上的空白符來添加縮進)；
跟著是冒號；
跟著是一個以上的空白符和水平制表符；
跟著是鏈接的 URL (URL 可以用尖括號包圍)；
跟著是可選的標題屬性, 可以用單引號, 雙引號, 或者圓括號包圍，

以下四個鏈接的定義是等價的：

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)
[foo]: <http://example.com/>  "Optional Title Here"

注意： Markdown.pl 1.0.1有一個已知的問題就是不能用單引號來包圍鏈接標題，

鏈接定義只存在于Markdown處理期間而不會在最終的HTML出現，

鏈接定義的名稱可以包含字母、數字、空格和標點符號，但它們不是大小寫敏感的，例如，下面兩個鏈接是等價的：

[link text][a]
[link text][A]

隱含鏈接名稱使你可以忽略鏈接名稱，這時鏈接文本本身被用于鏈接名稱，只用一對空的中括號就可以了，例如, 要鏈接 “Google” 這個詞到google.com網站, 你只用這樣寫:

[Google][]
[Google]: http://google.com/

由于鏈接名稱可以包含空格，甚至鏈接文本中包含多個單詞時這種快捷方式也是可行的：

Visit [Daring Fireball][] for more information.
[Daring Fireball]: http://daringfireball.net/

鏈接定義可以放在Markdown檔案的任意位置，一般傾向于將它們直接放在參考位置下面，當然，也可以像底部注釋那樣，將它們都放在檔案底部，下面是一個參考鏈接實體：

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].
[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"

作為對比，下面是用Markdown行內鏈接的效果：

I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").

參考連接的意義不在于更容易書寫，而在于使得檔案更易于閱讀，比較上面兩個例子：使用參考鏈接的段落只有81個字符；使用行內鏈接的段落有176個字符；而原始的HTML有234個字符，在原始的HTML中，標記比文本還多，

使用Markdown的參考鏈接，原始碼更接近與最終的輸出，就像瀏覽器中呈現的樣子，通過把標記元資料移出段落，你可以不用打斷行文而直接添加鏈接，

3.2.3 錨點

錨點即就是頁內跳轉鏈接，比如我這里寫下一個錨點，點擊回到目錄，就能跳轉到目錄，在目錄中點擊這一節，就能跳轉過來，

注意： 在默寫Markdown編輯器中使用錨點時，點擊會打開一個新的當前頁面，雖然錨點用的不是很舒服，但是可以用注腳實作這個功能，

語法說明：
在你準備跳轉到的指定標題后插入錨點{#標記}，然后在檔案的其它地方寫上連接到錨點的鏈接，

### 3.2 鏈接{#3.2}
跳轉到[3.2 鏈接](#3.2)

效果如下所示:
跳轉到3.2 鏈接

3.2.4 注腳

有時我們需要為正文中的內容添加說明，此時可以使用注腳，

語法說明：
在需要添加注腳的文字后加上注腳名字[^name]，稱為加注，然后在文本的任意位置(一般在最后)添加注腳，注腳前必須有對應的注腳名字，

&emsp;&emsp;<font face="宋體" color=#0066ff>故鄉的風箏時節，是春二月，倘聽到沙沙的風輪聲，仰頭便能看見一個淡墨色的蟹風箏或嫩藍色的蜈蚣風箏，還有寂寞的瓦片風箏，沒有風輪，又放得很低，伶仃地顯出憔悴可憐的模樣，但此時地上的楊柳已經發芽，早的山桃也多吐蕾，和孩子們的天上的點綴相照應，打成一片春日的溫和，我現在在哪里呢？四面都還是嚴冬的肅殺[^1]，而久經訣別的故鄉的久經逝去的春天，卻就在這天空中蕩漾[^2]了， </font>

[^1]: 形容秋冬季節草木凋零、寒色逼人的情景：秋氣肅殺，黃葉滿地，
[^2]: 起伏搖動：水波蕩漾，

效果如下：

??故鄉的風箏時節，是春二月，倘聽到沙沙的風輪聲，仰頭便能看見一個淡墨色的蟹風箏或嫩藍色的蜈蚣風箏，還有寂寞的瓦片風箏，沒有風輪，又放得很低，伶仃地顯出憔悴可憐的模樣，但此時地上的楊柳已經發芽，早的山桃也多吐蕾，和孩子們的天上的點綴相照應，打成一片春日的溫和，我現在在哪里呢？四面都還是嚴冬的肅殺¹，而久經訣別的故鄉的久經逝去的春天，卻就在這天空中蕩漾²了，

3.3 強調

加粗
要加粗的文字左右分別用兩個*號包起來
斜體
要傾斜的文字左右分別用一個*號包起來
斜體加粗
要傾斜和加粗的文字左右分別用三個*號包起來
~~洗掉線~~
要加洗掉線的文字左右分別用兩個~~號包起來

示例：

**這是加粗的文字**
*這是傾斜的文字*`
***這是斜體加粗的文字***
~~這是加洗掉線的文字~~

效果如下：
這是加粗的文字
這是傾斜的文字
這是斜體加粗的文字
~~這是加洗掉線的文字~~

Markdown將星號*和下劃線_作為強調標記，用*或者_包裹的文本將會用HTML的<em>標簽包裹，即斜體；用**或者 __包裹的文本將會用HTML的<strong>標簽包裹，即粗體，

3.4 圖片

3.4.1 插入圖片

通常，要用原生的語法在純文本格式中插入圖片是很困難的，
Markdown使用了類似鏈接的語法來插入圖片, 包含兩種形式：行內和參考，

行內圖片

![alt](src title)

alt: 圖片描述，顯示在圖片下面的文字
src: 圖片地址，可以是網路圖片的鏈接，也可以是本地圖片的路徑
title: 圖片標題，滑鼠移動到圖片上時顯示的內容，可以不寫

示例：

![wallhaven圖片](https://w.wallhaven.cc/full/8o/wallhaven-8o77d1.jpg "wallhaven")

效果如下：在這里插入圖片描述

此外，還可以使用<img>標簽行內圖片，

<img src="https://w.wallhaven.cc/full/8o/wallhaven-8o77d1.jpg" alt="wallhaven" width="250" height="150" align="middle" title="wallhaven">

src: 圖片地址，可以是網路圖片的鏈接，也可以是本地圖片的路徑
alt: 圖片描述，顯示在圖片下面的文字
width: 圖片寬度
height: 圖片高度
border: 邊框粗細
vspace: 垂直間距
hspace: 水平間距
align: 對齊方式，left， right， middle， top， bottom
title: 圖片標題，滑鼠移動到圖片上時顯示的內容，可以不寫

效果如下：
wallhaven圖片

參考圖片

![Alt text][id]

“id” 是圖片參考的名稱，圖片參考使用鏈接定義的相同語法：

[id]: url/to/image  "Optional title attribute"

3.4.2 圖床

??使用Markdown有一個重要的問題，那就是圖片的存盤，Markdown檔案要用到圖片時必須是一個鏈接，各個平臺都有自己的圖片存盤方法，同一篇文章發布到不同的平臺需要單獨上傳圖片一次，
??解決辦法就是使用圖床來單獨存盤圖片，需要用到圖片的地方統一用圖床上的圖片鏈接就好了，這樣同一篇文章，發布到不同的平臺真正可以簡單復制粘貼，
??圖床就是一個圖片服務器，用來存盤圖片，以URL的形式來供其他平臺獲取圖片，可以自己搭建，也可以使用別人搭建好后提供的服務，
下面介紹幾類不同的圖床

**物件存盤圖床 **
很多大公司都提供物件存盤的服務，可以作為圖床來使用，國外的有Amazon S3和Google Storage等；國內的有七牛云、又拍云、騰訊云、阿里云、天翼云等，
第三方圖床
第三方圖床就是專門做圖床的服務商，常見的有 sm.ms、imgchr、聚合圖床等，
聚合圖床
將圖片分發到多處備份，借助其本身的CDN加速功能，節省服務器流量，并且不用擔心圖片被洗掉，即便其中某幾個圖床上的圖片被洗掉了，還有其他備份，保證萬無一失，支持匿名和注冊管理，
云盤圖床
云盤一般都是檔案系統存盤，傳圖片獲得外鏈即可，常用的有騰訊微云，百度網盤，
QQ
社交網站圖床
社交網站也能發圖片，相應的也就可以獲得圖片的外鏈，其中用的比較多的是微博圖床和QQ空間圖床，
云筆記圖床
云筆記同樣也可以傳圖片，獲取外鏈，比較出名的有印象筆記、有道云筆記，
代碼托管網站圖床
常用的代碼托管網站有Github、Gitlab、碼云、Coding等，這些網站也可以上傳圖片，網站生成的外鏈就可以用在markdown中，主要有三種方法：
- 新建一個倉庫，專門放圖片
- 使用pages服務
- 使用issues功能
自建圖床
自建圖片服務器，顧名思義就是自己花錢購買服務器來搭建用來存盤圖片的服務，Github有一個開源的圖片服務Cheverto，可以用來搭建自己的圖床，
區塊鏈存盤圖床
如果了解區塊鏈，就會知道IPFS，它的遠景很大，其中一個功能就是存盤，我們也可以用它來作為圖床，

4. 其他

4.1 自動鏈接

Markdown支持一種“自動”創建URL和email地址鏈接的簡短形式：只需用尖括號包圍URL或email地址即可，這意味著如果你想為URL和email鏈接加上可點擊的鏈接，你只需要這樣寫：

<http://example.com/>

Markdown將把它轉化為：

<a href="http://example.com/">http://example.com/</a>

email鏈接也是一樣，除此之外，Markdown還會隨機添加十進制和十六進制字符物體參考來幫助你混淆郵件地址以屏蔽廣告和垃圾郵件爬蟲，例如，Markdown會將<address@example.com>轉化為如下代碼：

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

這在瀏覽器中會渲染為可點擊的 “address@example.com” 鏈接，(這種字符物體編碼的小把戲確實可以欺騙一些簡單的廣告和垃圾郵件爬蟲，但是不足以欺騙所有爬蟲，雖然聊勝于無，但是這種形式發布的郵件地址最侄訓是會收到垃圾郵件的，)

4.2 轉義

Markdown中可以使用反斜杠轉義Markdown語法符號為字面量，例如，如果你想用*包圍一個單詞 (而不是HTML的<em>標簽，斜體效果)，你可以在星號前面加\，就像這樣：

\*literal asterisks\*

顯示效果：
*literal asterisks*

Markdown為下面字符提供反斜杠轉義：

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

4.3 表格

4.3.1 單元格和表頭

使用|來分隔不同的單元格，使用-來分隔表頭和其他行：
示例如下：

name | age | Gender
---- | --- | ---
Bob | 12 | Male
Mike | 32 | Male
Rose | 24 | Female
Linken | 16 | Male

效果如下：

name	age	Gender
Bob	12	Male
Mike	32	Male
Rose	24	Female
Jack	16	Male

為了美觀，可以使用空格對齊不同行的單元格，并在左右兩側都使用|來標記單元格邊界：

| name   | age | Gender |
| ----   | --- | ---    |
| Bob    | 12  | Male   |
| Mike   | 32  | Male   |
| Rose   | 24  | Female |
| Jack   | 16  | Male   |

為了使Markdown更清晰，|和-兩側需要至少有一個空格(最左側和最右側的|外就不需要了)，

4.3.2 對齊

在表頭下方的分隔線標記中加入:，即可標記下方單元格內容的對齊方式：

:--- 代表左對齊
:--: 代表居中對齊
---: 代表右對齊

示例如下：

| left | center | right |
| :--- | :----: | ----: |
| Bob  | Mike   | Jack  |
| B    | M      | L     |

效果如下：

left	center	right
Bob	Mike	Jack
B	M	L

如果不使用對齊標記，單元格中的內容默認左對齊；表頭單元格中的內容會一直居中對齊(不同的實作可能會有不同表現)，

4.3.3插入其他內容

表格中可以插入其他Markdown中的行內標記：

|     name     |    type   |             blog                  |
| ------------ |    ---    | -------------------------------   |
| *Google*     |   Search  | [Google](https://www.google.com/) |
| **Github**   |  Hosting  | [Github](https://github.com/)     |

效果如下：

name	type	blog
Google	Search	Google
Github	Hosting	Github

4.4 流程圖(flow)

Markdown中的流程圖語法叫flow，該語法只有兩個注意事項：

定義元素
連接定義好的元素

定義元素

tag=type:content:url

tag：標簽，用于連接元素時使用，相當于是定義了一個常量
=>：標簽定義等式
type：該標簽的型別，共有6種型別如下：
- start：開始
- end：結束/完成
- operation：流程操作
- subroutine：預定子流程
- condition：條件判斷
- input/output：輸入輸出
content：流程陳述句中放置的內容
**注意：**type:與content之間一定要有一個空格，否則會出問題

連接定義好的元素
以上面的流程代碼為例，在代碼塊標志后加上flow即可：

?```mermaid
flowchat
s=>start: 開始
e=>end: 結束
o=>operation: 操作項
s->o->e
?```

有些Markdown編輯器，如Typora，在你插入代碼時選擇flow語法即可，就只需要輸入流程圖要用到的代碼，

以下是一個閏年判斷的流程圖案例：

?```mermaid
flowchat
   st=>start: Start
   i=>inputoutput: 輸入年份n
   cond1=>condition: n能否被4整除？
   cond2=>condition: n能否被100整除？
   cond3=>condition: n能否被400整除？
   o1=>inputoutput: 輸出非閏年
   o2=>inputoutput: 輸出非閏年
   o3=>inputoutput: 輸出閏年
   o4=>inputoutput: 輸出閏年
   e=>end
   st->i->cond1
   cond1(no)->o1->e
   cond1(yes)->cond2
   cond2(no)->o3->e
   cond2(yes)->cond3
   cond3(yes)->o2->e
   cond3(no)->o4->e
?```

效果如下：

4.5 特殊字符及Emoji表情

Markdown支持輸入特殊字符和Emoji表情，使用Unicode的方式進行插入，方法如下：

注冊標記->&#174;
美元標記->&#36;
拉丁文字母->&#664;
微笑->:&#128578;
眨眼->&#128521;
生氣->&#128545;

注冊標記->?
美元標記->$
拉丁文字母->?
微笑->:🙂
眨眼->😉
生氣->😡

更多字符及表情請參考Unicode字符百科，

4.6 Latex公式

Markdown支持插入Latex公式，使用方法如下，其中包括行內公式和塊級公式兩種，

4.6.1 行內(行內)公式

使用兩個$符號參考公式：

在行內插入${\sqrt{x^{2}}}$的效果，

效果如下：
在行內插入 x 2 {\sqrt{x^{2}}} x2 ?的效果，

注意： 某些Markdown編輯器(例如Typora)，需要在設定中打開行內公式選項，才可以使用行內公式，

4.6.2 塊級(行間)公式

使用兩個$$符號參考公式：

$$
{f(x)=a_nx^n+a_{n-1}x^{n-1}+a_{n-2}x^{n-2}}+\cdots \tag{1.1}
$$

效果如下：
f ( x ) = a n x n + a n ? 1 x n ? 1 + a n ? 2 x n ? 2 + ? (1.1) {f(x)=a_nx^n+a_{n-1}x^{n-1}+a_{n-2}x^{n-2}}+\cdots \tag{1.1} f(x)=an?xn+an?1?xn?1+an?2?xn?2+?(1.1)

形容秋冬季節草木凋零、寒色逼人的情景：秋氣肅殺，黃葉滿地， ??
起伏搖動：水波蕩漾， ??

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226881.html

標籤：其他

上一篇：前端特效源代碼：實作柱狀圖入門必會 h5+canvs

下一篇：前端web搭建及常用web頁面書寫技巧