个人随笔
目录
编辑器markdown的基本使用
2019-01-30 21:15:02

语法

  1. 标题
  2. # Heading 1
  3. ## Heading 2               
  4. ### Heading 3
  5. #### Heading 4
  6. ##### Heading 5
  7. ###### Heading 6
  8. # Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
  9. ## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
  10. ### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
  11. #### 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")
  12. ##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
  13. ###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
  15. #### 标题（用底线的形式）Heading (underline)
  17. This is an H1
  18. =============
  20. This is an H2
  21. -------------
  23. ### 字符效果和横线等
  25. ----
  27. ~~删除线~~ <s>删除线（开启识别HTML标签时）</s>
  28. *斜体字*      _斜体字_
  29. **粗体**  __粗体__
  30. ***粗斜体*** ___粗斜体___
  32. 上标：X<sub>2</sub>，下标：O<sup>2</sup>
  34. **缩写(同HTML的abbr标签)**
  36. > 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
  38. The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
  40. ### 引用 Blockquotes
  42. > 引用文本 Blockquotes
  44. 引用的行内混合 Blockquotes
  46. > 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。
  48. ### 锚点与链接 Links
  50. [普通链接](http://localhost/)
  52. [普通链接带标题](http://localhost/ "普通链接带标题")
  54. 直接链接：<https://github.com>
  56. [锚点链接][anchor-id] 
  58. [anchor-id]: http://www.this-anchor-link.com/
  60. [mailto:test.test@gmail.com](mailto:test.test@gmail.com)
  62. GFM a-tail link @pandao  邮箱地址自动链接 test.test@gmail.com  www@vip.qq.com
  64. > @pandao
  66. ### 多语言代码高亮 Codes
  68. #### 行内代码 Inline code
  70. 执行命令：`npm install marked`
  72. #### 缩进风格
  74. 即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。
  76.     <?php
  77.         echo "Hello world!";
  78.     ?>
  80. 预格式化文本：
  82.     | First Header  | Second Header |
  83.     | ------------- | ------------- |
  84.     | Content Cell  | Content Cell  |
  85.     | Content Cell  | Content Cell  |
  87. #### JS代码　
  88. ```
  89. ```javascript
  90. function test() {
  91.     console.log("Hello world!");
  92. }
  94. (function(){
  95.     var box = function() {
  96.         return box.fn.init();
  97.     };
  99.     box.prototype = box.fn = {
  100.         init : function(){
  101.             console.log('box.init()');
  103.             return this;
  104.         },
  106.         add : function(str) {
  107.             alert("add", str);
  109.             return this;
  110.         },
  112.         remove : function(str) {
  113.             alert("remove", str);
  115.             return this;
  116.         }
  117.     };
  119.     box.fn.init.prototype = box.fn;
  121.     window.box =box;
  122. })();
  124. var testBox = box();
  125. testBox.add("jQuery").remove("jQuery");
  126. ```
  128. #### HTML 代码 HTML codes
  130. ```html
  131. <!DOCTYPE html>
  132. <html>
  133.     <head>
  134.         <mate charest="utf-8" />
  135.         <meta name="keywords" content="Editor.md, Markdown, Editor" />
  136.         <title>Hello world!</title>
  137.         <style type="text/css">
  138.             body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
  139.             ul{list-style: none;}
  140.             img{border:none;vertical-align: middle;}
  141.         </style>
  142.     </head>
  143.     <body>
  144.         <h1 class="text-xxl">Hello world!</h1>
  145.         <p class="text-green">Plain text</p>
  146.     </body>
  147. </html>
  148. ```
  150. ### 图片 Images
  152. Image:
  154. ![](https://pandao.github.io/editor.md/examples/images/4.jpg)
  156. > Follow your heart.
  158. ![](https://pandao.github.io/editor.md/examples/images/8.jpg)
  160. > 图为：厦门白城沙滩
  162. 图片加链接 (Image + Link)：
  164. [![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面")
  166. > 图为：李健首张专辑《似水流年》封面
  168. ----
  170. ### 列表 Lists
  172. #### 无序列表（减号）Unordered Lists (-)
  174. - 列表一
  175. - 列表二
  176. - 列表三
  178. #### 无序列表（星号）Unordered Lists (*)
  180. * 列表一
  181. * 列表二
  182. * 列表三
  184. #### 无序列表（加号和嵌套）Unordered Lists (+)
  186. + 列表一
  187. + 列表二
  188.     + 列表二-1
  189.     + 列表二-2
  190.     + 列表二-3
  191. + 列表三
  192.     * 列表一
  193.     * 列表二
  194.     * 列表三
  196. #### 有序列表 Ordered Lists (-)
  198. 1. 第一行
  199. 2. 第二行
  200. 3. 第三行
  202. #### GFM task list
  204. - [x] GFM task list 1
  205. - [x] GFM task list 2
  206. - [ ] GFM task list 3
  207.     - [ ] GFM task list 3-1
  208.     - [ ] GFM task list 3-2
  209.     - [ ] GFM task list 3-3
  210. - [ ] GFM task list 4
  211.     - [ ] GFM task list 4-1
  212.     - [ ] GFM task list 4-2
  214. ----
  216. ### 绘制表格 Tables
  218. | 项目        | 价格   |  数量  |
  219. | --------   | -----:  | :----:  |
  220. | 计算机      | $1600   |   5     |
  221. | 手机        |   $12   |   12   |
  222. | 管线        |    $1    |  234  |
  224. First Header  | Second Header
  225. ------------- | -------------
  226. Content Cell  | Content Cell
  227. Content Cell  | Content Cell 
  229. | First Header  | Second Header |
  230. | ------------- | ------------- |
  231. | Content Cell  | Content Cell  |
  232. | Content Cell  | Content Cell  |
  234. | Function name | Description                    |
  235. | ------------- | ------------------------------ |
  236. | `help()`      | Display the help window.       |
  237. | `destroy()`   | **Destroy your computer!**     |
  239. | Left-Aligned  | Center Aligned  | Right Aligned |
  240. | :------------ |:---------------:| -----:|
  241. | col 3 is      | some wordy text | $1600 |
  242. | col 2 is      | centered        |   $12 |
  243. | zebra stripes | are neat        |    $1 |
  245. | Item      | Value |
  246. | --------- | -----:|
  247. | Computer  | $1600 |
  248. | Phone     |   $12 |
  249. | Pipe      |    $1 |
  251. ----
  253. #### 特殊符号 HTML Entities Codes
  255. &copy; &  &uml; &trade; &iexcl; &pound;
  256. &amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot; 
  258. X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;
  260. 18&ordm;C  &quot;  &apos;
  262. [========]
  264. ### Emoji表情 :smiley:
  266. > Blockquotes :star:
  268. #### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
  270. - [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
  271. - [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
  272. - [x] [ ] :smiley: this is a complete item :smiley:;
  273. - [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; 
  274. - [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
  275.     - [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
  276.     - [ ] :smiley: this is  :fa-star: :fa-gear: an incomplete item [test link](#);
  278. #### 反斜杠 Escape
  280. \*literal asterisks\*
  282. [========]
  284. ### 科学公式 TeX(KaTeX)
  286. $$E=mc^2$$
  288. 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
  290. $$x > y$$
  292. $$\(\sqrt{3x-1}+(1+x)^2\)$$
  294. $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
  296. 多行公式：
  298. ```math
  299. \displaystyle
  300. \left( \sum\_{k=1}^n a\_k b\_k \right)^2
  301. \leq
  302. \left( \sum\_{k=1}^n a\_k^2 \right)
  303. \left( \sum\_{k=1}^n b\_k^2 \right)
  304. ```
  306. ```katex
  307. \displaystyle 
  308.     \frac{1}{
  309.         \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
  310.         \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
  311.         1+\frac{e^{-6\pi}}
  312.         {1+\frac{e^{-8\pi}}
  313.          {1+\cdots} }
  314.         } 
  315.     }
  316. ```
  318. ```latex
  319. f(x) = \int_{-\infty}^\infty
  320.     \hat f(\xi)\,e^{2 \pi i \xi x}
  321.     \,d\xi
  322. ```
  324. ### 分页符 Page break
  326. > Print Test: Ctrl + P
  328. [========]
  330. ### 绘制流程图 Flowchart
  332. ```flow
  333. st=>start: 用户登陆
  334. op=>operation: 登陆操作
  335. cond=>condition: 登陆成功 Yes or No?
  336. e=>end: 进入后台
  338. st->op->cond
  339. cond(yes)->e
  340. cond(no)->op
  341. ```
  343. [========]
  345. ### 绘制序列图 Sequence Diagram
  347. ```seq
  348. Andrew->China: Says Hello 
  349. Note right of China: China thinks\nabout it 
  350. China-->Andrew: How are you? 
  351. Andrew->>China: I am good thanks!
  352. ```
  354. ### End

效果

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 link Heading link

标题（用底线的形式）Heading (underline)

This is an H1

This is an H2

字符效果和横线等

删除线 删除线（开启识别HTML标签时）
斜体字 斜体字
粗体 粗体
粗斜体 粗斜体

上标：X2，下标：O2

缩写(同HTML的abbr标签)

即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启

The HTML specification is maintained by the W3C.

引用 Blockquotes

引用文本 Blockquotes

引用的行内混合 Blockquotes

引用：如果想要插入空白换行即<br />标签，在插入处先键入两个以上的空格然后回车即可，普通链接。

锚点与链接 Links

普通链接

普通链接带标题

直接链接：https://github.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 ) 的功能。

  1. <?php
  2.     echo "Hello world!";
  3. ?>

预格式化文本：

  1. | First Header  | Second Header |
  2. | ------------- | ------------- |
  3. | Content Cell  | Content Cell  |
  4. | Content Cell  | Content Cell  |

JS代码　

  1. ```javascript
  2. function test() {
  3.     console.log("Hello world!");
  4. }
  6. (function(){
  7.     var box = function() {
  8.         return box.fn.init();
  9.     };
  11.     box.prototype = box.fn = {
  12.         init : function(){
  13.             console.log('box.init()');
  15.             return this;
  16.         },
  18.         add : function(str) {
  19.             alert("add", str);
  21.             return this;
  22.         },
  24.         remove : function(str) {
  25.             alert("remove", str);
  27.             return this;
  28.         }
  29.     };
  31.     box.fn.init.prototype = box.fn;
  33.     window.box =box;
  34. })();
  36. var testBox = box();
  37. testBox.add("jQuery").remove("jQuery");

HTML 代码 HTML codes

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <mate charest="utf-8" />
  5.         <meta name="keywords" content="Editor.md, Markdown, Editor" />
  6.         <title>Hello world!</title>
  7.         <style type="text/css">
  8.             body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
  9.             ul{list-style: none;}
  10.             img{border:none;vertical-align: middle;}
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h1 class="text-xxl">Hello world!</h1>
  15.         <p class="text-green">Plain text</p>
  16.     </body>
  17. </html>

图片 Images

Image:

Follow your heart.

图为：厦门白城沙滩

图片加链接 (Image + Link)：

图为：李健首张专辑《似水流年》封面

列表 Lists

无序列表（减号）Unordered Lists (-)

  • 列表一
  • 列表二
  • 列表三

无序列表（星号）Unordered Lists (*)

  • 列表一
  • 列表二
  • 列表三

无序列表（加号和嵌套）Unordered Lists (+)

  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三

有序列表 Ordered Lists (-)

  1. 第一行
  2. 第二行
  3. 第三行

GFM task list

  • GFM task list 1
  • 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

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " '

Emoji表情 :smiley:

Blockquotes :star:

GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji

  • :smiley: @mentions, :smiley: #refs, links, formatting, and tags supported ;
  • list syntax required (any unordered or ordered list supported) ;
  • [ ] :smiley: this is a complete item :smiley:;
  • []this is an incomplete item test link @pandao;
  • [ ]this is an incomplete item ;

反斜杠 Escape

*literal asterisks*

科学公式 TeX(KaTeX)

E=mc2E=mc^2

行内的公式E=mc2E=mc^2行内的公式，行内的E=mc2E=mc^2公式。

x>yx > y

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

sin(α)θ=∑i=0n(xi+cos(f))\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))

多行公式：

(∑_k=1na_kb_k)2≤(∑_k=1na_k2)(∑_k=1nb_k2)\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)

1(ϕ5−ϕ)e25π=1+e−2π1+e−4π1+e−6π1+e−8π1+⋯\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} } } }

f(x)=∫−∞∞f^(ξ)e2πiξxdξf(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi

分页符 Page break

Print Test: Ctrl + P

绘制流程图 Flowchart

Created with Raphaël 2.1.2用户登陆登陆操作登陆成功 Yes or No?进入后台yesno

绘制序列图 Sequence Diagram

Created with Raphaël 2.1.2AndrewAndrewChinaChinaSays HelloChina thinksabout itHow are you?I am good thanks!

End

 251

啊！这个可能是世界上最丑的留言输入框功能~


当然，也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2