工作效率-十五分鐘讓你快速學習Markdown語法到精通排版實踐備忘

關注「WeiyiGeek」公眾號

設為「特別關注」每天帶你玩轉網路安全運維、應用開發、物聯網IOT學習！

希望各位看友【關注、點贊、評論、收藏、投幣】，助力每一個夢想。

帥哥（靚仔）、美女，點個關注後續不迷路

文章目錄:
0x00 前言簡述

  • Markdown 初識
  • Markdown 特點
  • Markdown 客戶端

0x01 語法學習

  • 段落換行
  • 目錄標題
  • 文字標記、粗體、斜體
  • 上下劃線、分割線、上下標
  • 表格
  • 有序、無序、任務列表
  • 鏈接、錨、縮寫、腳註、引用
  • 圖片、音樂、影片、地圖、內容摺疊
  • 嵌入程式碼
  • 特殊符號、Emoji
  • 位置、字體、字型大小、顏色
  • 數學公式
  • 流程圖
  • 序列圖
  • 甘特圖

0x00 前言簡述

Markdown 初識

描述: Markdown 是一種輕量級標記語言於2004年推出，創始人為約翰·格魯伯（John Gruber）。 它允許人們使用易讀易寫的純文本格式編寫文檔，然後轉換成有效的 XHTML（或者HTML）文檔。

Markdown 的目標是實現「易讀易寫」，通過在文檔中的某部分加入特殊的字元，用來修飾文檔中的文本，

部落客使用Markdown一段時間以後，才發現Markdown原來那麼強大有用、並且能提升工作效率，比如：

  • github、stackoverflow、技術論壇
  • 寫部落格、寫日記、電子書
  • 編輯微信公眾號文章
  • 編輯日常技術文章

所以部落客將常用的Markdown語法整理處理，方便大家入門學習以及備忘。

本文來源: //blog.weiyigeek.top 🐱

Markdown 特點

描述: 由 Markdown 語法的目標是：成為一種適用於網路的書寫語言，對於我們來說它是兼容 HTML 的。其主要特點 (輕量化、跨平台、易讀易寫 )

Markdown 不是想要取代 HTML，甚至也沒有要和它相近，它的語法種類很少，只對應 HTML 標記的一小部分，Markdown 的構想不是要使得 HTML 文檔更容易書寫。

在我看來， HTML 已經很容易寫了，Markdown 的理念是，能讓文檔更容易讀、寫和隨意改。

HTML 是一種發布的格式，Markdown 是一種書寫的格式，就這樣，Markdown 的格式語法只涵蓋純文本可以涵蓋的範圍。

不在 Markdown 涵蓋範圍之內的標籤，都可以直接在文檔裡面用 HTML 撰寫，不需要額外標註這是 HTML 或是 Markdown；只要直接加標籤就可以了。

要制約的只有一些 HTML 區塊元素――比如<div>、<table>、 <pre>、 <p> 等標籤，必須在前後加上空行與其它內容區隔開，還要求它們的開始標籤與結尾標籤不能用製表符或空格來縮進。

Markdown 的生成器有足夠智慧，不會在 HTML 區塊標籤外加上不必要的<p>標籤。

例子如下，在 Markdown 文件里加上一段 HTML 表格, 這是一個普通段落。

<!-- # HTML -->
<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

<!-- MD -->

|Header|
|:------:|
|Foo|

溫馨提示: 在 HTML 區塊標籤間的 Markdown 格式語法將不會被處理，比如，你在 HTML 區塊內使用 Markdown 樣式的*強調*會沒有效果。HTML 的區段（行內）標籤如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是標題里隨意使用，依照個人習慣，甚至可以不用 Markdown 格式，而直接採用 HTML 標籤來格式化。

舉例說明：
如果比較喜歡 HTML 的 <a> 或 <img> 標籤，可以直接使用這些標籤，而不用 Markdown 提供的鏈接或是影像標籤語法，和處在 HTML 區塊標籤間不同，Markdown 語法在 HTML 區段標籤間是有效的。

特殊字元自動轉換:
在 HTML 文件中，有兩個字元需要特殊處理： < 和 & 。 < 符號用於起始標籤，&符號則用於標記 HTML 實體，如果你只是想要顯示這些字元的原型，你必須要使用實體的形式，像是(<) &lt;和 (&) &amp;。
& 字元尤其讓網路文檔編寫者受折磨，如果你要打「AT&T」 ，你必須要寫成「AT&amp;T」。

而網址中的 & 字元也要轉換，比如你要鏈接到：//images.google.com/images?num=30&q=larry+bird, 你必須要把網址轉換寫為：//images.google.com/images?num=30&amp;q=larry+bird.

才能放到鏈接標籤的 href 屬性里,不用說也知道這很容易忽略，這也可能是 HTML 標準檢驗所檢查到的錯誤中，數量最多的。

Markdown 讓你可以自然地書寫字元，需要轉換的由它來處理好了，如果你使用的 & 字元是 HTML 字元實體的一部分，它會保留原狀，否則它會被轉換成 &。

所以你如果要在文檔中插入一個版權符號 ©，你可以這樣寫：&copy; Markdown 會保留它不動。而若你寫AT&TMarkdown 就會將它轉為：AT&amp;T。

類似的狀況也會發生在 < 符號上，因為 Markdown 允許 兼容 HTML ，如果你是把 < 符號作為 HTML 標籤的定界符使用，那 Markdown 也不會對它做任何轉換，但是如果你寫：4 < 5 Markdown 將會把它轉換為： 4 &lt; 5

不過需要注意的是，code 範圍內，不論是行內還是區塊， < 和 & 兩個符號都一定會被轉換成 HTML 實體，這項特性讓你可以很容易地用 Markdown 寫 HTML code （和 HTML 相對而言， HTML 語法中，你要把所有的 < 和 & 都轉換為 HTML 實體，才能在 HTML 文件裡面寫出 HTML code。）

Markdown 客戶端

描述: 此節將會根據時間遞進（看部落客心情）進行更新。

Mac OS X
描述: 我強烈建議你用 Mou 這款免費且十分好用的 Markdown 編輯器，它支援實時預覽，既左邊是你編輯 Markdown 語言，右邊會實時的生成預覽效果。不僅如此，Mou 還有一些有趣的偏好設置（Preference），例如主題（Themes）與樣式（CSS），它們可以配置出訂製化的文本編輯效果與導出效果，如果你對自帶的主題與樣式不滿意還可以到 GitHub 上搜索其它愛好者為 Mou 編寫的更多主題樣式，導入的方式可以在偏好設置的 Themes 或 CSS 選項中 選擇 reload。

IOS
描述: 在端很多 app 早已經支援了 Markdown 錄入，例如 Drafts，Day One，iA writer 等，另外 Ulysses for iPad 現在已經上架，可以說是 iOS 平台最好的編輯器了。

Windows
描述: 有兩款還算不錯，一款叫做 MarkdownPad ，另一款叫做 MarkPad , 不過筆者此處推薦 VSCode + Markdown Preview Enhanced (插件) ，或者使用 Typora (貌似當下收費了)可以找之前不收費的版本, 一般來說使用基礎的足夠了。

MarkdownPad – //markdownpad.com/
typora – //typora.io/ (比較好用不然也不會收費)

Web 端

  • 51CTO / 簡書部落格 / 部落格園 / segmentfault
  • dillinger – 漂亮強大，支援md, html, pdf 文件導出，支援dropbox, onedrive，google drive, github. 來自國外，可能不夠穩定。

0x01 語法學習

段落換行

在講解Markdown語法時我們首先先提一下 段落和換行。

一個 Markdown 段落是由一個或多個連續的文本行組成，它的前後要有一個以上的空行（空行的定義是顯示上看起來像是空的，便會被視為空行, 即空白行表示另起一個段落。

比方說，若某一行只包含空格和製表符，則該行也會被視為空行）, 普通段落不該用空格或製表符來縮進。

Markdown 允許段落內的強迫換行（插入換行符），這個特性和其他大部分的 text-to-HTML 格式不一樣（包括 Movable Type 的「Convert Line Breaks」選項），其它的格式會把每個換行符都轉成<br/>標籤, 所以在換行時你可以通過<br/>進行換行（針對某些MD客戶端可能不會生效）。

換行: 單一段落( <p>) 用一個空白行, 連續兩個空格 會變成一個 <br>, 連續2個回車表示是空行.

空格:
1）兩個全形空格 ：因為一個全形空格（space）的寬度是整整一個漢字，輸入兩個全形空格正好是兩個漢字的寬度。
全形空格的輸入方法為：一般的中文輸入法都是按 shift + space，可以切換到全形模式下，輸完後再次按 shift + space 切換回正常輸入狀態。
2）使用特殊佔位符 ： 使用特殊佔位符，不同佔位符所佔空白是不一樣大的。

&ensp; or &#8194;  表示一個半形的空格
&emsp; or &#8195;  表示一個全形的空格
&emsp;&emsp;       兩個全形的空格（用的比較多）
&nbsp; or &#160;   不斷行的空白格

<!-- #解析結果 -->
  表示一個半形的空格
  表示一個全形的空格
   兩個全形的空格（用的比較多）
  不斷行的空白格

目錄標題

描述: Markdown 支援兩種標題的語法，類 Setext 和類 atx 形式, 並且可以使用[TOC]來顯示設置標題的文本並帶有跳轉功能。

標題-類 Setext: 是用底線的形式，利用 = （最高階標題）和 – （第二階標題）,任何數量的 = 和 – 都可以有效果

This is an H1
=============

This is an H2
-------------

標題-類 Atx 形式: 是在行首插入 1 到 6 個 # ，對應到標題 1 到 6 階，你可以選擇性地「閉合」類 atx 樣式的標題，這純粹只是美觀用的，若是覺得這樣看起來比較舒適，你就可以在行尾加上 #，而行尾的 # 數量也不用和開頭一樣（行首的井字元數量決定標題的階數）, 例如

# 這是 H1 #
## 這是 H2 ##
### 這是 H3 ###
....
###### 這是 H6 ######

目錄: 此語法支援根據標題生成文檔目錄, 注意有得Markdown解析器不區分TOC字母大小寫。

[toc]
[TOC]

# Heading
## Sub heading 1
Some nice text
## Sub heading 2
Some even nicer text

文字標記、粗體、斜體

文字標記: 使用==進行文字的標記，對應者HTML的mark。

<!-- 示例2 -->
==我是帶背景的標記==
<mark>marked</mark>

我是帶背景的標記

關鍵字標記: 行內程式碼使用反斜杠`表示，默認不會換行，分別對應html的code，pre標籤

<!-- 示例1 -->
`我是標記`
Use the `printf()` function.

Use the printf() function.

粗體和斜體：用星號*或者下劃線_ (注意無空格)

*這是文字斜體格式*  == _這是文字斜體格式_

**這是文字粗體格式**  ==   __這是文字粗體格式__

***這是文字粗斜體格式***   ==  ___這是文字粗斜體格式___

~~在文字上添加刪除線~~

文字引用: 如果需要引用某些內容，可以在第一行加上 「>」和一個空格，表示程式碼引用還可以嵌套, 並且引用的區塊內也可以使用其他的 Markdown 語法，包括標題、列表、程式碼區塊等：

> This is the first level of quoting.
>
>> This is nested blockquote. (嵌套的blockquote)
>
> Back to the first level.

>> 引用
 >> 引用中的引用

<!-- 嵌套其它 Markdown -->

> ## 這是一個標題。
> 
> 1.   這是第一行列表項。
> 2.   這是第二行列表項。
> 
> 給出一些例子程式碼：
> 
> return shell_exec("echo $input | $Markdown_script");

textare

上下劃線、分割線、上下標

上、下劃線: 原生沒有但是可以藉助Latex公式插件進行實現。

<!-- # 上劃線 -->
$\overline{\text{上劃線}}$

<!-- # 下劃線 -->
++inserted++
$\underline{\text{下劃線}}$
<u>下劃線</u>
<ins>inserted</ins>

分隔線: 在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格, 下面每種寫法都可以建立分隔線：

---  (常用)

***

- - -

* * *

*****

上、下標: 我們可以在Markdown使用兩個~包含字元渲染下標（sub），使用兩個^包含字元渲染上標（sup） 。

H~2~0  => H<sub>2</sub>0
29^th^ => 29<sup>th</sup>

渲染結果: H20 / 29th

表格

描述: Markdown 支援插入表格。

基礎語法

First Header | Second Header | Third Header
------------ | ------------- | ------------
Content Cell | Content Cell  | Content Cell
Content Cell | Content Cell  | Content Cell

表頭位置

居中 | 靠左 | 靠右
:---------:|:----------|---------:
weiyigeek | weiyigeek | weiyigeek

渲染結果:

居中 靠左 靠右
//www.weiyigeek.top //blog.weiyigeek.top //www.weiyigeek.top

有序、無序、任務列表

描述: Markdown 支援有序列表和無序列表, 使用*,+,-加上一個空格來表示 , 可以支援嵌套

有序列表: 用數字+英文點+空格來表示, 當列表內容很長，不需要手工輸入換行符，css控制段落的寬度，會自動的縮放的。

1. 有序項目1
2. 有序項目2 
4. 有序項目3

溫馨提示 Markdown會自動的排序從第一個數字順序，進行遞增所以你可以完全不用在意數字的正確性。

無序列表: 用星號*、加號+或是減號-在加空格來作為列表標記：

* 項目1
+ 項目2
- 項目3

例如，在md中，你可以選取文字後然後從選單中選擇增加引用階層。

*  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  Welcome to visit //weiyigeek.top

*  Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

Welcome to visit //blog.weiyigeek.top

任務列表: 如果需要標記某些待辦事項，可以使用以下語法：

- [ ] 未完成的事項1
- [ ] 未完成的事項2

- [x] 已完成事項1
- [x] 已完成事項2

鏈接、錨、縮寫、腳註、引用

行內鏈接: 為文字設置href與alt備註或者簡寫用尖括弧<>包裹url，這樣生成的url錨文本就是url本身, 但其標籤的屬性將會 rel="nofollow"。

[個人主頁鏈接](//weiyigeek.top "WeiyiGeek")

自動鏈接: Markdown 支援以比較簡短的自動鏈接形式來處理網址和電子郵件信箱，只需用 < > 包起來，Markdown 就會自動把它轉成鏈接。例如：

<//weiyigeek.top>
<[email protected]>

溫馨提示: 郵址的自動鏈接也很類似，只是 Markdown 會先做一個編碼轉換的過程，把文字字元轉成 16 進位碼的 HTML 實體，這樣的格式可以糊弄一些不好的郵址收集機器人，例如：[email protected]。

錨標記：可以把這個標記的鏈接內容定義出來；鏈接內容定義的形式為，下面這三種鏈接的定義都是相同：

<!-- # 示例1.鏈接跳轉 -->
This is [id] reference-style link.
[id]: //example.com/  "Optional Title Here"

<!-- # 示例2.數字形式 -->
I get 10 times more traffic from [Google][1] than from
[Yahoo][2] or [MSN][3].

  [1]: //google.com/        "Google"
  [2]: //search.yahoo.com/  "Yahoo Search"
  [3]: //search.msn.com/    "MSN Search"

<!-- # 示例3.鏈接名稱的方式 -->
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: //google.com/        "Google"
  [yahoo]:  //search.yahoo.com/  "Yahoo Search"
  [msn]:    //search.msn.com/    "MSN Search"

縮寫（abbr） : 為網頁中的文字創建一個描述介紹, 滑鼠放在文字上即可。

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium 
The HTML specification
is maintained by the W3C.

顯示結果:

The HTML specification
is maintained by the W3C.

腳註: [^footnote] 可以是任意英文字元,腳註的內容可以放在文章的任意位置（一般放最後），如果腳註顯示在文章末尾；腳註後方的鏈接可以直接跳轉回到加註的地方。

使用 Markdown[^1] 可以效率的書寫文檔，直接轉換成 HTML[^2], 你可以使用 Typora[^T] 軟體。
[^1]:Markdown 是一種純文本標記語言。
[^2]:HyperText Markup Language 超文本標記語言。
[^T]:Typora 官網 <//typora.io/>

結果展示:使用 Markdown[1] 可以效率的書寫文檔，直接轉換成 HTML[2], 你可以使用 Typora[3] 軟體。

圖片、音樂、影片、地圖、內容摺疊

圖片: 如果需要插入圖片需要給出圖片的鏈接，只是在中括弧前加嘆號.

<!-- 方式1. -->
![alt_text](//blog.weiyigeek.top/img/avatar.jpg "WeiyiGeek avatar")
![Alt text](/path/to/img.jpg)

<!-- 方式2. -->
[avatar]://blog.weiyigeek.top/img/avatar.jpg "WeiyiGeek avatar"
![WeiyiGeek][avatar]

音樂

<!-- 方式1.audio 標籤 -->
​<audio id="audio" controls="" preload="none">
  <source id="mp3" src="音頻地址">
</audio>

<audio src="audio.mp3" preload="auto" controls loop>
  你的瀏覽器不支援 audio 標籤。
</audio>

<!-- 方式2.iframe -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>

影片

<!-- 方式1.video 標籤, 原生僅支援播放 ogg/mp4/webm 格式 -->
<video src="//v2v.cc/320x240.ogg" controls loop>
  你的瀏覽器不支援 <code>video</code> 標籤。
</video>

<!-- 方式2.iframe -->
<iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

地圖: Markdown 中我們可以利用iframe標籤插入各地圖功能提供平台的地圖Api功能(//lbsyun.baidu.com/index.php?title=jspopularGL)。

<iframe
  src="//map.weiyigeek.top/baiduMap.html" 
  width="600" 
  height="300" 
  frameborder="0" 
  scrolling="no">
</iframe>

內容摺疊

<details> <summary>Title</summary>
contents ...
</details>

結果展示:

Title

contents …

溫馨提示: 內容裡面可以嵌套使用 Markdown 語法和 HTML 語法。

嵌入程式碼

程式碼段落：則是在每行文字前加4個空格或者1個縮進符[Tab]鍵表示。

[Tab]鍵 <p> Tab </p>
    <p> 前面四個空格 </p>

嵌入程式碼塊: 以3個反引號`為開始與結束，反引號鍵一般在鍵盤按鍵1左側，需要在英文狀態下輸入。

  • 在反引號之後加上腳本程式語言名稱就會進行程式碼高亮的處理，例如: python、php、go、bash, 不一定所有的Markdown都支援。

“`python
import os
print ‘something’
“`

  • 如果語言後面多一個:n，則會顯示程式碼的行號，也是不一定所有的Markdown都支援。

“`ruby:n
def add(a, b)
return a + b
end
“`

溫馨提示: 程式碼的高亮的具體樣式是由CSS控制的，由Pygments生成,你可以訪問Pygments Styles查看常見的幾種風格。

特殊符號、Emoji

描述: 特殊字元是相對於傳統或常用的符號外，使用頻率較少字元且難以直接輸入的符號。比如數學符號；單位符號；製表符等。

  • 常用排版： ▌▍◆★☆☁➤➜❤➊➋➌
  • TodoList： ✅☑✓✔√☓☒✘ㄨ✕✖✗❌❎
  • emoji：🌹🍀🌙🍂🍃🌷💎🔥⭐🍄🏆

轉義：: 利用反斜杠來插入一些在語法中有其它意義的符號, 例如：如果你想要用星號加在文字旁邊的方式來做出強調效果（但不用標籤），你可以在星號的前面加上反斜杠：\*literal asterisks\*

Markdown 支援以下這些符號前面加上反斜杠來幫助插入普通的符號：

\   反斜線
`   反引號
*   星號
_   底線
{}  花括弧
[]  方括弧
()  括弧
#   井字型大小
+   加號
-   減號
.   英文句點
!   驚嘆號

HTML 符號: HTML 支援的特殊符號：數學符號 / 希臘字母 / 其他 (//www.w3school.com.cn/tags/html_ref_symbols.html)

←	left arrow	        &larr;	&#8592;
↑	up arrow	        &uarr;	&#8593;
→	right arrow	        &rarr;	&#8594;
↓	down arrow	        &darr;	&#8595;
↔	left right arrow	&harr;	&#8596;
↵	carriage return arrow	&crarr;	&#8629;

Emoji: Markdown 是支援Emoji的其語法為:emoji:,所有表情符號名稱都是官方 Unicode 字元資料庫或 CLDR 名稱, 更多官方Emoji參考 (//emojipedia.org/), Markdown 原生支援的 Emoji 參考 (//www.webfx.com/tools/emoji-cheat-sheet/) , 值得注意不一定全部瀏覽器都支援。

:100:
:smile:	
:kissing_heart:	
:smiley: 
:heart:	
:one:	
:o:	
:heavy_check_mark:	
:fire:

結果展示:
💯 😄 😘 😃 ❤️ 1️⃣ ⭕ ✔️ 🔥

位置、字體、字型大小、顏色

<center>文字居中</center>
<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font>
<font face="STCAIYUN">我是華文彩雲</font>
<font color=#0099ff size=12 face="黑體">黑體</font>
<font color=#00ffff size=3>null</font>
<font color=gray size=5>gray</font>
<table>
    <tr>
      <td bgcolor=#FF4500>背景色是：Orange紅色，16進位顏色值：#FF4500，rgb(255, 69, 0)</td>
    </tr>
</table>

渲染結果:
image.png

數學公式

描述: Markdown 是通過數學公式渲染的插件來解析支援公式的，其中最常用的就是 Katex, 如果主題沒有支援，可以在系統設置的 自定義內容頁 head： 中加入以下程式碼：<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/katex.min.css" />

如果需要插入數學公式，可以使用以下語法：
“`math
E = mc^2
U = IR
“`
顯示結果:

E = mc^2
U = IR

可以創建行內公式，例如：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 和 $\mathbf{y} = \mathbf{X}\boldsymbol\beta + \boldsymbol\varepsilon$

\(\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N\)

\(\mathbf{y} = \mathbf{X}\boldsymbol\beta + \boldsymbol\varepsilon\)

或者塊級公式，例如：$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

\[x = \dfrac{-b \pm \sqrt{b^2 – 4ac}}{2a}
\]

例如，一寫簡單的數學公式

$\sqrt{3x-1}+(1+x)^2$


<!-- 求圓的面積 -->
$$
S=\pi r^2
$$

$$ x {=} y^2 + 1 $$

$$
\left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi
$$

\[S=\pi r^2
\]

\[x {=} y^2 + 1
\]

\[\left [ – \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi
\]

擴展知識: 有的Markdown解析同時也支援 HTML 屬性。

$$ 
(x+1)^2 = \class{hidden}{(x+1)(x+1)} 
$$

$$
(x+1)^2 = \cssId{step1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

溫馨提示: 請注意，Markdown 特殊字元需要使用反斜杠進行轉義，因此它們被視為數學而不是 Markdown。 例如，* 和 _ 分別變為 * 和 _。

流程圖

支援渲染 Mermaid 圖表為 svg 內容，並直接保存渲染後的內容，所以無需在前台引入 Mermaid 插件進行渲染。

如果需要插入流程圖，可以使用以下語法, 但是需要注意不一定所有Markdown

橫向流程圖：

  • 示例1

“`mermaid
graph LR;
A–>B
B–>C
B–>D
“`

渲染結果:

graph LR;
A–>B
B–>C
B–>D
  • 示例2

“`mermaid
graph LR;
A[Hard edge] –>|Label| B(Round edge)
B –> C{Decision}
C –>|One| D[Result one]
C –>|Two| E[Result two]
“`

渲染結果:

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

縱向流程圖:

  • 示例1
    “`mermaid
    graph TD;
    A[christmas] –>B(Go shopping)
    B –> C{Let me think}
    C –>|One| D[Laptop]
    C –>|Two| E[iPhone]
    C –>|Three|F[Car]
    “`

渲染結果:

graph TD;
A–>B;
A–>C;
B–>D;
C–>D;
  • 示例2

“`mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John–>>Alice: Great!
John->>Bob: How about you?
Bob–>>John: Jolly good!
“`

渲染結果:

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John–>>Alice: Great!
John->>Bob: How about you?
Bob–>>John: Jolly good!

image.png

程式碼流程圖

“`flow
st=>start: Start //start:開始
e=>end: End //end:結束
op1=>operation: My Operation //操作框
sub1=>subroutine: My Subroutine //子程式
cond=>condition: Yes or No? //條件判斷框
io=>inputoutput: catch something… //輸入輸出框

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
“`

渲染效果：

st=>start: Start  
e=>end: End     
op1=>operation: My Operation  
sub1=>subroutine: My Subroutine 
cond=>condition: Yes or No? 
io=>inputoutput: catch something...  
    
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

序列圖

例如，如果需要插入序列圖，可以使用以下語法：
示例1

“`mermaid
sequenceDiagram
Client->>Server: How are you?
Server->>Client: Great!
“`

渲染結果:

sequenceDiagram
Client->>Server: How are you?
Server->>Client: Great!

image.png

示例2
“`sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am good thanks!
“`

渲染結果:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

image.png

非常注意：

    1. 關鍵詞（start、end、operation、subroutine、condition和inputoutput）後的冒號後要緊跟一個空格。
    1. 使用->來連接兩個元素，對於condition類型，有yes和no兩個分支，如示例中的cond(yes)和cond(no)。

更多關於流程圖的語法說明：//adrai.github.io/flowchart.js/

甘特圖

描述: 如果需要插入甘特圖，可以使用以下語法：

示例1

“`mermaid
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
“`

渲染結果:

gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d

image.png
更多關於時序圖的語法說明：//bramp.github.io/js-sequence-diagrams/

原文地址: 十五分鐘讓你快速學習Markdown語法到精通排版實踐

本文至此完畢，更多技術文章，盡情期待下一章節！

【WeiyiGeek Blog 個人部落格 – 為了能到遠方，腳下的每一步都不能少 】

歡迎各位志同道合的朋友一起學習交流，如文章有誤請在下方留下您寶貴的經驗知識!

作者主頁: 【 //weiyigeek.top】
部落格地址: 【 //blog.weiyigeek.top 】

WeiyiGeek Blog 部落格 - 為了能到遠方，腳下的每一步都不能少

專欄書寫不易，如果您覺得這個專欄還不錯的，請給這篇專欄 【點個贊、投個幣、收個藏、關個注，轉個發，留個言】(人間六大情)，這將對我的肯定，謝謝！。

  • echo “【點個贊】，動動你那粗壯的拇指或者芊芊玉手，親！”

  • printf(“%s”, “【投個幣】，萬水千山總是情，投個硬幣行不行，親！”)

  • fmt.Printf(“【收個藏】，閱後即焚不吃灰，親！”)

  • console.info(“【轉個發】，讓更多的志同道合的朋友一起學習交流，親！”)

  • System.out.println(“【關個注】，後續瀏覽查看不迷路喲，親！”)

  • cout << “【留個言】，文章寫得好不好、有沒有錯誤，一定要留言喲，親! ” << endl;

//blog.weiyigeek.top

更多網路安全、系統運維、應用開發、物聯網實踐、網路工程、全棧文章，盡在 //blog.weiyigeek.top 之中，謝謝各位看又支援！

  1. Markdown 是一種純文本標記語言。 ↩︎

  2. HyperText Markup Language 超文本標記語言。 ↩︎

  3. Typora 官網 //typora.io/ ↩︎

Tags:

VirMach 便宜 VPS

QNews

QNews