<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/le-markdown-editor@1.1.2/dist/leEditor.js"></script>
</head>
<body>
<div id="app">
<div id="main">
<a href="http://106.54.92.121/">编辑器组件点这里</a>
<!-- <h2>通过html方式显示</h2>-->
<!-- <le-preview ref="html-preview" :value="html" :hljs-css="hljsCss"></le-preview>-->
<h2>通过markdown方式显示</h2>
<le-preview ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data() {
return {
hljsCss: 'agate',
html: '<p data-source="1"><h3>导航</h3><ul><li><a href="#_2">字符效果、分隔线</a></li><li><a href="#_20">引用</a></li><li><a href="#_Links_24">锚点与链接 Links</a></li><li><a href="#_31">代码高亮</a></li><ul><li><a href="#_33">行内代码</a></li><li><a href="#_38">缩进风格</a></li><li><a href="#JS_43">JS代码</a></li><li><a href="#HTML__HTML_codes_50">HTML 代码 HTML codes</a></li></ul><li><a href="#_Images_63">图片 Images</a></li><ul><li><a href="#_Image_64">图片 Image</a></li><li><a href="#_Image__Link_67">图片加链接 (Image + Link)</a></li></ul><li><a href="#_Lists_73">列表 Lists</a></li><ul><li><a href="#Unordered_Lists__75">无序列表（减号）Unordered Lists (-)</a></li><li><a href="#Unordered_Lists__81">无序列表（星号）Unordered Lists (*)</a></li><li><a href="#Unordered_Lists__87">无序列表（加号和嵌套）Unordered Lists (+)</a></li><li><a href="#_Ordered_Lists__98">有序列表 Ordered Lists (-)</a></li></ul><li><a href="#GFM_task_list_104">GFM task list</a></li><li><a href="#_118">绘制表格</a></li><li><a href="#Emoji_141">Emoji表情</a></li><li><a href="#LaTeX__145">LaTeX 公式</a></li><li><a href="#_161">流程图</a></li><li><a href="#_177">视频、音频</a></li><li><a href="#_196">脚注</a></li></ul>\n' +
'Markdown 语法简介</p>\n' +
'<h1 data-source="3"><a id="_2"></a>字符效果、分隔线</h1>\n' +
'<hr data-source="4"></hr><p data-source="6"><s>删除</s></p>\n' +
'<p data-source="8"><em>斜体字</em> <em>斜体字</em></p>\n' +
'<p data-source="10"><strong>粗体</strong> <strong>粗体</strong></p>\n' +
'<p data-source="12"><em><strong>粗斜体</strong></em> <em><strong>粗斜体</strong></em></p>\n' +
'<p data-source="14">上标：X<sup>2</sup>，X<sup>2</sup>\n' +
'下标：O<sub>2</sub>， X<sub>2</sub></p>\n' +
'<p data-source="17"><strong>缩写(同HTML的abbr标签)</strong></p>\n' +
'<p data-source="19">The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>\n' +
'<h1 data-source="21"><a id="_20"></a>引用</h1>\n' +
'<blockquote data-source="23"><p data-source="23">引用文本</p>\n' +
'</blockquote>\n' +
'<h1 data-source="25"><a id="_Links_24"></a>锚点与链接 Links</h1>\n' +
'<p data-source="26"><a href="https://gitee.com/Chave-Z/vue-md-editor/">普通链接</a></p>\n' +
'<p data-source="28"><a href="https://gitee.com/Chave-Z/vue-md-editor/" title="普通链接带标题">普通链接带标题</a></p>\n' +
'<p data-source="30">直接链接：<a href="https://gitee.com/Chave-Z/vue-md-editor">https://gitee.com/Chave-Z/vue-md-editor</a></p>\n' +
'<h1 data-source="32"><a id="_31"></a>代码高亮</h1>\n' +
'<h2 data-source="34"><a id="_33"></a>行内代码</h2>\n' +
'<p data-source="37">执行命令：<code>Inline code...</code></p>\n' +
'<h2 data-source="39"><a id="_38"></a>缩进风格</h2>\n' +
'<pre class="hljs" data-source="41"><code><toolbar ref="toolbar">\n' +
'</toolbar>\n' +
'</code></pre>\n' +
'<h2 data-source="44"><a id="JS_43"></a>JS代码</h2>\n' +
'<pre class="hljs" data-source="45"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{\n' +
'\t<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello world!"</span>);\n' +
'}</code></pre><h2 data-source="51"><a id="HTML__HTML_codes_50"></a>HTML 代码 HTML codes</h2>\n' +
'<pre class="hljs" data-source="52"><code><span class="hljs-meta"><!DOCTYPE html></span>\n' +
'<span class="hljs-tag"><<span class="hljs-name">html</span>></span>\n' +
' <span class="hljs-tag"><<span class="hljs-name">head</span>></span>\n' +
' <span class="hljs-tag"><<span class="hljs-name">mate</span> <span class="hljs-attr">charest</span>=<span class="hljs-string">"utf-8"</span> /></span>\n' +
' <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Hello world!<span class="hljs-tag"></<span class="hljs-name">title</span>></span>\n' +
' <span class="hljs-tag"></<span class="hljs-name">head</span>></span>\n' +
' <span class="hljs-tag"><<span class="hljs-name">body</span>></span>\n' +
' <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-xxl"</span>></span>Hello world!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>\n' +
' <span class="hljs-tag"></<span class="hljs-name">body</span>></span>\n' +
'<span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre><h1 data-source="64"><a id="_Images_63"></a>图片 Images</h1>\n' +
'<h2 data-source="65"><a id="_Image_64"></a>图片 Image</h2>\n' +
'<p data-source="67"><img src="https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png" alt="markdown"></p>\n' +
'<h2 data-source="68"><a id="_Image__Link_67"></a>图片加链接 (Image + Link)</h2>\n' +
'<p data-source="70"><a href="https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png" title="markdown"><img src="https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png" alt=""></a></p>\n' +
'<hr data-source="72"></hr><h1 data-source="74"><a id="_Lists_73"></a>列表 Lists</h1>\n' +
'<h2 data-source="76"><a id="Unordered_Lists__75"></a>无序列表（减号）Unordered Lists (-)</h2>\n' +
'<ul data-source="78"><li><p data-source="78">列表一</li>\n' +
'<li><p data-source="79">列表二</li>\n' +
'<li><p data-source="80">列表三</li>\n' +
'</ul>\n' +
'<h2 data-source="82"><a id="Unordered_Lists__81"></a>无序列表（星号）Unordered Lists (*)</h2>\n' +
'<ul data-source="84"><li><p data-source="84">列表一</li>\n' +
'<li><p data-source="85">列表二</li>\n' +
'<li><p data-source="86">列表三</li>\n' +
'</ul>\n' +
'<h2 data-source="88"><a id="Unordered_Lists__87"></a>无序列表（加号和嵌套）Unordered Lists (+)</h2>\n' +
'<ul data-source="89"><li><p data-source="89">列表一</li>\n' +
'<li><p data-source="90">列表二<ul data-source="91"><li><p data-source="91">列表二-1</li>\n' +
'<li><p data-source="92">列表二-2</li>\n' +
'<li><p data-source="93">列表二-3</li>\n' +
'</ul>\n' +
'</li>\n' +
'<li><p data-source="94">列表三<ul data-source="95"><li><p data-source="95">列表一</li>\n' +
'<li><p data-source="96">列表二</li>\n' +
'<li><p data-source="97">列表三</li>\n' +
'</ul>\n' +
'</li>\n' +
'</ul>\n' +
'<h2 data-source="99"><a id="_Ordered_Lists__98"></a>有序列表 Ordered Lists (-)</h2>\n' +
'<ol data-source="101"><li><p data-source="101">第一行</li>\n' +
'<li><p data-source="102">第二行</li>\n' +
'<li><p data-source="103">第三行</li>\n' +
'</ol>\n' +
'<h1 data-source="105"><a id="GFM_task_list_104"></a>GFM task list</h1>\n' +
'<ul data-source="107"><li class="task-list-item"><p data-source="107"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> GFM task list 1</li>\n' +
'<li class="task-list-item"><p data-source="108"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> GFM task list 2</li>\n' +
'<li class="task-list-item"><p data-source="109"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 3<ul data-source="110"><li class="task-list-item"><p data-source="110"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 3-1</li>\n' +
'<li class="task-list-item"><p data-source="111"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 3-2</li>\n' +
'<li class="task-list-item"><p data-source="112"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 3-3</li>\n' +
'</ul>\n' +
'</li>\n' +
'<li class="task-list-item"><p data-source="113"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 4<ul data-source="114"><li class="task-list-item"><p data-source="114"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 4-1</li>\n' +
'<li class="task-list-item"><p data-source="115"><input class="task-list-item-checkbox" disabled="" type="checkbox"> GFM task list 4-2</li>\n' +
'</ul>\n' +
'</li>\n' +
'</ul>\n' +
'<hr data-source="117"></hr><h1 data-source="119"><a id="_118"></a>绘制表格</h1>\n' +
'<table data-source="121"><thead>\n' +
'<tr>\n' +
'<th>标题</th>\n' +
'<th>标题</th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody>\n' +
'<tr>\n' +
'<td>内容内容</td>\n' +
'<td>内容内容</td>\n' +
'</tr>\n' +
'<tr>\n' +
'<td>内容</td>\n' +
'<td>内容</td>\n' +
'</tr>\n' +
'</tbody>\n' +
'</table>\n' +
'<table data-source="126"><thead>\n' +
'<tr>\n' +
'<th style="text-align:left">标题</th>\n' +
'<th style="text-align:left">标题</th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody>\n' +
'<tr>\n' +
'<td style="text-align:left">内容内容内容内容</td>\n' +
'<td style="text-align:left">内容内容内容内容</td>\n' +
'</tr>\n' +
'<tr>\n' +
'<td style="text-align:left">内容</td>\n' +
'<td style="text-align:left">内容</td>\n' +
'</tr>\n' +
'</tbody>\n' +
'</table>\n' +
'<table data-source="131"><thead>\n' +
'<tr>\n' +
'<th style="text-align:center">标题</th>\n' +
'<th style="text-align:center">标题</th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody>\n' +
'<tr>\n' +
'<td style="text-align:center">内容内容内容内容</td>\n' +
'<td style="text-align:center">内容内容内容内容</td>\n' +
'</tr>\n' +
'<tr>\n' +
'<td style="text-align:center">内容</td>\n' +
'<td style="text-align:center">内容</td>\n' +
'</tr>\n' +
'</tbody>\n' +
'</table>\n' +
'<table data-source="136"><thead>\n' +
'<tr>\n' +
'<th style="text-align:right">标题</th>\n' +
'<th style="text-align:right">标题</th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody>\n' +
'<tr>\n' +
'<td style="text-align:right">内容内容内容内容</td>\n' +
'<td style="text-align:right">内容内容内容内容</td>\n' +
'</tr>\n' +
'<tr>\n' +
'<td style="text-align:right">内容</td>\n' +
'<td style="text-align:right">内容</td>\n' +
'</tr>\n' +
'</tbody>\n' +
'</table>\n' +
'<hr data-source="140"></hr><h1 data-source="142"><a id="Emoji_141"></a>Emoji表情</h1>\n' +
'<p data-source="143">访问 <a href="https://www.webfx.com/tools/emoji-cheat-sheet/">webfx</a> 参考更多使用方法。</p>\n' +
'<p data-source="145">☀️ ☔️ ☁️ ❄️ ⛄️ ⚡️ 🌀 🌁 🌊 🐱 🐶</p>\n' +
'<h1 data-source="146"><a id="LaTeX__145"></a>LaTeX 公式</h1>\n' +
'<p data-source="148"><code>$</code> 表示行内公式：</p>\n' +
'<p data-source="150">质能守恒方程可以用一个很简洁的方程式 <span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:0.8141079999999999em;"></span><span class="strut bottom" style="height:0.8141079999999999em;vertical-align:0em;"></span><span class="base textstyle uncramped"><span class="mord mathit" style="margin-right:0.05764em;">E</span><span class="mrel">=</span><span class="mord mathit">m</span><span class="mord"><span class="mord mathit">c</span><span class="vlist"><span style="top:-0.363em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span></span></span></span> 来表达。</p>\n' +
'<p data-source="152"><code>$$ </code>表示整行公式：</p>\n' +
'<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msubsup><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></msubsup><msub><mi>a</mi><mi>i</mi></msub><mo>=</mo><mn>0</mn></mrow><annotation encoding="application/x-tex">\\sum_{i=1}^n a_i=0\n' +
'</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:1.6513970000000002em;"></span><span class="strut bottom" style="height:2.929066em;vertical-align:-1.277669em;"></span><span class="base displaystyle textstyle uncramped"><span class="mop op-limits"><span class="vlist"><span style="top:1.1776689999999999em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord scriptstyle cramped"><span class="mord mathit">i</span><span class="mrel">=</span><span class="mord mathrm">1</span></span></span></span><span style="top:-0.000005000000000143778em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span><span class="op-symbol large-op mop">∑</span></span></span><span style="top:-1.2500050000000003em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathit">n</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mord"><span class="mord mathit">a</span><span class="vlist"><span style="top:0.15em;margin-right:0.05em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathit">i</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mrel">=</span><span class="mord mathrm">0</span></span></span></span></span></p>\n' +
'<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>f</mi><mo>(</mo><msub><mi>x</mi><mn>1</mn></msub><mo separator="true">,</mo><msub><mi>x</mi><mi>x</mi></msub><mo separator="true">,</mo><mo>…</mo><mo separator="true">,</mo><msub><mi>x</mi><mi>n</mi></msub><mo>)</mo><mo>=</mo><msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>x</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>⋯</mo><mo>+</mo><msubsup><mi>x</mi><mi>n</mi><mn>2</mn></msubsup></mrow><annotation encoding="application/x-tex">f(x_1,x_x,\\ldots,x_n) = x_1^2 + x_2^2 + \\cdots + x_n^2 \n' +
'</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:0.8641079999999999em;"></span><span class="strut bottom" style="height:1.1141079999999999em;vertical-align:-0.25em;"></span><span class="base displaystyle textstyle uncramped"><span class="mord mathit" style="margin-right:0.10764em;">f</span><span class="mopen">(</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.15em;margin-right:0.05em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathrm">1</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mpunct">,</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.15em;margin-right:0.05em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathit">x</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mpunct">,</span><span class="minner">…</span><span class="mpunct">,</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.15em;margin-right:0.05em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathit">n</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mclose">)</span><span class="mrel">=</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.247em;margin-left:0em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathrm">1</span></span></span><span style="top:-0.4129999999999999em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mbin">+</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.247em;margin-left:0em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathrm">2</span></span></span><span style="top:-0.4129999999999999em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mbin">+</span><span class="minner">⋯</span><span class="mbin">+</span><span class="mord"><span class="mord mathit">x</span><span class="vlist"><span style="top:0.247em;margin-left:0em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord mathit">n</span></span></span><span style="top:-0.4129999999999999em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span></span></span></span></span></p>\n' +
'<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msubsup><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>0</mn></mrow><mi>n</mi></msubsup><msup><mi>i</mi><mn>2</mn></msup><mo>=</mo><mfrac><mrow><mo>(</mo><msup><mi>n</mi><mn>2</mn></msup><mo>+</mo><mi>n</mi><mo>)</mo><mo>(</mo><mn>2</mn><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo></mrow><mrow><mn>6</mn></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}\n' +
'</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:1.6513970000000002em;"></span><span class="strut bottom" style="height:2.929066em;vertical-align:-1.277669em;"></span><span class="base displaystyle textstyle uncramped"><span class="mop op-limits"><span class="vlist"><span style="top:1.1776689999999999em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle cramped"><span class="mord scriptstyle cramped"><span class="mord mathit">i</span><span class="mrel">=</span><span class="mord mathrm">0</span></span></span></span><span style="top:-0.000005000000000143778em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span><span class="op-symbol large-op mop">∑</span></span></span><span style="top:-1.2500050000000003em;margin-left:0em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathit">n</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mord"><span class="mord mathit">i</span><span class="vlist"><span style="top:-0.413em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mrel">=</span><span class="mord reset-textstyle displaystyle textstyle uncramped"><span class="sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter"></span><span class="mfrac"><span class="vlist"><span style="top:0.686em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle textstyle cramped"><span class="mord textstyle cramped"><span class="mord mathrm">6</span></span></span></span><span style="top:-0.22999999999999998em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle textstyle uncramped frac-line"></span></span><span style="top:-0.677em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle textstyle uncramped"><span class="mord textstyle uncramped"><span class="mopen">(</span><span class="mord"><span class="mord mathit">n</span><span class="vlist"><span style="top:-0.363em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span><span class="reset-textstyle scriptstyle uncramped"><span class="mord mathrm">2</span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="mbin">+</span><span class="mord mathit">n</span><span class="mclose">)</span><span class="mopen">(</span><span class="mord mathrm">2</span><span class="mord mathit">n</span><span class="mbin">+</span><span class="mord mathrm">1</span><span class="mclose">)</span></span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;"></span></span></span></span></span><span class="sizing reset-size5 size5 reset-textstyle textstyle uncramped nulldelimiter"></span></span></span></span></span></span></p>\n' +
'<p data-source="160">访问 <a href="http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">MathJax</a> 参考更多使用方法。</p>\n' +
'<h1 data-source="162"><a id="_161"></a>流程图</h1>\n' +
'<div class="md-flowchart" data-source="164">start=>start: 开始\n' +
'loginInfo=>inputoutput: 登录数据\n' +
'verifyLogin=>subroutine: 登录验证\n' +
'isSuccess=>condition: 验证成功？\n' +
'respondSuccess=>operation: 响应成功\n' +
'responseFailure=>operation: 响应失败\n' +
'end=>end: 结束\n' +
'\n' +
'start->loginInfo->verifyLogin->isSuccess\n' +
'isSuccess(yes)->respondSuccess->end\n' +
'isSuccess(no)->responseFailure->end</div><h1 data-source="178"><a id="_177"></a>视频、音频</h1>\n' +
'<p data-source="180"><video id="video"\n' +
' controls=""\n' +
' preload="none"\n' +
' width="100%"\n' +
' >\n' +
'<source id="mp4"\n' +
' src="https://www.w3school.com.cn/i/movie.ogg"\n' +
' type="video/mp4">\n' +
'</video></p>\n' +
'<p data-source="190"><audio id="audio"\n' +
' controls=""\n' +
' preload="none">\n' +
'<source id="mp3"\n' +
' src="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_849867&response=res&type=convert_url&">\n' +
'</audio></p>\n' +
'<h1 data-source="197"><a id="_196"></a>脚注</h1>\n' +
'<p data-source="198">生成一个脚注1<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.\n' +
'生成一个脚注2<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>.</p>\n' +
'<hr class="footnotes-sep">\n' +
'<section class="footnotes">\n' +
'<ol class="footnotes-list">\n' +
'<li id="fn1" class="footnote-item"><p data-source="200">这里是 <strong>脚注</strong> 的 <em>内容</em>. <a href="#fnref1" class="footnote-backref">↩︎</a></p>\n' +
'</li>\n' +
'<li id="fn2" class="footnote-item"><p data-source="201">这里是<strong>脚注2</strong>的<em>内容</em>. <a href="#fnref2" class="footnote-backref">↩︎</a></p>\n' +
'</li>\n' +
'</ol>\n' +
'</section>\n',
mdContent: '@[TOC](导航)\n' +
'Markdown 语法简介\n' +
'# 字符效果、分隔线\n' +
'----\n' +
'\n' +
'~~删除~~\n' +
'\n' +
'*斜体字* _斜体字_\n' +
'\n' +
'**粗体** __粗体__\n' +
'\n' +
'***粗斜体*** ___粗斜体___\n' +
'\n' +
'上标：X<sup>2</sup>，X^2^\n' +
'下标：O<sub>2</sub>， X~2~\n' +
'\n' +
'**缩写(同HTML的abbr标签)**\n' +
'\n' +
'The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.\n' +
'\n' +
'# 引用\n' +
'\n' +
'> 引用文本\n' +
'\n' +
'# 锚点与链接 Links\n' +
'[普通链接](https://gitee.com/Chave-Z/vue-md-editor/)\n' +
'\n' +
'[普通链接带标题](https://gitee.com/Chave-Z/vue-md-editor/ "普通链接带标题")\n' +
'\n' +
'直接链接：<https://gitee.com/Chave-Z/vue-md-editor>\n' +
'\n' +
'# 代码高亮\n' +
'\n' +
'## 行内代码\n' +
'\n' +
'\n' +
'执行命令：`Inline code...`\n' +
'\n' +
'## 缩进风格\n' +
'\n' +
' <toolbar ref="toolbar">\n' +
' </toolbar>\n' +
'\n' +
'## JS代码\n' +
'```javascript\n' +
'function test() {\n' +
'\tconsole.log("Hello world!");\n' +
'}\n' +
'```\n' +
'\n' +
'## HTML 代码 HTML codes\n' +
'```html\n' +
'<!DOCTYPE html>\n' +
'<html>\n' +
' <head>\n' +
' <mate charest="utf-8" />\n' +
' <title>Hello world!</title>\n' +
' </head>\n' +
' <body>\n' +
' <h1 class="text-xxl">Hello world!</h1>\n' +
' </body>\n' +
'</html>\n' +
'```\n' +
'# 图片 Images\n' +
'## 图片 Image\n' +
'\n' +
'\n' +
'## 图片加链接 (Image + Link)\n' +
'\n' +
'[](https://www.runoob.com/wp-content/uploads/2019/03/iconfinder_markdown_298823.png "markdown")\n' +
'\n' +
'---\n' +
'\n' +
'# 列表 Lists\n' +
'\n' +
'## 无序列表（减号）Unordered Lists (-)\n' +
'\n' +
'- 列表一\n' +
'- 列表二\n' +
'- 列表三\n' +
'\n' +
'## 无序列表（星号）Unordered Lists (*)\n' +
'\n' +
'* 列表一\n' +
'* 列表二\n' +
'* 列表三\n' +
'\n' +
'## 无序列表（加号和嵌套）Unordered Lists (+)\n' +
'+ 列表一\n' +
'+ 列表二\n' +
' + 列表二-1\n' +
' + 列表二-2\n' +
' + 列表二-3\n' +
'+ 列表三\n' +
' * 列表一\n' +
' * 列表二\n' +
' * 列表三\n' +
'\n' +
'## 有序列表 Ordered Lists (-)\n' +
'\n' +
'1. 第一行\n' +
'2. 第二行\n' +
'3. 第三行\n' +
'\n' +
'# GFM task list\n' +
'\n' +
'- [x] GFM task list 1\n' +
'- [x] GFM task list 2\n' +
'- [ ] GFM task list 3\n' +
' - [ ] GFM task list 3-1\n' +
' - [ ] GFM task list 3-2\n' +
' - [ ] GFM task list 3-3\n' +
'- [ ] GFM task list 4\n' +
' - [ ] GFM task list 4-1\n' +
' - [ ] GFM task list 4-2\n' +
'\n' +
'----\n' +
'\n' +
'# 绘制表格\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| ------------ | ------------ |\n' +
'| 内容内容 | 内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| :------------ | :------------ |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| :------------: | :------------: |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'\n' +
'| 标题 | 标题 |\n' +
'| ------------: | ------------: |\n' +
'| 内容内容内容内容 | 内容内容内容内容 |\n' +
'| 内容 | 内容 |\n' +
'----\n' +
'\n' +
'# Emoji表情\n' +
'访问 [webfx](https://www.webfx.com/tools/emoji-cheat-sheet/) 参考更多使用方法。\n' +
'\n' +
':sunny: :umbrella: :cloud: :snowflake: :snowman: :zap: :cyclone: :foggy: :ocean: :cat: :dog:\n' +
'# LaTeX 公式\n' +
'\n' +
'`$` 表示行内公式： \n' +
'\n' +
'质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。\n' +
'\n' +
'`$$ `表示整行公式：\n' +
'\n' +
'$$\\sum_{i=1}^n a_i=0$$\n' +
'\n' +
'$$f(x_1,x_x,\\ldots,x_n) = x_1^2 + x_2^2 + \\cdots + x_n^2 $$\n' +
'\n' +
'$$\\sum_{i=0}^n i^2 = \\frac{(n^2+n)(2n+1)}{6}$$\n' +
'\n' +
'访问 [MathJax](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) 参考更多使用方法。\n' +
'\n' +
'# 流程图\n' +
'\n' +
'```flow\n' +
'start=>start: 开始\n' +
'loginInfo=>inputoutput: 登录数据\n' +
'verifyLogin=>subroutine: 登录验证\n' +
'isSuccess=>condition: 验证成功？\n' +
'respondSuccess=>operation: 响应成功\n' +
'responseFailure=>operation: 响应失败\n' +
'end=>end: 结束\n' +
'\n' +
'start->loginInfo->verifyLogin->isSuccess\n' +
'isSuccess(yes)->respondSuccess->end\n' +
'isSuccess(no)->responseFailure->end\n' +
'```\n' +
'\n' +
'# 视频、音频\n' +
'\n' +
'<video id="video"\n' +
' controls=""\n' +
' preload="none"\n' +
' width="100%"\n' +
' >\n' +
' <source id="mp4"\n' +
' src="https://www.w3school.com.cn/i/movie.ogg"\n' +
' type="video/mp4">\n' +
'</video>\n' +
'\n' +
'<audio id="audio"\n' +
' controls=""\n' +
' preload="none">\n' +
' <source id="mp3"\n' +
' src="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_849867&response=res&type=convert_url&">\n' +
'</audio>\n' +
'\n' +
'# 脚注\n' +
'生成一个脚注1[^footnote].\n' +
'生成一个脚注2[^foot].\n' +
'[^footnote]: 这里是 **脚注** 的 *内容*.\n' +
' [^foot]:这里是**脚注2**的*内容*.\n'
}
},
methods: {}
})
</script>
<style>
#app {
width: 1200px;
height: 500px;
margin: 50px auto;
}
#main {
color: #2c3e50;
width: 100%;
height: 100%;
}
#main > div {
width: 100%;
}
</style>
</html>