blog-hexo/public/2023/10/23/Markdown Sample/index.html
2023-11-06 16:08:26 +08:00

670 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Markdown Sample
</title>
<meta name="description" content="A very simple way to add structured data to a page.">
<meta name="keywords" content="Markdown, 代码高亮 (Codes), 引用 (Blockquotes), 列表 (Lists), 图片 (Images), 表格 (Tables), Emoji, TeX(KaTeX), 流程图 (mermaid)">
<meta name="author" content="Mozzie">
<link rel="canonical" href="https://mozzie.cn/2023/10/23/Markdown%20Sample/">
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
<link rel="stylesheet" href="/css/26c34ce6.css">
<meta name="generator" content="Hexo 6.3.0"></head>
<body id="app">
<!-- 响应式布局按钮 -->
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<path d="M9 4v16"></path>
</g>
</svg>
</a>
<aside>
<div>
<link rel="stylesheet" href="/css/5bfc518f.css">
<div class="home-bar">
<a href="/" class="tip" data-tip="Home">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
fill="currentColor"></path>
</svg>
<span>Mozzie</span>
</a>
<!-- 切换主题 -->
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
<path
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
fill="currentColor"></path>
<path
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
fill="currentColor"></path>
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
<path
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
fill="currentColor"></path>
<path
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
fill="currentColor"></path>
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
fill="currentColor"></path>
</svg>
</a>
</div>
<script src="/js/0c01b885.js"></script>
<!-- search -->
<link rel="stylesheet" href="/css/3320a187.css">
<form class="search-group">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
<g fill="currentColor">
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
</g>
</svg>
<span id="search-input">Search...</span>
<div class="short-key">
<kbd class="key-cap"><span>Ctrl K</span></kbd>
</div>
</form>
<script>
window.algolia = {
appId: "5DTW808BZ8",
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
}
window.search = {
enable: "true"
}
</script>
<script src="/js/9f145c31.js"></script>
<!-- navigation -->
<link rel="stylesheet" href="/css/3efc6cb5.css">
<section class="category-nav scrollbar-obtrusive">
<ul class="nav-items">
<li data-path="archives">
<a href="/archives">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 7v14"></path>
<path d="M9 18l3 3l3-3"></path>
<circle cx="12" cy="5" r="2"></circle>
</g>
</svg>
<div class="ellipsis">Timeline</div>
</a>
</li>
<li data-path="roadmap">
<a href="/roadmap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
<path d="M13 9l2 2l-2 2"></path>
</g>
</svg>
<div class="ellipsis">Roadmap</div>
</a>
</li>
<li data-path="resume">
<a href="/resume">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
<circle cx="6" cy="14" r="3"></circle>
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
</g>
</svg>
<div class="ellipsis">Resume</div>
</a>
</li>
</ul>
<p>Category</p>
<ul>
<li class="">
<a href="/categories/EQ/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
<div class="ellipsis">
<span>
EQ
</span>
</div>
</a>
</li>
<li class="active">
<a href="/categories/Hexo/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
<div class="ellipsis">
<span>
Hexo
</span>
</div>
</a>
</li>
<li class="">
<a href="/categories/Finance/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
<div class="ellipsis">
<span>
Finance
</span>
</div>
</a>
</li>
<li class="">
<a href="/categories/Front-End/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
<div class="ellipsis">
<span>
Front-End
</span>
</div>
</a>
</li>
</ul>
</section>
<script src="/js/f8b20eb9.js"></script>
<!-- icp -->
<div class="icp">
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
</div>
</div>
</aside>
<main>
<link rel="stylesheet" href="/css/e74b16a9.css">
<div class="post-container">
<div class="content">
<header>
<link rel="stylesheet" href="/css/de5de8fb.css">
<nav class="breadcrumb">
<a href="/" class="home tip btn-hover right" data-tip="Home">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
</svg>
</a>
<em>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
<g fill="none">
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
</g>
</svg>
</em>
<a href="/categories/Hexo/">
Hexo
</a>
<em>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
<g fill="none">
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
</g>
</svg>
</em>
<span class="ellipsis">
Markdown Sample
</span>
</nav>
<script src="/js/31d6cfe0.js"></script>
</header>
<main class="scrollbar-obtrusive">
<div class="article-container">
<!-- 文章tags -->
<!-- 渲染文章内容 -->
<article><h1 id="Linear-Markdown-Sample"><a href="#Linear-Markdown-Sample" class="headerlink" title="Linear Markdown Sample"></a>Linear Markdown Sample</h1><p><img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png" alt="markdown"></p>
<h1 id="Heading-1-link-Heading-link"><a href="#Heading-1-link-Heading-link" class="headerlink" title="Heading 1 link Heading link"></a>Heading 1 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h1><h2 id="Heading-2-link-Heading-link"><a href="#Heading-2-link-Heading-link" class="headerlink" title="Heading 2 link Heading link"></a>Heading 2 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h2><h3 id="Heading-3-link-Heading-link"><a href="#Heading-3-link-Heading-link" class="headerlink" title="Heading 3 link Heading link"></a>Heading 3 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h3><h4 id="Heading-4-link-Heading-link-Heading-link-Heading-link"><a href="#Heading-4-link-Heading-link-Heading-link-Heading-link" class="headerlink" title="Heading 4 link Heading link Heading link Heading link"></a>Heading 4 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a> Heading link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h4><h5 id="Heading-5-link-Heading-link"><a href="#Heading-5-link-Heading-link" class="headerlink" title="Heading 5 link Heading link"></a>Heading 5 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h5><h6 id="Heading-6-link-Heading-link"><a href="#Heading-6-link-Heading-link" class="headerlink" title="Heading 6 link Heading link"></a>Heading 6 link <a target="_blank" rel="noopener" href="https://github.com/pandao/editor.md" title="Heading link">Heading link</a></h6><h1 id="字符效果和横线等"><a href="#字符效果和横线等" class="headerlink" title="字符效果和横线等"></a>字符效果和横线等</h1><hr>
<p><del>删除线</del> <s>删除线开启识别HTML标签时</s><br><em>斜体字</em> <em>斜体字</em><br><strong>粗体</strong> <strong>粗体</strong><br><em><strong>粗斜体</strong></em> <em><strong>粗斜体</strong></em></p>
<p>上标X<sub>2</sub>下标O<sup>2</sup></p>
<p><strong>缩写(同HTML的abbr标签)</strong></p>
<blockquote>
<p>即更长的单词或短语的缩写形式前提是开启识别HTML标签时已默认开启</p>
</blockquote>
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
<h1 id="引用-Blockquotes"><a href="#引用-Blockquotes" class="headerlink" title="引用 Blockquotes"></a>引用 Blockquotes</h1><blockquote>
<p>引用文本 Blockquotes</p>
</blockquote>
<p>引用的行内混合 Blockquotes</p>
<blockquote>
<p>引用:如果想要插入空白换行<code>&lt;br /&gt;标签</code>,在插入处先键入两个以上的空格然后回车即可,<a target="_blank" rel="noopener" href="http://localhost/">普通链接</a></p>
</blockquote>
<h1 id="锚点与链接-Links"><a href="#锚点与链接-Links" class="headerlink" title="锚点与链接 Links"></a>锚点与链接 Links</h1><p><a target="_blank" rel="noopener" href="http://localhost/">普通链接</a></p>
<p><a target="_blank" rel="noopener" href="http://localhost/" title="普通链接带标题">普通链接带标题</a></p>
<p>直接链接:<a target="_blank" rel="noopener" href="https://github.com/">https://github.com</a></p>
<p><a target="_blank" rel="noopener" href="https://baidu.com/">https://baidu.com</a></p>
<p><a target="_blank" rel="noopener" href="http://www.this-anchor-link.com/">锚点链接</a> </p>
<p><a href="mailto:test.test@gmail.com">mailto:test.test@gmail.com</a></p>
<p>GFM a-tail link <a target="_blank" rel="noopener" href="https://my.oschina.net/u/3691274">@pandao</a> 邮箱地址自动链接 <a href="mailto:&#x74;&#x65;&#x73;&#116;&#x2e;&#116;&#x65;&#x73;&#x74;&#64;&#103;&#109;&#97;&#105;&#x6c;&#x2e;&#x63;&#x6f;&#x6d;">&#x74;&#x65;&#x73;&#116;&#x2e;&#116;&#x65;&#x73;&#x74;&#64;&#103;&#109;&#97;&#105;&#x6c;&#x2e;&#x63;&#x6f;&#x6d;</a> <a href="mailto:&#119;&#119;&#119;&#64;&#x76;&#105;&#112;&#46;&#x71;&#113;&#46;&#x63;&#111;&#109;">&#119;&#119;&#119;&#64;&#x76;&#105;&#112;&#46;&#x71;&#113;&#46;&#x63;&#111;&#109;</a></p>
<blockquote>
<p>@pandao</p>
</blockquote>
<h1 id="多语言代码高亮-Codes"><a href="#多语言代码高亮-Codes" class="headerlink" title="多语言代码高亮 Codes"></a>多语言代码高亮 Codes</h1><h2 id="行内代码-Inline-code"><a href="#行内代码-Inline-code" class="headerlink" title="行内代码 Inline code"></a>行内代码 Inline code</h2><p>执行命令:<code>npm install marked</code></p>
<h2 id="JS代码"><a href="#JS代码" class="headerlink" title="JS代码"></a>JS代码</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello world!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
<span class="token keyword">var</span> <span class="token function-variable function">box</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
<span class="token keyword">return</span> box<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
box<span class="token punctuation">.</span>prototype <span class="token operator">=</span> box<span class="token punctuation">.</span>fn <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
<span class="token function-variable function">init</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'box.init()'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token function-variable function">add</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"add"</span><span class="token punctuation">,</span> str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token function-variable function">remove</span> <span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"remove"</span><span class="token punctuation">,</span> str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
box<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init<span class="token punctuation">.</span>prototype <span class="token operator">=</span> box<span class="token punctuation">.</span>fn<span class="token punctuation">;</span>
window<span class="token punctuation">.</span>box <span class="token operator">=</span>box<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> testBox <span class="token operator">=</span> <span class="token function">box</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
testBox<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"jQuery"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"jQuery"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="HTML-代码-HTML-codes"><a href="#HTML-代码-HTML-codes" class="headerlink" title="HTML 代码 HTML codes"></a>HTML 代码 HTML codes</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mate</span> <span class="token attr-name">charest</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Editor.md, Markdown, Editor<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">body</span><span class="token punctuation">&#123;</span><span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span>#444<span class="token punctuation">;</span><span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Microsoft Yahei"</span><span class="token punctuation">,</span> Tahoma<span class="token punctuation">,</span> <span class="token string">"Hiragino Sans GB"</span><span class="token punctuation">,</span> Arial<span class="token punctuation">;</span><span class="token property">background</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
<span class="token selector">ul</span><span class="token punctuation">&#123;</span><span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
<span class="token selector">img</span><span class="token punctuation">&#123;</span><span class="token property">border</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-xxl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-green<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Plain text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h1 id="图片-Images"><a href="#图片-Images" class="headerlink" title="图片 Images"></a>图片 Images</h1><p>Image:</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/4.jpg"></p>
<blockquote>
<p>Follow your heart.</p>
</blockquote>
<p><img src="https://pandao.github.io/editor.md/examples/images/8.jpg"></p>
<blockquote>
<p>图为:厦门白城沙滩</p>
</blockquote>
<p>图片加链接 (Image + Link)</p>
<p><a target="_blank" rel="noopener" href="https://pandao.github.io/editor.md/images/7.jpg" title="李健首张专辑《似水流年》封面"><img src="https://pandao.github.io/editor.md/examples/images/7.jpg"></a></p>
<blockquote>
<p>图为:李健首张专辑《似水流年》封面</p>
</blockquote>
<hr>
<h1 id="列表-Lists"><a href="#列表-Lists" class="headerlink" title="列表 Lists"></a>列表 Lists</h1><h2 id="无序列表减号Unordered-Lists"><a href="#无序列表减号Unordered-Lists" class="headerlink" title="无序列表减号Unordered Lists (-)"></a>无序列表减号Unordered Lists (-)</h2><ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<h2 id="无序列表星号Unordered-Lists"><a href="#无序列表星号Unordered-Lists" class="headerlink" title="无序列表星号Unordered Lists (*)"></a>无序列表星号Unordered Lists (*)</h2><ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<h2 id="无序列表加号和嵌套Unordered-Lists"><a href="#无序列表加号和嵌套Unordered-Lists" class="headerlink" title="无序列表加号和嵌套Unordered Lists (+)"></a>无序列表加号和嵌套Unordered Lists (+)</h2><ul>
<li>列表一</li>
<li>列表二<ul>
<li>列表二-1</li>
<li>列表二-2</li>
<li>列表二-3</li>
</ul>
</li>
<li>列表三<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</li>
</ul>
<h2 id="有序列表-Ordered-Lists"><a href="#有序列表-Ordered-Lists" class="headerlink" title="有序列表 Ordered Lists (-)"></a>有序列表 Ordered Lists (-)</h2><ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<h2 id="GFM-task-list"><a href="#GFM-task-list" class="headerlink" title="GFM task list"></a>GFM task list</h2><ul>
<li><input checked="" disabled="" type="checkbox"> GFM task list 1</li>
<li><input checked="" disabled="" type="checkbox"> GFM task list 2</li>
<li><input disabled="" type="checkbox"> GFM task list 3<ul>
<li><input disabled="" type="checkbox"> GFM task list 3-1</li>
<li><input disabled="" type="checkbox"> GFM task list 3-2</li>
<li><input disabled="" type="checkbox"> GFM task list 3-3</li>
</ul>
</li>
<li><input disabled="" type="checkbox"> GFM task list 4<ul>
<li><input disabled="" type="checkbox"> GFM task list 4-1</li>
<li><input disabled="" type="checkbox"> GFM task list 4-2</li>
</ul>
</li>
</ul>
<hr>
<h1 id="绘制表格-Tables"><a href="#绘制表格-Tables" class="headerlink" title="绘制表格 Tables"></a>绘制表格 Tables</h1><table>
<thead>
<tr>
<th>项目</th>
<th align="right">价格</th>
<th align="center">数量</th>
</tr>
</thead>
<tbody><tr>
<td>计算机</td>
<td align="right">$1600</td>
<td align="center">5</td>
</tr>
<tr>
<td>手机</td>
<td align="right">$12</td>
<td align="center">12</td>
</tr>
<tr>
<td>管线</td>
<td align="right">$1</td>
<td 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 align="left">Left-Aligned</th>
<th align="center">Center Aligned</th>
<th align="right">Right Aligned</th>
</tr>
</thead>
<tbody><tr>
<td align="left">col 3 is</td>
<td align="center">some wordy text</td>
<td align="right">$1600</td>
</tr>
<tr>
<td align="left">col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td align="left">zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>Item</th>
<th align="right">Value</th>
</tr>
</thead>
<tbody><tr>
<td>Computer</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>Phone</td>
<td align="right">$12</td>
</tr>
<tr>
<td>Pipe</td>
<td align="right">$1</td>
</tr>
</tbody></table>
<h1 id="科学公式-TeX-KaTeX"><a href="#科学公式-TeX-KaTeX" class="headerlink" title="科学公式 TeX(KaTeX)"></a>科学公式 TeX(KaTeX)</h1><p>$$E&#x3D;mc^2$$</p>
<p>$$x &gt; y$$</p>
<p>$$(\sqrt{3x-1}+(1+x)^2)$$</p>
<p>$$\sin(\alpha)^{\theta}&#x3D;\sum_{i&#x3D;0}^{n}(x^i + \cos(f))$$</p>
<h1 id="绘制流程图-mermaid"><a href="#绘制流程图-mermaid" class="headerlink" title="绘制流程图 mermaid"></a>绘制流程图 mermaid</h1><div class="mermaid">
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
</div>
<p>End</p>
</article>
<link rel="stylesheet" href="/css/80d65618.css">
<div class="copyright">
<a target="_blank" href="https://mozzie.cn/2023/10/23/Markdown%20Sample/">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
<path d="M3 6v13"></path>
<path d="M12 6v13"></path>
<path d="M21 6v13"></path>
</g>
</svg>
<span>Markdown Sample</span>
</a>
<ul>
<li>
<span>Author</span>
<p> Mozzie</p>
</li>
<li>
<span>Published on</span>
<p>2023-10-23</p>
</li>
<li>
<span>License</span>
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
</li>
</ul>
</div>
<script src="/js/31d6cfe0.js"></script>
<!-- 评论 -->
<div id="vcomments"></div>
</div>
</main>
</div>
<div class="meta-container">
<div class="toc-wrapper content-dialog">
<p class="catalog">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 6h16"></path>
<path d="M4 12h16"></path>
<path d="M4 18h12"></path>
</g>
</svg>
<span>Catalog</span>
</p>
<!-- 文章toc -->
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Linear-Markdown-Sample"><span class="toc-number">1.</span> <span class="toc-text">Linear Markdown Sample</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Heading-1-link-Heading-link"><span class="toc-number">2.</span> <span class="toc-text">Heading 1 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Heading-2-link-Heading-link"><span class="toc-number">2.1.</span> <span class="toc-text">Heading 2 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Heading-3-link-Heading-link"><span class="toc-number">2.1.1.</span> <span class="toc-text">Heading 3 link Heading link</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E6%95%88%E6%9E%9C%E5%92%8C%E6%A8%AA%E7%BA%BF%E7%AD%89"><span class="toc-number">3.</span> <span class="toc-text">字符效果和横线等</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E7%94%A8-Blockquotes"><span class="toc-number">4.</span> <span class="toc-text">引用 Blockquotes</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%94%9A%E7%82%B9%E4%B8%8E%E9%93%BE%E6%8E%A5-Links"><span class="toc-number">5.</span> <span class="toc-text">锚点与链接 Links</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%9A%E8%AF%AD%E8%A8%80%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE-Codes"><span class="toc-number">6.</span> <span class="toc-text">多语言代码高亮 Codes</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E4%BB%A3%E7%A0%81-Inline-code"><span class="toc-number">6.1.</span> <span class="toc-text">行内代码 Inline code</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E4%BB%A3%E7%A0%81"><span class="toc-number">6.2.</span> <span class="toc-text">JS代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML-%E4%BB%A3%E7%A0%81-HTML-codes"><span class="toc-number">6.3.</span> <span class="toc-text">HTML 代码 HTML codes</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E7%89%87-Images"><span class="toc-number">7.</span> <span class="toc-text">图片 Images</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%88%97%E8%A1%A8-Lists"><span class="toc-number">8.</span> <span class="toc-text">列表 Lists</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%EF%BC%88%E5%87%8F%E5%8F%B7%EF%BC%89Unordered-Lists"><span class="toc-number">8.1.</span> <span class="toc-text">无序列表减号Unordered Lists (-)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%EF%BC%88%E6%98%9F%E5%8F%B7%EF%BC%89Unordered-Lists"><span class="toc-number">8.2.</span> <span class="toc-text">无序列表星号Unordered Lists (*)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%EF%BC%88%E5%8A%A0%E5%8F%B7%E5%92%8C%E5%B5%8C%E5%A5%97%EF%BC%89Unordered-Lists"><span class="toc-number">8.3.</span> <span class="toc-text">无序列表加号和嵌套Unordered Lists (+)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8-Ordered-Lists"><span class="toc-number">8.4.</span> <span class="toc-text">有序列表 Ordered Lists (-)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#GFM-task-list"><span class="toc-number">8.5.</span> <span class="toc-text">GFM task list</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%98%E5%88%B6%E8%A1%A8%E6%A0%BC-Tables"><span class="toc-number">9.</span> <span class="toc-text">绘制表格 Tables</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%A7%91%E5%AD%A6%E5%85%AC%E5%BC%8F-TeX-KaTeX"><span class="toc-number">10.</span> <span class="toc-text">科学公式 TeX(KaTeX)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%98%E5%88%B6%E6%B5%81%E7%A8%8B%E5%9B%BE-mermaid"><span class="toc-number">11.</span> <span class="toc-text">绘制流程图 mermaid</span></a></li></ol>
</div>
</div>
</div>
<script>
window.katex = {
enable: "true",
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
}
window.mermaid = {
enable: "true",
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
}
window.valine = {
enable: "false",
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
avatar: 'monsterid',
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
serverURLs: '//tismit6u.api.lncldglobal.com'
};
</script>
<script src="/js/a02fa72b.js"></script>
</main>
</body>
<script>
window.i18n = {
"tip-collapse": "Collapse",
"tip-expand": "Expand",
"text-select": "select",
"text-move": "movement",
"text-esc": "close",
"tip-status-done": "Done",
"tip-status-doing": "In Progress",
"tip-status-todo": "Todo",
"tip-status-other": "Duplicate",
"tip-status-default": "Default",
"tip-roadmap-today": "Positioning to the today",
"text-search": "Search...",
"text-today": "Today",
// month
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"May": "May",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December",
}
</script>
<script src="/js/f7dea7e6.js"></script>
</html>