2019-10-28

# Editor.md

![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)

![](https://img.shields.io/github/stars/pandao/editor.md.svg) ![](https://img.shields.io/github/forks/pandao/editor.md.svg) ![](https://img.shields.io/github/tag/pandao/editor.md.svg) ![](https://img.shields.io/github/release/pandao/editor.md.svg) ![](https://img.shields.io/github/issues/pandao/editor.md.svg) ![](https://img.shields.io/bower/v/editor.md.svg)

**目錄 (Table of Contents)**

[TOCM]

[TOC]

# Heading 1

## Heading 2? ? ? ? ? ? ?

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")

## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")

### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")

#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")

##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")

###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")

#### 標題(用底線的形式)Heading (underline)

This is an H1

=============

This is an H2

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

### 字符效果和橫線等


----

~~刪除線~~ <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>.

### 引用 Blockquotes

> 引用文本 Blockquotes

引用的行內(nèi)混合 Blockquotes


> 引用:如果想要插入空白換行`即<br />標簽`怀樟,在插入處先鍵入兩個以上的空格然后回車即可,[普通鏈接](http://localhost/)盆佣。

### 錨點與鏈接 Links

[普通鏈接](http://localhost/)

[普通鏈接帶標題](http://localhost/ "普通鏈接帶標題")

直接鏈接:<https://github.com>

[錨點鏈接][anchor-id]

[anchor-id]: http://www.this-anchor-link.com/

[mailto:test.test@gmail.com](mailto:test.test@gmail.com)

GFM a-tail link @pandao? 郵箱地址自動鏈接 test.test@gmail.com? www@vip.qq.com

> @pandao

### 多語言代碼高亮 Codes

#### 行內(nèi)代碼 Inline code

執(zhí)行命令:`npm install marked`

#### 縮進風格

即縮進四個空格往堡,也做為實現(xiàn)類似 `<pre>` 預格式化文本 ( Preformatted Text ) 的功能。

? ? <?php

? ? ? ? echo "Hello world!";

? ? ?>


預格式化文本:

? ? | First Header? | Second Header |

? ? | ------------- | ------------- |

? ? | Content Cell? | Content Cell? |

? ? | Content Cell? | Content Cell? |

#### JS代碼

```javascript

function test() {

console.log("Hello world!");

}

(function(){

? ? var box = function() {

? ? ? ? return box.fn.init();

? ? };

? ? box.prototype = box.fn = {

? ? ? ? init : function(){

? ? ? ? ? ? console.log('box.init()');

return this;

? ? ? ? },

add : function(str) {

alert("add", str);

return this;

},

remove : function(str) {

alert("remove", str);

return this;

}

? ? };


? ? box.fn.init.prototype = box.fn;


? ? window.box =box;

})();

var testBox = box();

testBox.add("jQuery").remove("jQuery");

```

#### HTML 代碼 HTML codes

```html

<!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>

```

### 圖片 Images

Image:

![](https://pandao.github.io/editor.md/examples/images/4.jpg)

> Follow your heart.

![](https://pandao.github.io/editor.md/examples/images/8.jpg)

> 圖為:廈門白城沙灘

圖片加鏈接 (Image + Link):

[![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://pandao.github.io/editor.md/images/7.jpg "李健首張專輯《似水流年》封面")

> 圖為:李健首張專輯《似水流年》封面


----

### 列表 Lists

#### 無序列表(減號)Unordered Lists (-)


- 列表一

- 列表二

- 列表三


#### 無序列表(星號)Unordered Lists (*)

* 列表一

* 列表二

* 列表三

#### 無序列表(加號和嵌套)Unordered Lists (+)


+ 列表一

+ 列表二

? ? + 列表二-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


----


### 繪制表格 Tables

| 項目? ? ? ? | 價格? |? 數(shù)量? |

| --------? | -----:? | :----:? |

| 計算機? ? ? | $1600? |? 5? ? |

| 手機? ? ? ? |? $12? |? 12? |

| 管線? ? ? ? |? ? $1? ? |? 234? |


First Header? | Second Header

------------- | -------------

Content Cell? | Content Cell

Content Cell? | Content Cell

| First Header? | Second Header |

| ------------- | ------------- |

| Content Cell? | Content Cell? |

| Content Cell? | Content Cell? |

| Function name | Description? ? ? ? ? ? ? ? ? ? |

| ------------- | ------------------------------ |

| `help()`? ? ? | Display the help window.? ? ? |

| `destroy()`? | **Destroy your computer!**? ? |

| Left-Aligned? | Center Aligned? | Right Aligned |

| :------------ |:---------------:| -----:|

| col 3 is? ? ? | some wordy text | $1600 |

| col 2 is? ? ? | centered? ? ? ? |? $12 |

| zebra stripes | are neat? ? ? ? |? ? $1 |

| Item? ? ? | Value |

| --------- | -----:|

| Computer? | $1600 |

| Phone? ? |? $12 |

| Pipe? ? ? |? ? $1 |


----

#### 特殊符號 HTML Entities Codes

&copy; &? &uml; &trade; &iexcl; &pound;

&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;

X&sup2; Y&sup3; &frac34; &frac14;? &times;? &divide;? &raquo;

18&ordm;C? &quot;? &apos;

[========]

### Emoji表情 :smiley:

> Blockquotes :star:

#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;

- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;

- [x] [ ] :smiley: this is a complete item :smiley:;

- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;

- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;

? ? - [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;

? ? - [ ] :smiley: this is? :fa-star: :fa-gear: an incomplete item [test link](#);

#### 反斜杠 Escape

\*literal asterisks\*

[========]


### 科學公式 TeX(KaTeX)

$$E=mc^2$$

行內(nèi)的公式$$E=mc^2$$行內(nèi)的公式共耍,行內(nèi)的$$E=mc^2$$公式虑灰。

$$x > y$$

$$\(\sqrt{3x-1}+(1+x)^2\)$$


$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

多行公式:

```math

\displaystyle

\left( \sum\_{k=1}^n a\_k b\_k \right)^2

\leq

\left( \sum\_{k=1}^n a\_k^2 \right)

\left( \sum\_{k=1}^n b\_k^2 \right)

```

```katex

\displaystyle

? ? \frac{1}{

? ? ? ? \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{

? ? ? ? \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {

? ? ? ? 1+\frac{e^{-6\pi}}

? ? ? ? {1+\frac{e^{-8\pi}}

? ? ? ? {1+\cdots} }

? ? ? ? }

? ? }

```

```latex

f(x) = \int_{-\infty}^\infty

? ? \hat f(\xi)\,e^{2 \pi i \xi x}

? ? \,d\xi

```

### 分頁符 Page break

> Print Test: Ctrl + P

[========]

### 繪制流程圖 Flowchart

```flow

st=>start: 用戶登陸

op=>operation: 登陸操作

cond=>condition: 登陸成功 Yes or No?

e=>end: 進入后臺

st->op->cond

cond(yes)->e

cond(no)->op

```

[========]


### 繪制序列圖 Sequence Diagram


```seq

Andrew->China: Says Hello

Note right of China: China thinks\nabout it

China-->Andrew: How are you?

Andrew->>China: I am good thanks!

```

### End

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市痹兜,隨后出現(xiàn)的幾起案子穆咐,更是在濱河造成了極大的恐慌,老刑警劉巖佃蚜,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件庸娱,死亡現(xiàn)場離奇詭異,居然都是意外死亡谐算,警方通過查閱死者的電腦和手機熟尉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來洲脂,“玉大人斤儿,你說我怎么就攤上這事】纸酰” “怎么了往果?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長一铅。 經(jīng)常有香客問我陕贮,道長,這世上最難降的妖魔是什么潘飘? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任肮之,我火速辦了婚禮,結(jié)果婚禮上卜录,老公的妹妹穿的比我還像新娘戈擒。我一直安慰自己,他們只是感情好艰毒,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布筐高。 她就那樣靜靜地躺著,像睡著了一般丑瞧。 火紅的嫁衣襯著肌膚如雪柑土。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天嗦篱,我揣著相機與錄音冰单,去河邊找鬼。 笑死灸促,一個胖子當著我的面吹牛诫欠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播浴栽,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼荒叼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了典鸡?” 一聲冷哼從身側(cè)響起被廓,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎萝玷,沒想到半個月后嫁乘,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昆婿,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年蜓斧,在試婚紗的時候發(fā)現(xiàn)自己被綠了仓蛆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡挎春,死狀恐怖看疙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情直奋,我是刑警寧澤能庆,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站脚线,受9級特大地震影響搁胆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜邮绿,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一丰涉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斯碌,春花似錦一死、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至冠骄,卻和暖如春伪煤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背凛辣。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工抱既, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扁誓。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓防泵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蝗敢。 傳聞我的和親對象是個殘疾皇子捷泞,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容