<!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/d78c65bd.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/e01add4b.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/ae2a0e7b.js"></script>
<!-- search -->
<link rel="stylesheet" href="/css/4c3d0e88.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"
}
</script>
<script src="/js/07f44e09.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="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="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>
Hexo
</span>
</div>
</a>
</li>
<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="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>
EQ
</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/32ae9342.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>即<br />标签</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:test.test@gmail.com">test.test@gmail.com</a> <a href="mailto:www@vip.qq.com">www@vip.qq.com</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">{</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">}</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">{</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">{</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">}</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">{</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">{</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">}</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">{</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">}</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">{</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">}</span>
<span class="token punctuation">}</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">}</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"><!</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"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"><</span>title</span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">{</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">}</span>
<span class="token selector">ul</span><span class="token punctuation">{</span><span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">img</span><span class="token punctuation">{</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">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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=mc^2$$</p>
<p>$$x > y$$</p>
<p>$$(\sqrt{3x-1}+(1+x)^2)$$</p>
<p>$$\sin(\alpha)^{\theta}=\sum_{i=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/ccbcde32.css">
<div class="copyright">
<a target="_blank" href="https://mozzie.cn/2023/10/23/Markdown%20Sample/">
<span>Post Url：</span>
<span>https://mozzie.cn/2023/10/23/Markdown%20Sample/</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: "true",
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/58c91c4e.js"></script>
</html>