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

引用的行内混合 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

#### 行内代码 Inline code

执行命令:`npm install marked`

#### 缩进风格

即缩进四个空格,也做为实现类似 `<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

| 项目        | 价格  |  数量  |

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

| 计算机      | $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$$

行内的公式$$E=mc^2$$行内的公式,行内的$$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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容