原文地址：https://www.wjcms.net/archives/%E4%BA%94%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9Amarkdown%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95 寫在前面的話 寫在越來越多的人使用markdow ...
原文地址：https://www.wjcms.net/archives/五分鐘學會markdown基本語法
寫在前面的話
寫在越來越多的人使用markdown編輯器，是因為它比較簡潔方便快捷，能滿足大家的需要，今天我們就一起來看一下markdown的基本語法。
特別提示：後面都需要加上半形空格才生效。
標題
在想要設置為標題的文字前面加# 來表示，一個#是一級標題，二個#是二級標題，以此類推。支持六級標題。
示例：
# 標題H1
## 標題H2
### 標題H3
#### 標題H4
##### 標題H5
###### 標題H5
效果如下：
標題H1
標題H2
標題H3
標題H4
標題H5
標題H5
字元效果和橫線等
實例：
----
~~刪除線~~ <s>刪除線（開啟識別HTML標簽時）</s>
*斜體字* _斜體字_
**粗體** __粗體__
***粗斜體*** ___粗斜體___
上標：X<sub>2</sub>，下標：O<sup>2</sup>
**縮寫(同HTML的abbr標簽)**
> 即更長的單詞或短語的縮寫形式，前提是開啟識別HTML標簽時，已預設開啟
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
效果如下：
字元效果和橫線等
刪除線 刪除線（開啟識別HTML標簽時）
斜體字 斜體字
粗體 粗體
粗斜體 粗斜體
上標：X2，下標：O2
縮寫(同HTML的abbr標簽)
即更長的單詞或短語的縮寫形式，前提是開啟識別HTML標簽時，已預設開啟
The HTML specification is maintained by the W3C.
引用 Blockquotes
在引用的文字前加>即可。引用也可以嵌套，如加兩個>>三個>>>
實例：
> 引用文本 Blockquotes
> 引用：如果想要插入空白換行`即<br />標簽`，在插入處先鍵入兩個以上的空格然後回車即可，[普通鏈接](https://www.wjcms.net/)。
效果如下：
引用文本 Blockquotes
引用：如果想要插入空白換行
即<br />標簽，在插入處先鍵入兩個以上的空格然後回車即可，普通鏈接。
錨點與鏈接 Links
實例：
[普通鏈接](https://www.wjcms.net/)
[普通鏈接帶標題](https://www.wjcms.net/ "普通鏈接帶標題")
直接鏈接：<https://www.wjcms.net/>
[錨點鏈接][maodian-id]
[maodian-id]: https://www.wjcms.net/
[mailto:[email protected]](mailto:[email protected])
GFM a-tail link @wjcms
郵箱地址自動鏈接 [email protected] [email protected]
> @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
效果如下：
