供链-产品手册

技术团队文档示例


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 <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h1> <h2>Heading 2 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h2> <h3>Heading 3 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h3> <p>Heading 4 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a> Heading link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></p> <h1>Heading 5 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h1> <h2>Heading 6 link <a href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h2> <p>标题(用底线的形式)Heading (underline)</p> <h1>This is an H1</h1> <h2>This is an H2</h2> <h3>字符效果和横线等</h3> <hr /> <p><del>删除线</del> &lt;s&amp;删除线(开启识别HTML标签时)&lt;/s&amp; <em>斜体字</em> <em>斜体字</em> <strong>粗体</strong> <strong>粗体</strong> <strong><em>粗斜体</em></strong> <strong><em>粗斜体</em></strong></p> <p>上标:X&lt;sub&amp;2&lt;/sub&amp;,下标:O&lt;sup&amp;2&lt;/sup&amp;</p> <p><strong>缩写(同HTML的abbr标签)</strong></p> <p>&amp; 即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启</p> <p>The &lt;abbr title=&quot;Hyper Text Markup Language&quot;&amp;HTML&lt;/abbr&amp; specification is maintained by the &lt;abbr title=&quot;World Wide Web Consortium&quot;&amp;W3C&lt;/abbr&amp;.</p> <h3>引用 Blockquotes</h3> <p>&amp; 引用文本 Blockquotes</p> <p>引用的行内混合 Blockquotes</p> <p>&amp; 引用:如果想要插入空白换行<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/" title="普通链接带标题">普通链接带标题</a></p> <p>直接链接:&lt;<a href="https://github.com">https://github.com</a>&amp;</p> <p><a href="http://www.this-anchor-link.com/">锚点链接</a> </p> <p>GFM a-tail link @pandao</p> <p>&amp; @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 "Hello world!"; ?&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("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");</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="utf-8" /&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>&amp; Follow your heart.</p> <p><img src="https://pandao.github.io/editor.md/examples/images/8.jpg" alt="" /></p> <p>&amp; 图为:厦门白城沙滩</p> <p>图片加链接 (Image + Link):</p> <p><a href="https://pandao.github.io/editor.md/examples/images/7.jpg" title="李健首张专辑《似水流年》封面"><img src="https://pandao.github.io/editor.md/examples/images/7.jpg" alt="" /></a></p> <p>&amp; 图为:李健首张专辑《似水流年》封面</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>&amp;copy; &amp; &amp;uml; &amp;trade; &amp;iexcl; &amp;pound; &amp;amp; &amp;lt; &amp;gt; &amp;yen; &amp;euro; &amp;reg; &amp;plusmn; &amp;para; &amp;sect; &amp;brvbar; &amp;macr; &amp;laquo; &amp;middot; </p> <p>X&amp;sup2; Y&amp;sup3; &amp;frac34; &amp;frac14; &amp;times; &amp;divide; &amp;raquo;</p> <p>18&amp;ordm;C &amp;quot; &amp;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>

页面列表

ITEM_HTML