簡明教程：https://ouweiya.gitbooks.io/markdown/javascript
1.標題
代碼html
注：# 後面保持空格java
# h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ####### h7 // 錯誤代碼 ######## h8 // 錯誤代碼 ######### h9 // 錯誤代碼 ########## h10 // 錯誤代碼
演示git
h1
h2
h3
h4
h5
h6
####### h7
######## h8
######### h9
########## h10github
2.分級標題
代碼
注：= - 最少能夠只寫一個，兼容性通常web
一級標題 ====================== 二級標題 ---------------------
演示markdown
3.TOC
注：根據標題生成目錄，兼容性通常app
代碼框架
[TOC]
演示工具
4.引用
代碼1(單行式)
> hello world!
演示
hello world!
代碼2(多行式)
> hello world! hello world! hello world!
或者
> hello world! > hello world! > hello world!
演示
相同的結果
hello world!
hello world!
hello world!
代碼3(多層嵌套)
> aaaaaaaaa >> bbbbbbbbb >>> cccccccccc
演示
aaaaaaaaa
bbbbbbbbb
cccccccccc
5.行內標記
注：用 ` 標記代碼塊將變成一行
代碼
標記以外`hello world`標記以外
演示
標記以外hello world標記以外
錯誤代碼
注：不一樣平臺錯誤略有差別
標記以外 `
< div>
< div></div>
< div></div>
< div></div>
< /div>
`標記以外
演示
6.代碼塊
注：與上行距離一空行
代碼1(```)
注：用```生成塊
```
<div>
<div></div>
<div></div>
<div></div>
</div>
```
演示
<div>
<div></div>
<div></div>
<div></div>
</div>
代碼2(Tab)
注： Tab縮進
我是文字……<div> <div></div> <div></div> <div></div> </div><div> <div></div> <div></div> <div></div> </div>
演示
<div>
<div></div>
<div></div>
<div></div>
</div>
代碼3(自定義語法)
注：根據不一樣的語言配置不一樣的代碼着色
```javascript
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
```
演示
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
7.插入連接
代碼1(內鏈式)
注：{:target="_blank"}跳轉方式兼容性通常 ，多數第三方平臺不支持跳轉
[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}
演示
代碼2(引用式)
[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/ "百度二下"
演示
8.插入圖片
代碼1(內鏈式)
[圖片上傳失敗...(image-90880b-1542510791300)]
演示
代碼2(引用式)
![name][01] [01]: ./01.png '描述'
演示
9.插入圖片帶有連接
代碼
[[圖片上傳失敗...(image-f83b77-1542510791300)]](http://www.baidu.com){:target="_blank"} // 內鏈式[[圖片上傳失敗...(image-4dc956-1542510791300)]][5] // 引用式 [5]: http://www.baidu.com
演示
[
[5]: http://www.baidu.com
10.視頻插入
注：Markdown 語法是不支持直接插入視頻的
廣泛的作法是 插入HTML的 iframe 框架，經過網站自帶的分享功能獲取，若是沒有能夠嘗試第二種方法
第二是僞造播放界面，實質是插入視頻圖片，而後經過點擊跳轉到相關頁面
代碼1
注：多數第三方平臺不支持插入<iframe>視頻
youku
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>
演示
代碼2
[[圖片上傳失敗...(image-49aefe-1542510791300)]](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}
演示
11.序表
代碼1(有序)
注：序列.後 保持空格
1. one 2. two 3. three
演示
- one
- two
- three
代碼2(無序)
* one * two * three
演示
- one
- two
- three
代碼3(序表嵌套)
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
演示
- one
- one-1
- two-2
- two
- two-1
- two-2
代碼4(序表嵌套代碼塊)
注：換行+兩個Tab
* onevar a = 10; // 與上行保持空行並 遞進縮進var a = 10; // 與上行保持空行並 遞進縮進
演示：
-
one
var a = 10;
12.任務列表
注：兼容性通常 要隔開一行
代碼
演示
13.表情
注：兼容通常
14.表格
注： : 表明對齊方式 ,** : 與 | 之間不要有空格**，不然對齊會有些不兼容
代碼1
| a | b | c | |:-------:|:------------- | ----------:| | 居中 | 左對齊 | 右對齊 | |=========|===============|============|
演示
| a | b | c |
|---|---|---|
| 居中 | 左對齊 | 右對齊 |
| ========= | =============== | ============ |
代碼2(簡約寫法)
a | b | c
:-:|:- |-:
居中 | 左對齊 | 右對齊
============|=================|=============
演示
| a | b | c |
|---|---|---|
| 居中 | 左對齊 | 右對齊 |
| ============ | ================= | ============= |
代碼3(特殊表格)
注：通常對合並單元格，以及其餘特殊格式表格，markdown 是無能爲力的
因此常規的作法是使用HTML標籤，可是這樣的編寫效率極低。
可是有了這款工具的話，全部問題都迎刃而解。
在線生成HTML代碼 Tables Generator (國外的站)
Tables Generator
演示
15.支持內嵌CSS樣式
代碼
<p style="color: #AD5D0F;font-size: 30px; font-family: '宋體';">內聯樣式</p>
演示
16.語義標記
| 描述 | 效果 | 代碼 |
|---|---|---|
| 斜體 | 斜體 | *斜體* |
| 斜體 | 斜體 | _斜體_ |
| 加粗 | 加粗 | **加粗** |
| 加粗+斜體 | 加粗+斜體 | ***加粗+斜體*** |
| 加粗+斜體 | 加粗+斜體 | **_加粗+斜體_** |
| 刪除線 | ~~刪除線~~ |
17.語義標籤
| 描述 | 效果 | 代碼 |
|---|---|---|
| 斜體 | <i>斜體</i> | <i>斜體</i> |
| 加粗 | <b>加粗</b> | <b>加粗</b> |
| 強調 | <em>強調</em> | <em>強調</em> |
| 上標 | Za | Z<sup>a</sup> |
| 下標 | Za | Z<sub>a</sub> |
| 鍵盤文本 |
|
<kbd>Ctrl</kbd> |
| 換行 | |
18.格式化文本
保持輸入排版格式不變
注：對內含標籤須要破壞結構才能顯示
代碼
<pre>
hello world
hi
hello world
</pre>
演示
<pre>
hello world
hi
hello world
</pre>
錯誤解決方法
注：標籤內部添加空格 或者 直接使用```標記來處理
代碼1(插入空格)
<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>
演示
<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>
代碼2( ``` 代碼塊標記)
```
<div>
<div></div>
<div></div>
<div></div>
</div>
```
演示
<div>
<div></div>
<div></div>
<div></div>
</div>
19.公式 {#1}
注：1個$左對齊，2個居中
代碼
$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $
演示
20.分隔符
注：最少三個 --- 或 ***或 * * *
代碼
*** --- * * *
演示
21.腳註
代碼
Markdown[^1] [^1]: Markdown是一種純文本標記語言 // 在文章最後面顯示腳註
演示
Markdown[1]
22.錨點
代碼
注：只有標題支持錨點， 跳轉目錄方括號後 保持空格
[公式標題錨點](#1)[須要跳轉的目錄] {#1} // 方括號後保持空格
演示
23.定義型列表
注：解釋型定義
代碼
Markdown : 輕量級文本標記語言，能夠轉換成html，pdf等格式 // 開頭一個`:` + `Tab` 或 四個空格
- 代碼塊定義
-
代碼塊定義……
var a = 10; // 保持空一行與 遞進縮進
演示
24.自動郵箱連接
代碼
<xxx@outlook.com>
演示
25.流程圖
代碼1
```flow // 流程 st=>start: 開始|past:> http://www.baidu.com // 開始 e=>end: 結束 // 結束 c1=>condition: 條件1:>http://www.baidu.com[_parent] // 判斷條件 c2=>condition: 條件2 // 判斷條件 c3=>condition: 條件3 // 判斷條件 io=>inputoutput: 輸出 // 輸出 //----------------以上爲定義參數-------------------------//----------------如下爲鏈接參數------------------------- // 開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束 st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e c1(no)->e // 條件1不知足->結束 c2(no)->e // 條件2不知足->結束 c3(no)->e // 條件3不知足->結束
</code></pre> <p><strong>演示</strong></p> <div class="image-package"> <div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;"> <div class="image-view" data-width="635" data-height="281"><img data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="" data-original-filesize="13858" class="" data-image-index="18" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png?imageMogr2/auto-orient/strip|imageView2/2/w/635/format/webp"></div> </div> <div class="image-caption"></div> </div> <p><strong>代碼詳解</strong><br> 流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p> <p><strong>定義示例：</strong></p> <pre><code>tag=>type: content:>url // 形參格式 st=>start: 開始:>http://www.baidu.com[blank] //實參格式 </code></pre> <p>注：** <code>st=>start: 開始</code> 的<code>：</code>後面保持空格**</p> <table> <thead> <tr> <th>形參</th> <th>實參</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>tag</td> <td>st</td> <td>標籤 (能夠自定義)</td> </tr> <tr> <td>=></td> <td>=></td> <td>賦值</td> </tr> <tr> <td>type</td> <td>start</td> <td>類型 (6種類型)</td> </tr> <tr> <td>content</td> <td>開始</td> <td>描述內容 (能夠自定義)</td> </tr> <tr> <td>:>url</td> <td><code>http://www.baidu.com[blank]</code></td> <td>連接與跳轉方式 <strong>兼容性不好</strong> </td> </tr> </tbody> </table> <table> <thead> <tr> <th>6種類型</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>start</td> <td>啓動</td> </tr> <tr> <td>end</td> <td>結束</td> </tr> <tr> <td>operation</td> <td>程序</td> </tr> <tr> <td>subroutine</td> <td>子程序</td> </tr> <tr> <td>condition</td> <td>條件</td> </tr> <tr> <td>inputoutput</td> <td>輸出</td> </tr> </tbody> </table> <p><strong>鏈接示例：</strong></p> <pre><code>st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e 開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束 </code></pre> <table> <thead> <tr> <th>形參</th> <th>實參</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>-></td> <td>-></td> <td>鏈接</td> </tr> <tr> <td>condition</td> <td>c1</td> <td>條件</td> </tr> <tr> <td>(布爾值,方向)</td> <td>(yes,right)</td> <td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td> </tr> </tbody> </table> <p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p> <pre><code>operation(right) subroutine(left) condition(yes,right) // 只有條件 才能加布爾值 </code></pre> <hr> <p><strong>代碼2</strong></p> <p>注：添加樣式和url跳轉 須要添加第三方的腳本<br> 實際效果不好，使用起來麻煩，意義不大</p> <pre><code>```flow // 流程 st=>start: 啓動|past:>http://www.baidu.com[blank] // 開始 e=>end: 結束 // 結束 op1=>operation: 方案一 // 運算1 sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent] // 運算2 sub3=>subroutine: 從新制定方案 // 運算2 cond1=>condition: 行不行？|request // 判斷條件1 cond2=>condition: 行不行？ // 判斷條件2 io=>inputoutput: 結果滿意 // 輸出 // 開始->方案1->判斷條件-> st->op1->cond1 // 判斷條件1爲no->方案2->判斷條件2爲no->從新制定方案->方案1 cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1 cond1(yes)->io->e // 判斷條件知足->輸出->結束 cond2(yes)->io->e // 判斷條件知足->輸出->結束</code></pre> <p><strong>演示</strong></p> <div class="image-package"> <div class="image-container" style="max-width: 635px; max-height: 281px; background-color: transparent;"> <div class="image-view" data-width="635" data-height="281"><img data-original-src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png" data-original-width="635" data-original-height="281" data-original-format="" data-original-filesize="13858" class="" data-image-index="18" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png?imageMogr2/auto-orient/strip|imageView2/2/w/635/format/webp"></div> </div> <div class="image-caption"></div> </div> <p><strong>代碼詳解</strong><br> 流程圖分爲兩個部分： <strong>定義參數</strong> 而後 <strong>鏈接參數</strong></p> <p><strong>定義示例：</strong></p> <pre><code>tag=>type: content:>url // 形參格式 st=>start: 開始:>http://www.baidu.com[blank] //實參格式 </code></pre> <p>注：** <code>st=>start: 開始</code> 的<code>：</code>後面保持空格**</p> <table> <thead> <tr> <th>形參</th> <th>實參</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>tag</td> <td>st</td> <td>標籤 (能夠自定義)</td> </tr> <tr> <td>=></td> <td>=></td> <td>賦值</td> </tr> <tr> <td>type</td> <td>start</td> <td>類型 (6種類型)</td> </tr> <tr> <td>content</td> <td>開始</td> <td>描述內容 (能夠自定義)</td> </tr> <tr> <td>:>url</td> <td><code>http://www.baidu.com[blank]</code></td> <td>連接與跳轉方式 <strong>兼容性不好</strong> </td> </tr> </tbody> </table> <table> <thead> <tr> <th>6種類型</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>start</td> <td>啓動</td> </tr> <tr> <td>end</td> <td>結束</td> </tr> <tr> <td>operation</td> <td>程序</td> </tr> <tr> <td>subroutine</td> <td>子程序</td> </tr> <tr> <td>condition</td> <td>條件</td> </tr> <tr> <td>inputoutput</td> <td>輸出</td> </tr> </tbody> </table> <p><strong>鏈接示例：</strong></p> <pre><code>st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e 開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束 </code></pre> <table> <thead> <tr> <th>形參</th> <th>實參</th> <th>含義</th> </tr> </thead> <tbody> <tr> <td>-></td> <td>-></td> <td>鏈接</td> </tr> <tr> <td>condition</td> <td>c1</td> <td>條件</td> </tr> <tr> <td>(布爾值,方向)</td> <td>(yes,right)</td> <td>若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down</td> </tr> </tbody> </table> <p>注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。</p> <pre><code>operation(right) subroutine(left) condition(yes,right) // 只有條件 才能加布爾值 </code></pre> <hr> <p><strong>代碼2</strong></p> <p>注：添加樣式和url跳轉 須要添加第三方的腳本<br> 實際效果不好，使用起來麻煩，意義不大</p> <pre><code>```flow // 流程 st=>start: 啓動|past:>http://www.baidu.com[blank] // 開始 e=>end: 結束 // 結束 op1=>operation: 方案一 // 運算1 sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent] // 運算2 sub3=>subroutine: 從新制定方案 // 運算2 cond1=>condition: 行不行？|request // 判斷條件1 cond2=>condition: 行不行？ // 判斷條件2 io=>inputoutput: 結果滿意 // 輸出 // 開始->方案1->判斷條件-> st->op1->cond1 // 判斷條件1爲no->方案2->判斷條件2爲no->從新制定方案->方案1 cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1 cond1(yes)->io->e // 判斷條件知足->輸出->結束 cond2(yes)->io->e // 判斷條件知足->輸出->結束
演示
做者地址：flowchart.js
通常廣泛支持的效果
26.時序圖
代碼1
```sequence A->>B: 你好 Note left of A: 我在左邊 // 註釋方向，只有左右，沒有上下 Note right of B: 我在右邊 B-->A: 很高興認識你 ```
演示
代碼詳解
注：A->>B: 你好 後面能夠不寫文字，可是必定要在最後加上：
Note left of A 表明註釋在A的左邊
| 符號 | 含義 |
|---|---|
- |
實線 |
> |
實心箭頭 |
-- |
虛線 |
>> |
空心箭頭 |
代碼2
```sequence
起牀->吃飯: 稀飯油條
吃飯->上班: 不要遲到了
上班->午飯: 吃撐了
上班->下班:
Note right of 下班: 下班了
下班->回家:
Note right of 回家: 到家了
回家-->>起牀:
Note left of 起牀: 新的一天
```
演示
27.生成側邊欄擴展
注：生成側邊欄通常是插入JS，再就是模板,
整體來講，非常麻煩，效果通常，不做詳解。
做者倉庫：i5ting_ztree_toc
精簡版：做者博客HaleyPKU
總結：經常使用標記
| 標記 | Markdown 語法 |
|---|---|
| 斜體 | *italic* |
| 粗體 | **bold** |
| 圖片 |  |
| 連接 | [Link Text](http://xxx.com) |
| 內聯代碼 | `code` |
| 塊級代碼 | ```code block``` |
| 引用 | > Here is a quote block |
| 分隔符 | ---- 或 ***** |
| 標題 1 | # Heading 1 |
| 標題 2 | ## Heading 2 |
| 標題 3 | ### Heading 3 |
| 標題 4 | #### Heading 4 |
Markdown編寫工具
-
Markdown是一種純文本標記語言 ↩