markdown的語法總結
阿新 • • 發佈：2021-11-01
寫在前面的話
寫在越來越多的人使用markdown編輯器，是因為它比較簡潔方便快捷，能滿足大家的需要，今天我們就一起來看一下markdown的基本語法。
特別提示：後面都需要加上半形空格才生效。
標題
在想要設定為標題的文字前面加# 來表示，一個#是一級標題，二個#是二級標題，以此類推。支援六級標題。
示例：
# 標題H1
## 標題H2
### 標題H3
#### 標題H4
##### 標題H5
###### 標題H5
效果如下：
標題H1
標題H2
標題H3
標題H4
標題H5
標題H5
字元效果和橫線等
例項：
----
~~刪除線~~ <s>刪除線（開啟識別HTML標籤時）</s 效果如下：
字元效果和橫線等
刪除線 刪除線（開啟識別HTML標籤時）
斜體字 斜體字
粗體 粗體
粗斜體 粗斜體
上標：X2，下標：O2
縮寫(同HTML的abbr標籤)
即更長的單詞或短語的縮寫形式，前提是開啟識別HTML標籤時，已預設開啟
The HTML specification is maintained by the W3C.
引用 Blockquotes
在引用的文字前加>即可。引用也可以巢狀，如加兩個>>三個>>>
例項：
> 引用文字 Blockquotes
> 引用：如果想要插入空白換行`即<br 效果如下：
引用文字 Blockquotes
引用：如果想要插入空白換行
即<br />標籤，在插入處先鍵入兩個以上的空格然後回車即可，普通連結。
錨點與連結 Links
例項：
[普通連結](https://www.wjcms.net/)
[普通連結帶標題](https://www.wjcms.net/ "普通連結帶標題")
直接連結：<https://www.wjcms.net/>
[錨點連結][maodian-id]
[maodian-id]: https://www.wjcms.net/
[mailto:wjcms@qq.com](mailto:wjcms@qq.com)
GFM a-tail link @wjcms
郵箱地址自動連結 wjcms@qq.com www@vip.qq.com
> @wjcms
效果如下：
普通連結
普通連結帶標題
直接連結：https://www.wjcms.net/
[錨點連結][maodian-id]
[maodian-id]: https://www.wjcms.net/
mailto:[email protected]
GFM a-tail link @wjcms
郵箱地址自動連結 [email protected] [email protected]
@wjcms
多語言程式碼高亮 Codes
行內程式碼 Inline code
執行命令：`npm install`
效果：
執行命令：npm install
縮排風格
即縮排四個空格，也做為實現類似 <pre> 預格式化文字 ( Preformatted Text ) 的功能。
<?php
echo "Hello world!";
?>
預格式化文字：
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
JS程式碼
function test() {
console.log("Hello world!");
}
HTML 程式碼 HTML codes
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<meta name="keywords" content="Editor.md, Markdown, Editor" />
<title>Hello world!</title>
<style type="text/css">
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
ul{list-style: none;}
img{border:none;vertical-align: middle;}
</style>
</head>
<body>
<h1 class="text-xxl">Hello world!</h1>
<p class="text-green">Plain text</p>
</body>
</html>
圖片
語法：
圖片alt就是顯示在圖片下面的文字，相當於對圖片內容的解釋。
圖片title是圖片的標題，當滑鼠移到圖片上時顯示的內容。title可加可不加
示例：
效果如下：
列表
無序列表（減號）Unordered Lists (-)
- 列表一
- 列表二
- 列表三
效果：
- 列表一
- 列表二
- 列表三
無序列表（星號）Unordered Lists (*)
* 列表一
* 列表二
* 列表三
效果：
- 列表一
- 列表二
- 列表三
無序列表（加號和巢狀）Unordered Lists (+)
+ 列表一
+ 列表二
+ 列表二-1
+ 列表二-2
+ 列表二-3
+ 列表三
* 列表一
* 列表二
* 列表三
效果：
- 列表一
- 列表二
- 列表二-1
- 列表二-2
- 列表二-3
- 列表三
- 列表一
- 列表二
- 列表三
有序列表 Ordered Lists (-)
1. 第一行
2. 第二行
3. 第三行
效果：
- 第一行
- 第二行
- 第三行
GFM task list
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
效果：
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
繪製表格 Tables
語法：
表頭|表頭|表頭
---|:--:|---:
內容|內容|內容
內容|內容|內容
| 專案 | 價格 | 數量 |
| -------- | -----: | :----: |
| 計算機 | $1600 | 5 |
| 手機 | $12 | 12 |
| 管線 | $1 | 234 |
效果：
| 專案 | 價格 | 數量 |
|---|---|---|
| 計算機 | $1600 | 5 |
| 手機 | $12 | 12 |
| 管線 | $1 | 234 |
特殊符號 HTML Entities Codes
© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
效果：
© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
繪製流程圖 Flowchart
st=>start: 使用者登陸
op=>operation: 登陸操作
cond=>condition: 登陸成功 Yes or No?
e=>end: 進入後臺
st->op->cond
cond(yes)->e
cond(no)->op
效果如下：