markdown教程
<p>[TOC]</p>
<h3>主要特性</h3>
<ul>
<li>支持“标准”Markdown / CommonMark和Github风格的语法；</li>
<li>支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；</li>
<li>支持ToC（Table of Contents）、Task lists、@链接等Markdown扩展语法；</li>
<li>支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;</li>
<li>兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；</li>
</ul>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Heading 4</p>
<h1>Heading 5</h1>
<h2>Heading 6</h2>
<h1>Heading 1 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</h1>
<h2>Heading 2 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</h2>
<h3>Heading 3 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</h3>
<p>Heading 4 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link") Heading link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</p>
<h1>Heading 5 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</h1>
<h2>Heading 6 link [Heading link](<a href="https://github.com/pandao/editor.md">https://github.com/pandao/editor.md</a> "Heading link")</h2>
<p>标题（用底线的形式）Heading (underline)</p>
<h1>This is an H1</h1>
<h2>This is an H2</h2>
<h3>字符效果和横线等</h3>
<hr />
<p><del>删除线</del> <s&删除线（开启识别HTML标签时）</s&
<em>斜体字</em> <em>斜体字</em>
<strong>粗体</strong> <strong>粗体</strong>
<strong><em>粗斜体</em></strong> <strong><em>粗斜体</em></strong></p>
<p>上标：X<sub&2</sub&，下标：O<sup&2</sup&</p>
<p><strong>缩写(同HTML的abbr标签)</strong></p>
<p>& 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启</p>
<p>The <abbr title="Hyper Text Markup Language"&HTML</abbr& specification is maintained by the <abbr title="World Wide Web Consortium"&W3C</abbr&.</p>
<h3>引用 Blockquotes</h3>
<p>& 引用文本 Blockquotes</p>
<p>引用的行内混合 Blockquotes</p>
<p>& 引用：如果想要插入空白换行<code>即&lt;br /&amp;标签</code>，在插入处先键入两个以上的空格然后回车即可，<a href="http://localhost/">普通链接</a>。</p>
<h3>锚点与链接 Links</h3>
<p><a href="http://localhost/">普通链接</a></p>
<p>[普通链接带标题](<a href="http://localhost/">http://localhost/</a> "普通链接带标题")</p>
<p>直接链接：<<a href="https://github.com&">https://github.com&</a>;</p>
<p><a href="http://www.this-anchor-link.com/">锚点链接</a> </p>
<p>GFM a-tail link @pandao</p>
<p>& @pandao</p>
<h3>多语言代码高亮 Codes</h3>
<p>行内代码 Inline code</p>
<p>执行命令：<code>npm install marked</code></p>
<p>缩进风格</p>
<p>即缩进四个空格，也做为实现类似<code>&lt;pre&amp;</code>预格式化文本(Preformatted Text)的功能。</p>
<pre><code>&lt;?php
echo &quot;Hello world!&quot;;
?&amp;</code></pre>
<p>预格式化文本：</p>
<pre><code>| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |</code></pre>
<p>JS代码 </p>
<pre><code class="language-javascript">function test(){
console.log(&quot;Hello world!&quot;);
}
(function(){
var box = function(){
return box.fn.init();
};
box.prototype = box.fn = {
init : function(){
console.log('box.init()');
return this;
},
add : function(str){
alert(&quot;add&quot;, str);
return this;
},
remove : function(str){
alert(&quot;remove&quot;, str);
return this;
}
};
box.fn.init.prototype = box.fn;
window.box =box;
})();
var testBox = box();
testBox.add(&quot;jQuery&quot;).remove(&quot;jQuery&quot;);</code></pre>
<p>HTML代码 HTML codes</p>
<pre><code class="language-html">&lt;!DOCTYPE html&amp;
&lt;html&amp;
&lt;head&amp;
&lt;mate charest=&quot;utf-8&quot; /&amp;
&lt;title&amp;Hello world!&lt;/title&amp;
&lt;/head&amp;
&lt;body&amp;
&lt;h1&amp;Hello world!&lt;/h1&amp;
&lt;/body&amp;
&lt;/html&amp;</code></pre>
<h3>图片 Images</h3>
<p>Image:</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/4.jpg" alt="" /></p>
<p>& Follow your heart.</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/8.jpg" alt="" /></p>
<p>& 图为：厦门白城沙滩</p>
<p>图片加链接 (Image + Link)：</p>
<p>[<img src="https://pandao.github.io/editor.md/examples/images/7.jpg" alt="" />](<a href="https://pandao.github.io/editor.md/examples/images/7.jpg">https://pandao.github.io/editor.md/examples/images/7.jpg</a> "李健首张专辑《似水流年》封面")</p>
<p>& 图为：李健首张专辑《似水流年》封面</p>
<hr />
<h3>列表 Lists</h3>
<p>无序列表（减号）Unordered Lists (-)</p>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>
<p>列表三</p>
<p>无序列表（星号）Unordered Lists (*)</p>
</li>
<li>列表一</li>
<li>列表二</li>
<li>
<p>列表三</p>
<p>无序列表（加号和嵌套）Unordered Lists (+)</p>
</li>
<li>列表一</li>
<li>列表二
<ul>
<li>列表二-1</li>
<li>列表二-2</li>
<li>列表二-3</li>
</ul></li>
<li>
<p>列表三</p>
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<p>有序列表 Ordered Lists (-)</p>
</li>
</ul>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>
<p>第三行</p>
<p>GFM task list</p>
</li>
</ol>
<ul>
<li>[x] GFM task list 1</li>
<li>[x] GFM task list 2</li>
<li>[ ] GFM task list 3
<ul>
<li>[ ] GFM task list 3-1</li>
<li>[ ] GFM task list 3-2</li>
<li>[ ] GFM task list 3-3</li>
</ul></li>
<li>[ ] GFM task list 4
<ul>
<li>[ ] GFM task list 4-1</li>
<li>[ ] GFM task list 4-2</li>
</ul></li>
</ul>
<hr />
<h3>绘制表格 Tables</h3>
<table>
<thead>
<tr>
<th>项目</th>
<th style="text-align: right;">价格</th>
<th style="text-align: center;">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机</td>
<td style="text-align: right;">$1600</td>
<td style="text-align: center;">5</td>
</tr>
<tr>
<td>手机</td>
<td style="text-align: right;">$12</td>
<td style="text-align: center;">12</td>
</tr>
<tr>
<td>管线</td>
<td style="text-align: right;">$1</td>
<td style="text-align: center;">234</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Function name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>help()</code></td>
<td>Display the help window.</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td><strong>Destroy your computer!</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align: left;">Left-Aligned</th>
<th style="text-align: center;">Center Aligned</th>
<th style="text-align: right;">Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">col 3 is</td>
<td style="text-align: center;">some wordy text</td>
<td style="text-align: right;">$1600</td>
</tr>
<tr>
<td style="text-align: left;">col 2 is</td>
<td style="text-align: center;">centered</td>
<td style="text-align: right;">$12</td>
</tr>
<tr>
<td style="text-align: left;">zebra stripes</td>
<td style="text-align: center;">are neat</td>
<td style="text-align: right;">$1</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Item</th>
<th style="text-align: right;">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td style="text-align: right;">$1600</td>
</tr>
<tr>
<td>Phone</td>
<td style="text-align: right;">$12</td>
</tr>
<tr>
<td>Pipe</td>
<td style="text-align: right;">$1</td>
</tr>
</tbody>
</table>
<hr />
<p>特殊符号 HTML Entities Codes</p>
<p>&copy; & &uml; &trade; &iexcl; &pound;
&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot; </p>
<p>X&sup2; Y&sup3; &frac34; &frac14; &times; &divide; &raquo;</p>
<p>18&ordm;C &quot; &apos;</p>
<p>反斜杠 Escape</p>
<p>*literal asterisks*</p>
<h3>科学公式 TeX(KaTeX)</h3>
<p>$$E=mc^2$$</p>
<p>行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。</p>
<p>$$(\sqrt{3x-1}+(1+x)^2)$$</p>
<p>$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$</p>
<p>多行公式：</p>
<pre><code class="language-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)</code></pre>
<pre><code class="language-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} }
}
}</code></pre>
<pre><code class="language-latex">f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi</code></pre>
<h3>绘制流程图 Flowchart</h3>
<pre><code class="language-flow">st=&gt;start: 用户登陆
op=&gt;operation: 登陆操作
cond=&gt;condition: 登陆成功 Yes or No?
e=&gt;end: 进入后台
st-&gt;op-&gt;cond
cond(yes)-&gt;e
cond(no)-&gt;op</code></pre>
<h3>绘制序列图 Sequence Diagram</h3>
<pre><code class="language-seq">Andrew-&amp;China: Says Hello
Note right of China: China thinks\nabout it
China--&amp;Andrew: How are you?
Andrew-&amp;&amp;China: I am good thanks!</code></pre>
<h3>End</h3>