2025年1月5日 星期日

Markdown標記語言-全面解析

一、前言

一、前言

返回目錄

Markdown是一種羽量級標記語言，排版語法簡潔，讓人們更多地關注內容本身而非排版。 它使用易讀易寫的純文本格式編寫文檔，可與HTML混編，可匯出 HTML、PDF 以及本身的 .md 格式的檔。 因簡潔、高效、易讀、易寫，Markdown被大量使用，如Github、Wikipedia、簡書等。

千萬不要被「標記」、「語言」嚇到，Markdown的語法十分簡單，常用的標記符號不超過十個，用於日常寫作記錄綽綽有餘，不到半小時就能完全掌握。

就是這十個不到的標記符號，卻能讓人優雅地沉浸式記錄，專注內容而不是糾結排版，達到「心中無塵，碼字入神」的境界。

讓我們開始學習吧。

目錄

返回目錄



二、標題語法

返回目錄

要建立標題，請在每一行標題開頭前添加井字號 # 與1個空格。 # 數量代表了標題的級別。

例如，添加3個 # 表示創建1個三級標題，例如： ### Heading level 3 。

語法 HTML 預覽效果
# Heading level 1 <h1>Heading level 1</h1> # Heading level 1
## Heading level 2 <h2>Heading level 2</h2> ## Heading level 2
### Heading level 3 <h3>Heading level 3</h3> ### Heading level 3
#### Heading level 4 <h4>Heading level 4</h4> #### Heading level 4
##### Heading level 5 <h5>Heading level 5</h5> ##### Heading level 5
###### Heading level 6 <h6>Heading level 6</h6> ###### Heading level 6

其它標題語法

返回目錄

還可以在文本下方添加任意數量的 == 號來標識一級標題，或者 -- 號來標識二級標題。

語法 HTML 預覽效果
Heading level 1
=============== 		<h1>Heading level 1</h1> Heading level 1
===
Heading level 2
--------------- 		<h1>Heading level 2</h1> Heading level 2
---

最佳實踐

返回目錄

不同的 Markdown 應用程式處理 和標題之間的空格方式並不一致。 為了相容考慮，請用一個空格在和標題之間進行分隔。

✅ Do this ❌ Don't do this
# Here's a Heading #Here's a Heading

三、段落

返回目錄

要創建段落，請使用空白行將一行或多行文本進行分隔。

Markdown語法 HTML 預覽效果
I really like using Markdown.

I think I'll use it to format all of my documents from now on. 		<p>I really like using Markdown.</p>
<p>I think I'll use it to format all of my documents from now on.</p> 		I really like using Markdown.
I think I'll use it to format all of my documents from now on.

段落（Paragraph）用法的最佳實

返回目錄

不要用空格（spaces）或製表鍵(Tabulator, Tab)縮進段落。

✅ Do this ❌ Don't do this
Don't put tabs or spaces in front of your paragraphs.

Keep lines left-aligned like this. 		This can result in unexpected formatting problems.

Don't add tabs or spaces in front of paragraphs.

四、換行語法

返回目錄

在一行的末尾添加兩個或多個空格，然後按回車鍵，即可創建一個換行。另一個方式是使用html語法 <br> 進行換行。

Markdown語法 HTML 預覽效果
This is the first line.
And this is the second line. 		<p>This is the first line.
And this is the second line.</p> 		This is the first line.
And this is the second line.
This is the first line.<br>
And this is the second line. 		<p>This is the first line.
And this is the second line.</p> 		This is the first line.
And this is the second line.

換行（Line Break）用法的最佳實踐

返回目錄

✅ Do this ❌ Don't do this
First line with two spaces after.
And the next line. 		First line with a backslash after. \
And the next line.
First line with the HTML tag after. <br>
And the next line. 		First line with nothing after.
And the next line.

五、分隔線語法

返回目錄

要創建分隔線，請在單獨一行上使用3個或多個星號 *** 、減號 --- 或下底線 ___ ，並且不能包含其他內容。

星號 *** <hr>

減號 --- <hr>

下底線 ___ <hr>

以上三個分隔線的渲染效果看起來都一樣。

分隔線（Horizontal Rule）用法最佳實踐

返回目錄

為了相容性，請在分隔線的前後均添加空白行。

✅ Do this ❌ Don't do this
Try to put a blank line before...

---

...and after a horizontal rule. 		Without blank lines, this would be a heading.
---
Don't do this!

六、強調語法

返回目錄

通過將文本設置為粗體或斜體來強調其重要性。

粗體（Bold）

返回目錄

要加粗文本，請在單詞或短語的前後各添加兩個星號（asterisks, ** ）或下底線（underscores, __ ）。

Markdown語法 HTML 預覽效果
I just love **bold text**. I just love <strong>bold text</strong>. I just love bold text .
I just love __bold text__. I just love <strong>bold text</strong>. I just love bold text .
Love**is**bold Love<strong>is</strong>bold Love is bold

粗體（Bold）用法最佳實踐

返回目錄

Markdown 應用程式在如何處理單詞或短語中間的下底線上並不一致。 為相容考慮，在單詞或短語中間部分加粗的話，請使用星號（asterisks, ** ）。

✅ Do this ❌ Don't do this
Love**is**bold Love__is__bold

斜體（Italic）

返回目錄

要用斜體顯示文本，請在單詞或短語前後添加一個星號（asterisk, * ）或下底線（underscore, _ ）。

Markdown語法 HTML 預覽效果
Italicized text is the *cat's meow*. Italicized text is the <em>cat's meow</em>. Italicized text is the cat’s meow .
Italicized text is the _cat's meow_. Italicized text is the <em>cat's meow</em>. Italicized text is the cat’s meow.
A*cat*meow A<em>cat</em>meow A cat meow

斜體（Italic）用法的最佳實踐

返回目錄

請在單詞或短語前後添加一個星號（asterisk, * ）。

✅ Do this ❌ Don't do this
A*cat*meow A_cat_meow

粗體（Bold）和斜體（Italic）

返回目錄

要同時用粗體和斜體突出顯示文字，請在單詞或短語的前後各添加三個星號（asterisk, *** ）或下底線（underscore, ___ ）。

Markdown語法 HTML 預覽效果
This text is ***really important***. This text is <strong><em>really important</em></strong>. This text is really important .
This text is ___really important___. This text is <strong><em>really important</em></strong>. This text is really important .
This text is __*really important*__. This text is <strong><em>really important</em></strong>. This text is really important .
This text is **_really important_**. This text is <strong><em>really important</em></strong>. This text is really important .
This is really***very***important text. This is really<strong><em>very</em></strong>important text. This is really very important text.

粗體（Bold）和斜體（Italic）用法的最佳實踐

返回目錄

Markdown 應用程式在處理單詞或短語中間添加的下底線上並不一致。 為了實現相容性，請使用星號將單詞或短語的中間部分加粗並以斜體顯示，以示重要。

✅ Do this ❌ Don't do this
This is really***very***important text. This is really___very___important text.

刪除線

返回目錄

您可以通過在單字中心放置一條水平線來刪除單詞。此功能使您可以指示某些單詞是一個錯誤，要從文檔中刪除。 若要刪除單詞，請在單詞前後使用2個波浪號 ~~ 。

呈現的輸出如下所示：

世界是平坦的。 我们现在知道世界是圆的。

七、引用語法

返回目錄

要創建區塊引用，請在段落前添加一個 > 符號。

返回目錄

渲染效果如下所示：

Dorothy followed her through many of the beautiful rooms in her castle.

多個段落的區塊引用

返回目錄

區塊引用可以包含多行，包括空白行。每一行開頭前添加一個 > 符號。

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

多層區塊引用

返回目錄

區塊引用可以多層使用。要多層引用的段落前再添加一個 > 符號。例如2層引用 >> 。

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

帶有其它功能的區塊引用

返回目錄

區塊引用可以包含其他 Markdown 格式的元素。 並非所有元素都可以使用，你需要進行實驗以查看哪些元素有效。

渲染效果如下：

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan .

八、列表語法

返回目錄

可以將多個條目組織成有序或無序列表。

有序清單

返回目錄

要創建有序清單，請在每個清單項前添加數列並緊跟1個英文句點。 數列不必按數學順序排列，但是清單應當以數列 1 起始。

Markdown語法 HTML 預覽效果
1. First item
2. Second item
3. Third item
4. Fourth item 		<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol> 		1. First item
2. Second item
3. Third item
4. Fourth item
1. First item
8. Second item
1. Third item
1. Fourth item 		<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol> 		1. First item
8. Second item
1. Third item
1. Fourth item

無序列表

返回目錄

要建立無序列表，請在每個清單項前面添加加號（ + ）、減號（ - ）或乘號（ * ）。

Markdown語法 HTML 預覽效果
+ First item
+ Second item
+ Third item
+ Fourth item 		<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul> 		+ First item
+ Second item
+ Third item
+ Fourth item
- First item
- Second item
- Third item
- Fourth item 		<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul> 		- First item
- Second item
- Third item
- Fourth item
* First item
* Second item
* Third item
* Fourth item 		<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul> 		* First item
* Second item
* Third item
* Fourth item

九、代碼語法

返回目錄

要將單詞或短語表示為代碼，請將其包裹在反引號 ` 中。

返回目錄

Markdown語法 HTML 預覽效果
At the command prompt, type `nano`. At the command prompt, type <code>nano</code>. At the command prompt, type nano .

轉義反引號

返回目錄

如果你要表示為代碼的單詞或短語中包含一個或多個反引號，則可以通過將單詞或短語包裹在雙反引號 `` 中。

Markdown語法 HTML 預覽效果
`` Use `code` in your Markdown file. `` <code>Use `code` in your Markdown file.</code> Use `code` in your Markdown file.

代碼區塊-縮進

返回目錄

要創建代碼區塊，請將代碼塊的每一行縮進至少四個空格(Space)或1個製表鍵(Tabulator, Tab)。

<html>
<head>
</head>
</html>

渲染效果如下：

Tip：要在代碼塊中顯示反引號？

Note： 要創建不用縮進的代碼塊，請使用 圍欄式代碼塊（fenced code blocks）.

代碼區塊-圍欄代碼塊

返回目錄

Markdown基本語法允許您通過將行縮進4個空格或1個製表鍵(Tabulator, Tab)來創建代碼塊。 如果發現不方便，請嘗試使用受保護的代碼塊。 根據Markdown處理器或編輯器的不同，您將在代碼塊之前和之後的行上使用3個反引號 ``` 或3個波浪號 ~~~ 。

呈現的輸出如下所示：

語法高亮

返回目錄

許多Markdown處理器都支援受圍欄代碼塊的語法突出顯示。 使用此功能，您可以為編寫代碼的任何語言添加顏色突出顯示。 要添加語法突出顯示，請在受圍欄代碼塊之前的反引號旁邊指定一種語言。

呈現的輸出如下所示：

十、超連結語法

返回目錄

超連結語法代碼：

對應的HTML代碼：

Markdown語法 HTML 預覽效果
[Google首頁](https://www.google.com.tw) <a href="https://www.google.com.tw">Google首頁</a> Google首頁
[Google首頁](https://www.google.com.tw "前往Google") <a href="https://www.google.com.tw" title="前往Google">Google首頁</a> Google首頁

簡單的超連結

返回目錄

使用尖括弧 <> (chevrons, angle brackets)可以很方便地把URL或者email位址變成可點擊的連結。

渲染效果如下：

https://www.google.com.tw
test@example.com

帶格式化的超連結

返回目錄

強調 連結， 在連結語法前後增加星號。 要將連結表示為代碼，請在方括弧內添加反引號 ` 。

渲染效果如下：

I love supporting the EFF .
This is the Google首頁 . See the section on code .

Note: 要將連結表示為代碼，請在方括弧內添加反引號 ` 。

引用類型連結

返回目錄

引用樣式連結是一種特殊的連結，它使URL在Markdown中更易於顯示和閱讀。參考樣式連結分為兩部分，以使文本易於閱讀。

(1.)參考: 可使用兩組中括弧 [] (brackets, square brackets)進行格式設置。第1組中括弧超連結顯示文字。 第2組中括號指定 被參考標籤名稱 ；也可以只使用1組中括號直接指定 被參考標籤名稱 。

渲染效果如下：

Google首頁

Google

(2.)被參考:使用中括弧 [] (brackets, square brackets)內放置 標籤名稱 ，其後緊跟1個冒號(Colon)、至少1個空格(Space)、超連結網址、顯示title游標懸停文字(可選, Optional)。可以放在Markdown文檔中的任何位置。 有些人將它們放在出現的段落之後，有些人則將它們放在文檔的末尾（例如尾註或腳注）。

連結最佳實踐

返回目錄

不同的 Markdown 應用程式處理URL中間的空格方式不一樣。 為了相容性，請盡量使用%20代替空格。

✅ Do this ❌ Don't do this
[link](https://www.example.com/my%20great%20page) [link](https://www.example.com/my great page)

十一、圖片語法

返回目錄

要添加圖像，請使用驚嘆號 ! ，然後在中括弧(brackets, square brackets)增加替代文字說明，圖片連結放在括弧(parentheses, round brackets)裡，括弧裡的連結後面可以增加1個可選的圖片標題。

Note: 圖片連結可能因Markdown版本關係無法顯示，建議使用相對路徑(relative path)設定，其餘請自行實驗。

插入圖片Markdown語法代碼：

對應的HTML代碼：

渲染效果如下：

Google最初及最大的公司總部

連結圖片

返回目錄

給圖片增加超連結，請將圖像Markdown語法在外層再括一組中括弧(brackets, square brackets)，然後將連結添加在圓括弧(parentheses, round brackets)裡。

插入圖片且設定超連結的Markdown語法代碼:

渲染效果如下：

Google最初及最大的公司總部

十二、轉義字元語法

返回目錄

要顯示原本用於格式化 Markdown 文件的字元，請在字元前面添加反斜杠字元 \ 。

渲染效果如下：

可做轉義的字元

返回目錄

以下列出的字元都可以通過使用反斜杠字元從而達到轉義目的。

Character Name
\ backslash
` backtick (see also escaping backticks in code)
* asterisk
_ underscore
{ } curly braces
[ ] brackets
( ) parentheses
# pound sign
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark
| pipe (see also escaping pipe in tables)

十三、內嵌HTML標籤

返回目錄

對於 Markdown 涵蓋範圍之外的標籤，都可以直接在文件裡面用 HTML。如需使用 HTML，不需要額外標註這是 HTML 或是 Markdown，只需 HTML 標籤添加到 Markdown 文字中即可。

行內元素(inline)

返回目錄

HTML 的行內元素如 <span><cite> 不受限制，可以在 Markdown 的段落、列表或是標題里任意使用。 依照個人習慣，甚至可以不用 Markdown 格式，而採用 HTML 標籤來格式化。 例如：如果比較喜歡 HTML 的 <del> 或 <a> 標籤，可以直接使用這些標籤，而不用 Markdown 提供的連結或是圖片語法。 當你需要更改元素的屬性時（例如為文字指定顏色或更改圖像的寬度），使用 HTML <img> 標籤更方便些。

渲染效果如下：

區塊標籤

返回目錄

HTML 區塊元素(block)和行內元素(inline)不同，在行內元素的範圍內， Markdown 的語法是可以解析的。區塊元素如 <div><table><pre><p> 等標籤，必須在前後加上空行，以便於內容區分。 而且這些元素的開始與結尾標籤，不可以用 tab 或是空白來縮進。 Markdown 會自動識別這區塊元素，避免在區塊標籤前後加上沒有必要的 <p> 標籤。

例如，在 Markdown 檔裡加上一段 HTML 表格：

渲染效果如下：

This is another regular paragraph.

請注意，Markdown 語法在 HTML 區塊元素中將不會被進行處理。 例如，你無法在 HTML 區塊內使用 Markdown 形式的 *強調* 。

HTML 用法最佳實踐

返回目錄

出於安全原因，並非所有 Markdown 應用程式都支援在 Markdown 文檔中添加 HTML。 如有疑問，請查看相應 Markdown 應用程式的手冊。 某些應用程式只支援 HTML 標籤的子集。

對於 HTML 的區塊元素 <div><table><pre><p> ，請在其前後使用空行（blank lines）與其它內容進行分隔。 盡量不要使用製表鍵(Tabulator, Tab)或空格（spaces）對 HTML 標籤做縮進，否則將影響格式。

在 HTML 區塊元素內不能使用 Markdown 語法。 例如 <p>italic and **bold**</p> 將不起作用。

十四、表格

返回目錄

請使用3個或多個減號 --- 創建每列的標題，並使用管道 | (Pipe)分隔每列。您可以選擇在表的任一端添加管道。

呈現的輸出如下所示：

Syntax Description
Header Title
Paragraph Text

Tip： 使用減號和管道創建表可能很麻煩。 為了加快該過程，請嘗試使用 Markdown Tables Generator 。 使用圖形介面構建表，然後將生成的Markdown格式的文本複製到檔中。

對齊

返回目錄

您可以通過在標題行中減號的左側、右側或兩側添加冒號 : ，將列中的文本對齊到左側、右側或中心。

呈現的輸出如下所示：

Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

格式化表格中的文字

返回目錄

您可以在表格中設定文字格式。 例如，您可以添加超連結，代碼（僅反引號 ` 中的單詞或短語，而不是代碼塊）和強調語法。

您不能添加標題，區塊引用，清單，水平規則，圖像或HTML標籤。

在表中轉義管道字元

返回目錄

您可以使用表格的HTML字元代碼 &#124; 在表中顯示豎線 | 字元。

十五、註腳

返回目錄

註腳使您可以添加註釋和參考，而不會使文檔正文混亂。 當您創建註腳時，帶有註腳的上標數字會出現在您添加註腳參考的位置。 讀者可以按下連結以跳至頁面底部的註腳內容。

要創建註腳參考，請在中括弧 [] (brackets, square brackets)內添加插入符號和標識符 [^1] 或 [^bignote] 。 標識符可以是數字或單詞，但不能包含空格或製表鍵(Tabulator, Tab)。 標識符僅將註腳參考與註腳本身相關聯-在輸出中，註腳按順序編號。

Here's a simple footnote, [1] and here's a longer one. [2]

創建被參考的註腳本身，請在中括弧 [] (brackets, square brackets)內添加插入符號和標識符 [^1] 或 [^bignote] ，並用冒號 : 和註腳說明。 您不必在文件末尾添加註腳。 您可以將它們放在除清單，塊引號和表之類的其他元素之外的任何位置。

十六、任務列表語法

返回目錄

工作清單使您可以建立帶有複選框的項目清單。 在支援任務清單的Markdown應用程式中，複選框將顯示在內容旁邊。 要創建任務清單，請在任務清單項之前添加減號 - 、空格、中括弧 [] (brackets, square brackets)和文本。 要選擇一個複選框，請在中括弧之間添加 x 。

呈現的輸出如下所示：

  • Write the press release
  • Update the website
  • Contact the media

十七、使用Emoji表情

返回目錄

有兩種方法可以將表情符號添加到Markdown檔中：將表情符號複製並粘貼到Markdown格式的文本中，或者鍵入emoji shortcodes。

複製和粘貼表情符號 在大多數情況下，您可以簡單地從 Emojipedia 等來源複製表情符號並將其粘貼到文檔中。 許多Markdown應用程式會自動以Markdown格式的文本顯示表情符號。 從Markdown應用程式導出的HTML和PDF檔應顯示表情符號。

Tip： 如果您使用的是靜態網站生成器，請確保將HTML頁面編碼為UTF-8。

使用表情符號簡碼

返回目錄

一些Markdown應用程式允許您通過鍵入表情符號短代碼來插入表情符號。 這些以冒號開頭和結尾，並包含表情符號的名稱。

呈現的輸出如下所示：

去露营了！ ⛺ 很快回来。
真好笑！ 😂

Note： 注意：您可以使用此 表情符號簡碼清單 ，但請記住，表情符號簡碼因應用程式而異。 有關更多資訊，請參閱Markdown應用程式的文件。

十八、自動網址超連結

返回目錄

許多Markdown處理器會自動將URL轉換為超連結。 這意味著如果您輸入 https://www.google.com.tw ，即使您未使用中括弧 [] (brackets, square brackets)或尖括弧 <> (chevrons, angle brackets)，您的Markdown處理器也會自動將其轉換為連結。

禁用自動URL連結

返回目錄

如果您不希望自動連結URL，則可以通過代碼語法將URL使用反引號 ` 包起來，即可顯示該網址。

呈現的輸出如下所示：

http://www.example.com

十九、數學Math Katex

返回目錄

Markdown使用 Katex 支援數學公式、符號等渲染，可以任何瀏覽器中呈現正確的結果。
網頁上自動渲染 需要添加以下Script：

支援的數學功能 Supported Functions ，通常使用雙錢符號 $$ 包覆或使用額外套件支援一個錢符號 $ 包覆，在錢符號中使用兩個反斜線 \\ 或一個反斜線接文字newline \newline 進行換行，例如

Markdown語法
預覽效果
$$\overline{AB}$$
A B ‾ \overline{AB}
$\^{a}$ a ˆ \^{a}
$\lVert A \rVert$ ∥ A ∥ \lVert A \rVert
$$\bigr($$
( \bigr(
$$\Bigr($$
( \Bigr(
$$\biggr($$
( \biggr(
$$\Biggr($$
( \Biggr(
$$) \big) \Big) \bigg) \Bigg)$$
) ) ) ) ) ) \big) \Big) \bigg) \Bigg)
$$\begin{pmatrix} a & b\\ c & d \end{pmatrix}$$
( a b c d ) \begin{pmatrix} a & b\\ c & d \end{pmatrix}
$$x = \begin{cases} a &\text{if } b\\ c &\text{if } d \end{cases}$$
x = { a if b c if d x = \begin{cases} a &\text{if } b\\ c &\text{if } d \end{cases}
$$\begin{equation} \begin{split} a &=b+c\\ &=e+f \end{split} \end{equation}$$
a = b + c = e + f \begin{equation} \begin{split} a &=b+c\\ &=e+f \end{split} \end{equation}
$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat}$$
10 x + 3 y = 2 3 x + 13 y = 4 \begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat}
$$\begin{CD} A @>a>> B\\ @VbVV @AAcA\\ C @= D \end{CD}$$
A → a B b ↓ ↑ c C = D \begin{CD} A @>a>> B\\ @VbVV @AAcA\\ C @= D \end{CD}
$$\Phi\phi\Delta\delta\Theta\theta\Mu\mu\Pi\pi\Sigma\sigma\Omega\omega\varPhi\varphi$$
Φ ϕ Δ δ Θ θ M μ Π π Σ σ Ω ω Φ φ \Phi\phi\Delta\delta\Theta\theta\Mu\mu\Pi\pi\Sigma\sigma\Omega\omega\varPhi\varphi
$$\cancel{5}\space\bcancel{5}\space\phase{-78^\circ}\space\boxed{\pi=\frac c d}$$
5 5 − 7 8 ∘ π = c d \cancel{5}\space\bcancel{5}\space\phase{-78^\circ}\space\boxed{\pi=\frac c d}
$$x_n\space e^x\space _u^o\space \sqrt{\smash[b]{y}}\space \sum_{\substack{0<i<m\\0<j<n}}$$
x n e x u o y ∑ 0 < i < m 0 < j < n x_n\space e^x\space _u^o\space \sqrt{\smash[b]{y}}\space \sum_{\substack{0<i<m\\0<j<n}}
$$\forall\space \exists\space \nexists\space \in\space \notin\space \subset\space \supset\space \therefore\space \empty\space \because\space \implies\space \impliedby\space \iff$
∀ ∃ ∄ ∈ ∉ ⊂ ⊃ ∴ ∅ ∵ ⟹ ⟸ ⟺ \forall\space \exists\space \nexists\space \in\space \notin\space \subset\space \supset\space \therefore\space \empty\space \because\space \implies\space \impliedby\space \iff
$$\sum\space \int\space \prod\space \iint$$
∑ ∫ ∏ ∬ \sum\space \int\space \prod\space \iint
$$+-*\ast/\div\cdot\centerdot\circ\And\bmod$$
+ − ∗ ∗ / ÷ ⋅ ⋅ ∘ & m o d +-*\ast/\div\cdot\centerdot\circ\And\bmod
$$\frac{a}{b}\space \genfrac ( ] {2pt}{1}a{a+1}\space \cfrac{a}{1 + \cfrac{1}{b}}\sqrt{x}\sqrt[3]{x}$$
a b ( a a + 1 ] a 1 + 1 b x x 3 \frac{a}{b}\space \genfrac ( ] {2pt}{1}a{a+1}\space \cfrac{a}{1 + \cfrac{1}{b}}\sqrt{x}\sqrt[3]{x}
$$\binom{n}{k}\dbinom{n}{k}\tbinom{n}{k}{n\brace k}{n\brack k}$$
( n k ) ( n k ) ( n k ) { n k } [ n k ] \binom{n}{k}\dbinom{n}{k}\tbinom{n}{k}{n\brace k}{n\brack k}
$$\cos\sin\tan\varinjlim\varliminf\varlimsup\varprojlim\log\ln$$
cos ⁡ sin ⁡ tan ⁡ l i m → ⁡ l i m ‾ ⁡ l i m ‾ ⁡ l i m ← ⁡ log ⁡ ln ⁡ \cos\sin\tan\varinjlim\varliminf\varlimsup\varprojlim\log\ln
$$=\gt\geq\geqq\lt\leq\leqq\backepsilon\owns\in\parallel\subset\subseteq\subseteqq\supset\supseteq\supseteqq\sim$$
= > ≥ ≧ < ≤ ≦ ∍ ∋ ∈ ∥ ⊂ ⊆ ⫅ ⊃ ⊇ ⫆ ∼ =\gt\geq\geqq\lt\leq\leqq\backepsilon\owns\in\parallel\subset\subseteq\subseteqq\supset\supseteq\supseteqq\sim
$$\not=\neq\ngeq\ngeqslant\ngeqq\gneq\gneqq\nless\nleq\nleqq\notni\notin\nparallel\not\subset\nsubseteq\nsubseteqq\not\supset\nsupseteq\nsupseteqq\nsim$$
≠ ≠ ≱ ≱ ≱ ⪈ ≩ ≮ ≰ ≰ ∌ ∉ ∦ ⊄ ⊈ ⊈ ⊅ ⊉ ⊉ ≁ \not=\neq\ngeq\ngeqslant\ngeqq\gneq\gneqq\nless\nleq\nleqq\notni\notin\nparallel\not\subset\nsubseteq\nsubseteqq\not\supset\nsupseteq\nsupseteqq\nsim
$$\darr\Darr\uarr\Uarr\dashleftarrow\dashrightarrow\longleftarrow\longrightarrow\harr\Harr\iff\impliedby\implies\larr\Larr\rarr\rArr\mapsto$$
↓ ⇓ ↑ ⇑ ⇠ ⇢ ⟵ ⟶ ↔ ⇔ ⟺ ⟸ ⟹ ← ⇐ → ⇒ ↦ \darr\Darr\uarr\Uarr\dashleftarrow\dashrightarrow\longleftarrow\longrightarrow\harr\Harr\iff\impliedby\implies\larr\Larr\rarr\rArr\mapsto
$$\circlearrowleft\circlearrowright\curvearrowleft\curvearrowright\swarrow\searrow\nearrow\nwarrow\looparrowleft\looparrowright$$
↺ ↻ ↶ ↷ ↙ ↘ ↗ ↖ ↫ ↬ \circlearrowleft\circlearrowright\curvearrowleft\curvearrowright\swarrow\searrow\nearrow\nwarrow\looparrowleft\looparrowright
$$\xleftarrow{abc}\space\xrightarrow[under]{over}\space\xleftrightarrow{abc}\space\xLeftarrow{abc}\space\xRightarrow{abc}\space\xLeftrightarrow{abc}\space\xmapsto{abc}\space\xlongequal{abc}$$
← a b c → u n d e r o v e r ↔ a b c ⇐ a b c ⇒ a b c ⇔ a b c ↦ a b c = a b c \xleftarrow{abc}\space\xrightarrow[under]{over}\space\xleftrightarrow{abc}\space\xLeftarrow{abc}\space\xRightarrow{abc}\space\xLeftrightarrow{abc}\space\xmapsto{abc}\space\xlongequal{abc}
$$\bra{\phi}\space\ket{\psi}\space \braket{\phi|\psi}\space \braket{ϕ|\frac{∂^2}{∂ t^2}|ψ}$$
⟨ ϕ ∣ ∣ ψ ⟩ ⟨ ϕ ∣ ψ ⟩ ⟨ ϕ ∣ ∂ 2 ∂ t 2 ∣ ψ ⟩ \bra{\phi}\space\ket{\psi}\space \braket{\phi|\psi}\space \braket{ϕ|\frac{∂^2}{∂ t^2}|ψ}
$$\textcolor{blue}{F=ma}\textcolor{#228B22}{F=ma}\colorbox{aqua}{$F=ma$}\fcolorbox{red}{aqua}{$F=ma$}$$
F = m a F = m a F = m a F = m a \textcolor{blue}{F=ma}\textcolor{#228B22}{F=ma}\colorbox{aqua}{$F=ma$}\fcolorbox{red}{aqua}{$F=ma$}
$$\bold{Ab0}\textit{Ab0}\Bbb{AB}\frak{Ab0}\mathcal{AB0}\mathscr{AB}$$
A b 0 Ab0 A B A b 0 A B 0 A B \bold{Ab0}\textit{Ab0}\Bbb{AB}\frak{Ab0}\mathcal{AB0}\mathscr{AB}
$$\Huge AB\huge AB\LARGE AB\Large AB\large AB\normalsize AB\small AB\footnotesize AB\scriptsize AB\tiny AB$$
A B A B A B A B A B A B A B A B A B A B \Huge AB\huge AB\LARGE AB\Large AB\large AB\normalsize AB\small AB\footnotesize AB\scriptsize AB\tiny AB
$$\displaystyle\sum_{i=1}^n\space \textstyle\sum_{i=1}^n\space \lim\limits_x\space \lim\nolimits_x$$
∑ i = 1 n ∑ i = 1 n lim ⁡ x lim ⁡ x \displaystyle\sum_{i=1}^n\space \textstyle\sum_{i=1}^n\space \lim\limits_x\space \lim\nolimits_x
$$\text{--}\backprime\prime\copyright\circledR\dots\ddots\vdots\square\blacksquare\triangle\triangledown\triangleleft\triangleright\diamond\lozenge\clubs\spades\hearts\infty\nabla\angle\measuredangle\text{\textdollar}\pounds\surd\degree\mho\KaTeX$$
– ‵ ′ © ® … ⋱ ⋮ □ ■ △ ▽ ◃ ▹ ⋄ ◊ ♣ ♠ ♡ ∞ ∇ ∠ ∡ $ £ √ ° ℧ KaTeX \text{--}\backprime\prime\copyright\circledR\dots\ddots\vdots\square\blacksquare\triangle\triangledown\triangleleft\triangleright\diamond\lozenge\clubs\spades\hearts\infty\nabla\angle\measuredangle\text{\textdollar}\pounds\surd\degree\mho\KaTeX

返回目錄

二十、Draw Diagrams With Markdown

返回目錄

使用Mermaid工具可以輕易化出圖表、流程圖，並在網頁上顯示。直接看範例實作吧!

(20.1) Sequence Diagrams

返回目錄

有關更多詳細信息，請參閱 這些說明 。 

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

(20.2) Flowcharts

返回目錄

有關更多詳細信息，請參閱 這些說明 

graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

(20.3) Gantt Charts

返回目錄

有關更多詳細信息，請參閱 這些說明 

%% Example with selection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

(20.4) Class Diagrams

返回目錄

有關更多詳細信息，請參閱 這些說明 

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

(20.5) State Diagrams

返回目錄

有關更多詳細信息，請參閱 這些說明 

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

(20.6) Pie Charts

返回目錄

有關更多詳細信息，請參閱 這些說明 

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150

(20.7) Requirement Diagram

返回目錄

A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.

有關更多詳細信息，請參閱 這些說明 

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

(20.8) Gitgraph Diagrams / Commit Flow

返回目錄

A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

有關更多詳細信息，請參閱 這些說明 

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

(20.9) Timeline Diagram

返回目錄

有關更多詳細信息，請參閱 這些說明 

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

(20.10) Quadrant Chart

返回目錄

有關更多詳細信息，請參閱 這些說明 

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

(20.11) Sankey diagram

返回目錄

有關更多詳細信息，請參閱 這些說明 

---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366

(20.12) XY Chart

返回目錄

有關更多詳細信息，請參閱 這些說明 

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Mermaid客製化版面

返回目錄

概述

返回目錄

您可以透過新增自訂 CSS 來更改Mermaid配置，支援的選項包括：

請注意，如果您匯出的文件的主題不是目前使用的主題，則某些Mermaid將不會套用於匯出的 HTML/PDF/圖像。例如，如果您目前使用它們 Github，但在匯出到 PDF 時，您為 PDF 匯出設定主題 YYY，並且 YYY.css 定義 --mermaid-sequence-numbers: on，則 --mermaid-sequence-numbers: on不會應用於導出的PDF。

圖表對齊

返回目錄

您可以在「新增自訂 CSS」之後新增以下自訂 CSS 以左對齊圖表。

Mermaid Theme 主題

返回目錄

新增 CSS --mermaid-theme 變數來快速定義主題，值可以是 base、default、dark、forest、neutral、night（夜間主題中使用的），例如：

CSS Mermaid Demo Auto Numbering
:root {--mermaid-theme:dark;}
Screen Shot 2020-12-05 at 17.08.46
:root {--mermaid-theme:neutral;}
Screen Shot 2020-12-05 at 17.09.42
:root {--mermaid-theme:forest;}
Screen Shot 2020-12-05 at 17.10.11

自動編號

返回目錄

新增 --mermaid-sequence-numbers: on;在 Custom CSS 中將為 mermaid 中的序列啟用自動編號：

–mermaid-sequence-numbers:off –mermaid-sequence-numbers:on
Screen Shot 2021-04-05 at 23.08.37
Screen Shot 2021-04-05 at 23.20.31

流程圖曲線

返回目錄

新增 --mermaid-flowchart-curve: basis 已顯示不同的曲線.

–mermaid-flowchart-curve: linear; –mermaid-flowchart-curve: basis –mermaid-flowchart-curve: natural; –mermaid-flowchart-curve: step;
Screen Shot 2021-04-05 at 23.25.412
Screen Shot 2021-04-05 at 23.30.11
Screen Shot 2021-04-05 at 23.28.06
Screen Shot 2021-04-05 at 23.28.52

Gantt Padding

返回目錄

| –mermaid–gantt-left-padding:75 | –mermaid–gantt-left-padding:200 | |

Screen Shot 2021-04-05 at 23.33.31
|
Screen Shot 2021-04-05 at 23.33.00

Inline Mermaid Config

返回目錄

You can add %%{init: [options]}%% in the first line of mermaid diagram to config mermaid details like below: 您可以在Mermaid圖的第一行添加 %%{init: [options]}%% 來配置Mermaid詳細信息，如下所示：

Screen Shot 2022-08-19 at 16.04.36


Footer

返回目錄

展示連結跳轉區域，點擊 返回 。

  1. This is the first footnote. ↩︎

  2. Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like. ↩︎

at
Labels:

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)