Markdown 語法整理大集合2017

時間 2019-11-06

原文原文鏈接

Markdown 語法整理大集合2017

簡明教程：https://ouweiya.gitbooks.io/m...

1.標題

代碼javascript

注：# 後面保持空格html

# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7           // 錯誤代碼
######## h8        // 錯誤代碼
######### h9     // 錯誤代碼
########## h10    // 錯誤代碼

演示java

h1

h2

h3

h4

h5

h6

h7

h8

h9

h10

2.分級標題

代碼
注：= - 最少能夠只寫一個git

一級標題

======================
二級標題

---------------------

演示github

3.TOC

注：根據標題生成目錄，兼容性通常web

代碼markdown

[TOC]

演示app

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>

代碼2(Tab)

注： Tab縮進

我是文字……

    <div>   
        <div></div>
        <div></div>
        <div></div>
    </div>

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代碼3(自定義語法)
注：根據不一樣的語言配置不一樣的代碼着色

演示

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"}

演示

百度1

代碼2(引用式)

[百度2][3]{:target="_blank"}
[2]: http://www.baidu.com/   "百度二下"

演示

百度2

8.插入圖片

代碼1(內鏈式)

![name](./01.png '描述')

演示

代碼2(引用式)

![name][01]
[01]: ./01.png '描述'

演示

9.插入圖片帶有連接

代碼

[![name](./01.png '百度')](http://www.baidu.com){:target="_blank"}         // 內鏈式

[![name](./01.png '百度')][5]{:target="_blank"}                         // 引用式
[5]: http://www.baidu.com

演示

10.視頻插入

注：Markdown 語法是不支持直接插入視頻的
廣泛的作法是插入HTML的 iframe 框架，經過網站自帶的分享功能獲取，若是沒有能夠嘗試第二種方法
第二是僞造播放界面，實質是插入視頻圖片，而後經過點擊跳轉到相關頁面

代碼1
注：多數第三方平臺不支持插入<iframe>視頻

<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

演示

代碼2

[![youku2](./youku2.png)](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
1. one-1
2. two-2
two
- two-1
- two-2

代碼4(序表嵌套代碼塊)
注：換行+兩個Tab

* one

    var a = 10;        // 與上行保持空行並 遞進縮進

演示：

one
var a = 10;

12.任務列表

注：兼容性通常要隔開一行

代碼

這是文字……

- [x] 選項一
- [ ] 選項二  
- [ ]  [選項3]

演示

13.表情

:+1: :-1:

表情代碼地址

14.表格

注： : 表明對齊方式 , : 與 | 之間不要有空格，不然對齊會有些不兼容

代碼1

|    a    |       b       |      c     |
|:-------:|:------------- | ----------:|
|   居中  |     左對齊    |   右對齊   |
|=========|===============|============|

演示

a	b	c
居中	左對齊	右對齊
=========	===============	============

代碼2(簡約寫法)

a  | b | c  
:-:|:- |-:
    居中    |     左對齊      |   右對齊    
============|=================|=============

演示

a	b	c
居中	左對齊	右對齊
=========	===============	============

代碼3(特殊表格)

注：通常對合並單元格，以及其餘特殊格式表格，markdown 是無能爲力的
因此常規的作法是使用HTML標籤，可是這樣的編寫效率極低。
可是有了這款工具的話，全部問題都迎刃而解。

在線生成HTML代碼 Tables Generator (國外的站)

國外的站

演示

AAA	BBB	CCC		EEE
SS		GGGG
SS				FHHH
	ŤT		FFFF

15.支持內嵌CSS樣式

代碼

<p style="color: #AD5D0F;font-size: 30px; font-family: '宋體';">內聯樣式</p>

演示

16.語義標記

描述	效果	代碼
斜體	斜體	`斜體`
斜體	斜體	`_斜體_`
加粗	加粗	`加粗`
加粗+斜體	*加粗+斜體*	`*加粗+斜體*`
加粗+斜體	*加粗+斜體*	`_加粗+斜體_`
刪除線	~~刪除線~~	`~~刪除線~~`

17.語義標籤

描述	效果	代碼
斜體	斜體	`<i>斜體</i>`
加粗	加粗	`<b>加粗</b>`
強調	強調	`<em>強調</em>`
上標	Z^a	`Z<sup>a</sup>`
下標	Z_a	`Z<sub>a</sub>`
鍵盤文本	`Ctrl`	`<kbd>Ctrl</kbd>`
換行		`<br />`

18.格式化文本

保持輸入排版格式不變
注：對內置標籤須要破壞結構才能顯示

代碼

<pre>
hello world 
         hi
  hello world 
</pre>

演示

錯誤解決方法
注：標籤內部添加空格或者 直接使用 ``` 標記來處理

代碼1(插入空格)

<pre>
    < div>   
        < div>< /div>
        < div>< /div>
        < div>< /div>
    < /div>
</pre>

演示

代碼2( ```代碼塊標記)

演示

<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}. $

演示

$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

20.分隔符

注：最少三個 --- 或 *** 或 * * *

代碼

***
---
* * *

演示

21.腳註

代碼

Markdown[^1]
[^1]: Markdown是一種純文本標記語言        // 在文章最後面顯示腳註

演示

Markdown¹

22.錨點

代碼
注：只有標題支持錨點跳轉目錄方括號後保持空格

[公式標題錨點](#1)

### [須要跳轉的目錄] {#1}    // 方括號後保持空格

演示

公式標題錨點

23.定義型列表

注：解釋型定義
代碼

Markdown 
:    輕量級文本標記語言，能夠轉換成html，pdf等格式  //  開頭一個`:` + `Tab` 或 四個空格

代碼塊定義
:    代碼塊定義……

        var a = 10;            // 保持空一行與 遞進縮進

演示

24.自動郵箱連接

代碼

<xxx@outlook.com>

演示

25.流程圖

代碼1

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不知足->結束

演示

st=>start: 開始:>http://www.baidu.com[blank]                
e=>end: 結束    
c1=>condition: 條件1:>http://www.baidu.com[_parent]
c2=>condition: 條件2
c3=>condition: 條件3
io=>inputoutput: 輸出
u=>type: content:>

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e
c2(no)->e
c3(no)->e

代碼詳解

流程圖分爲兩個部分： 定義參數 而後 鏈接參數

定義示例：

tag=>type: content:>url           // 形參格式    
st=>start: 開始:>http://www.baidu.com[blank]    //實參格式

注： st=>start: 開始 的：後面保持空格

形參	實參	含義
tag	st	標籤 (能夠自定義)
=>	=>	賦值
type	start	類型 (6種類型)
content	開始	描述內容 (能夠自定義)
:>url	`http://www.baidu.com[blank]`	連接與跳轉方式兼容性不好

6種類型	含義
start	啓動
end	結束
operation	程序
subroutine	子程序
condition	條件
inputoutput	輸出

鏈接示例：

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
開始->判斷條件1爲no->判斷條件2爲no->判斷條件3爲no->輸出->結束

形參	實參	含義
->	->	鏈接
condition	c1	條件
(布爾值,方向)	(yes,right)	若是知足向右鏈接，4種方向：right ，left，up ，down 默認爲：down

注：operation (程序); subroutine (子程序) ;condition (條件)，均可以在括號里加入鏈接方向。

operation(right) 
subroutine(left)
condition(yes,right)      // 只有條件 才能加布爾值

代碼2

注：添加樣式和url跳轉須要添加第三方的腳本，
實際效果不好，使用起來麻煩，意義不大

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

通常廣泛支持的效果

st=>start: 啓動|past:>http://www.baidu.com[blank]         
e=>end: 結束          
op1=>operation: 方案一     
sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent]   
sub3=>subroutine: 從新制定方案
cond1=>condition: 行不行？|request   
cond2=>condition: 行不行？    
io=>inputoutput: 結果滿意   

st->op1->cond1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
cond1(yes)->io->e
cond2(yes)->io->e

26.時序圖

代碼1

A->>B: 你好
Note left of A: 我在左邊      // 註釋方向，只有左右，沒有上下
Note right of B: 我在右邊
B-->A: 很高興認識你

演示

代碼詳解

注：A->>B: 你好 後面能夠不寫文字，可是必定要在最後加上：
Note left of A 表明註釋在A的左邊

符號	含義
`-`	實線
`>`	實心箭頭
`--`	虛線
`>>`	空心箭頭

代碼2

起牀->吃飯: 稀飯油條
吃飯->上班: 不要遲到了
上班->午飯: 吃撐了
上班->下班:
Note right of 下班: 下班了
下班->回家:
Note right of 回家: 到家了
回家-->>起牀:
Note left of 起牀: 新的一天

演示

27.生成側邊欄擴展

注：生成側邊欄通常是插入JS，再就是模板，
整體來講，非常麻煩，效果通常，不做詳解。

做者倉庫：i5ting_ztree_toc

精簡版：做者博客HaleyPKU

END

Markdown是一種純文本標記語言 ↩

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。