Markdown 語法整理大集合2017
簡明教程:https://ouweiya.gitbooks.io/markdown/
1.標題
程式碼
注:# 後面保持空格
# h1
## h2
### h3
#### h4
##### h5 ###### h6 ####### h7 // 錯誤程式碼 ######## h8 // 錯誤程式碼 ######### h9 // 錯誤程式碼 ########## h10 // 錯誤程式碼
演示
h1
h2
h3
h4
h5
h6
####### h7
######## h8
######### h9
########## h10
2.分級標題
程式碼
注:=
-
最少可以只寫一個,相容性一般
一級標題
======================
二級標題
---------------------
演示
3.TOC
注:根據標題生成目錄,相容性一般
程式碼
[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>
程式碼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]{:target="_blank"} // 引用式 [5]: http://www.baidu.com
演示
[
][5][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
[[圖片上傳失敗...(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
* one
var a = 10; // 與上行保持空行並 遞進縮排
演示:
-
one
var a = 10;
12.任務列表
注:相容性一般 要隔開一行
程式碼
這是文字……
- [x] 選項一
- [ ] 選項二
- [ ] [選項3]
演示
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.自動郵箱連結
程式碼
<[email protected]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不滿足->結束 ```
演示
程式碼詳解
流程圖分為兩個部分: 定義引數 然後 連線引數
定義示例:
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跳轉 需要新增第三方的指令碼
實際效果很差,使用起來麻煩,意義不大
```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** |
圖片 | ![Image Title](http://xxx.png) |
連結 | [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是一種純文字標記語言
作者:歐薇婭
連結:https://www.jianshu.com/p/b03a8d7b1719
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。