feat: add vim.md regex.md cheatsheet. 9ff36a3ac3

2025-06-17 20:51:21 +08:00 · 2022-10-01 19:24:21 +00:00
parent 2d29a6c38d
commit 811895f4c5
26 changed files with 13793 additions and 9877 deletions
--- a/docs/quickreference.html
+++ b/docs/quickreference.html
@ -41,7 +41,8 @@
 <p>简单的将仓库克隆下来本地调试页面展示。</p>
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="克隆仓库"><a aria-hidden="true" tabindex="-1" href="#克隆仓库"><span class="icon icon-link"></span></a>克隆仓库</h4><div class="wrap-body">
 <pre class="wrap-text "><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> clone git@github.com:jaywcjlove/reference.git
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="安装依赖编译生成-html-页面"><a aria-hidden="true" tabindex="-1" href="#安装依赖编译生成-html-页面"><span class="icon icon-link"></span></a>安装依赖编译生成 HTML 页面</h4><div class="wrap-body">
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> i         <span class="token comment"># 安装依赖</span>
 </span><span class="code-line line-number" line="2"><span class="token function">npm</span> run build <span class="token comment"># 编译输出 HTML</span>
@ -55,16 +56,19 @@
 </span><span class="code-line line-number" line="3">
 </span><span class="code-line line-number" line="4">卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
 </span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 <p>使用 <code>col-span-2</code> 类标识，卡片占 <code>2</code> 列位置</p>
-</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 style="color:black;background-color: #d7a100;" id="注释语法介绍"><a aria-hidden="true" tabindex="-1" href="#注释语法介绍"><span class="icon icon-link"></span></a>注释语法介绍</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
+</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 style="color:black;background-color: #d7a100;" id="注释语法介绍"><a aria-hidden="true" tabindex="-1" href="#注释语法介绍"><span class="icon icon-link"></span></a>注释语法介绍</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
 <ul>
-  <li>在某个 Markdown 语法下方或者后面，添加 HTML注释</li>
-  <li>以 <code>&#x3C;!--rehype:</code> 开始，<code>--></code> 结束，包裹参数内容</li>
-  <li>内容采用 URL 参数的字符拼接方式</li>
+<li>在某个 Markdown 语法下方或者后面，添加 HTML注释</li>
+<li>以 <code>&#x3C;!--rehype:</code> 开始，<code>--></code> 结束，包裹参数内容</li>
+<li>内容采用 URL 参数的字符拼接方式</li>
 </ul>
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="语法"><a aria-hidden="true" tabindex="-1" href="#语法"><span class="icon icon-link"></span></a>语法</h4><div class="wrap-body">
-<p><code>&#x3C;!--rehype:</code> + <code>key=value</code> + <code>&#x26;</code> + <code>key=value</code> + <code>--></code><br><code>标识开始</code> + <code>参数</code> + <code>分隔符</code> + <code>参数</code> + <code>标识结束</code></p>
+<p><code>&#x3C;!--rehype:</code> + <code>key=value</code> + <code>&#x26;</code> + <code>key=value</code> + <code>--></code><br>
+<code>标识开始</code>     + <code>参数</code>     + <code>分隔符</code> + <code>参数</code>  + <code>标识结束</code></p>
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h4><div class="wrap-body">
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H2 部分</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
@ -75,34 +79,35 @@
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="示例三行占位标题红色"><a aria-hidden="true" tabindex="-1" href="#示例三行占位标题红色"><span class="icon icon-link"></span></a>示例，三行占位，标题红色</h4><div class="wrap-body">
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 标题</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-3&#x26;style=color:red;--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="参数说明"><a aria-hidden="true" tabindex="-1" href="#参数说明"><span class="icon icon-link"></span></a>参数说明</h4><div class="wrap-body">
-<table>
-  <thead>
-    <tr>
-      <th>类</th>
-      <th>说明</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>body-style</code></td>
-      <td>包裹所有卡片<code>外壳</code>的样式</td>
-    </tr>
-    <tr>
-      <td><code>body-class</code></td>
-      <td>用于卡片栏布局，添加<code>类</code>名</td>
-    </tr>
-    <tr>
-      <td><code>wrap-style</code></td>
-      <td>卡片栏添加 CSS 样式</td>
-    </tr>
-    <tr>
-      <td><code>wrap-class</code></td>
-      <td>用于卡片占位，添加<code>类</code>名</td>
-    </tr>
-  </tbody>
-</table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th>类</th><th>说明</th></tr></thead><tbody><tr><td><code>body-style</code></td><td>包裹所有卡片<code>外壳</code>的样式</td></tr><tr><td><code>body-class</code></td><td>用于卡片栏布局，添加<code>类</code>名</td></tr><tr><td><code>wrap-style</code></td><td>卡片栏添加 CSS 样式</td></tr><tr><td><code>wrap-class</code></td><td>用于卡片占位，添加<code>类</code>名</td></tr></tbody></table>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="文字颜色"><a aria-hidden="true" tabindex="-1" href="#文字颜色"><span class="icon icon-link"></span></a>文字颜色</h3><div class="wrap-body">
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token italic"><span class="token punctuation">_</span><span class="token content">我是红色</span><span class="token punctuation">_</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
 </span><span class="code-line line-number" line="2"><span class="token bold"><span class="token punctuation">**</span><span class="token content">加粗红色</span><span class="token punctuation">**</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
@ -111,7 +116,8 @@
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="文字大小"><a aria-hidden="true" tabindex="-1" href="#文字大小"><span class="icon icon-link"></span></a>文字大小</h3><div class="wrap-body">
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token bold"><span class="token punctuation">**</span><span class="token content">加粗变大红色</span><span class="token punctuation">**</span></span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:style=color: red;font-size: 18px--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 <p>上面添加注释样式，文字 <em style="color: red;font-size: 18px">加粗变大红色</em><!--rehype:style=color: red;font-size: 18px--> 变<code>红</code>并且<code>大</code>了</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="强制换行"><a aria-hidden="true" tabindex="-1" href="#强制换行"><span class="icon icon-link"></span></a>强制换行</h3><div class="wrap-body">
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">\```js
@ -130,16 +136,89 @@
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="tooltips"><a aria-hidden="true" tabindex="-1" href="#tooltips"><span class="icon icon-link"></span></a>Tooltips</h3><div class="wrap-body">
 <p><a href="https://github.com/jaywcjlove/reference" class="tooltip">鼠标移动到上面有提示<em class="tooltiptext">Tooltips 的提示内容</em></a></p>
 <p>添加注释配置 <code>&#x3C;!--rehype:tooltips--></code> 添加一个 Tooltips 提示。</p>
-</div></div></div><div class="wrap" style="background: #00c69357;"><div class="wrap-header h3wrap"><h3 id="h3-部分卡片背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分卡片背景颜色"><span class="icon icon-link"></span></a>H3 部分(卡片)背景颜色</h3><div class="wrap-body"><!--rehype:wrap-style=background: #00c69357;-->
+</div></div></div><div class="wrap" style="background: #00c69357;"><div class="wrap-header h3wrap"><h3 id="h3-部分卡片背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分卡片背景颜色"><span class="icon icon-link"></span></a>H3 部分(卡片)背景颜色</h3><div class="wrap-body">
+<!--rehype:wrap-style=background: #00c69357;-->
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H3 部分(卡片)背景颜色</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-style=background: #00c69357;--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
-</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题"><a aria-hidden="true" tabindex="-1" href="#红色标题"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body"><!--rehype:style=background:#e91e63;-->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题"><a aria-hidden="true" tabindex="-1" href="#红色标题"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body">
+<!--rehype:style=background:#e91e63;-->
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 红色标题</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:style=background:#e91e63;--></span>
 </span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="快捷键样式"><a aria-hidden="true" tabindex="-1" href="#快捷键样式"><span class="icon icon-link"></span></a>快捷键样式</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="shortcuts"><thead><tr><th>Key</th><th>value</th></tr></thead><tbody><tr><td><code>快捷键</code></td><td>说明</td></tr><tr><td><code>快捷键</code></td><td>说明</td></tr></tbody></table>
+<!--rehype:className=shortcuts-->
+<p>列表添加 <code>&#x3C;!--rehype:className=shortcuts--></code> 样式类，展示快捷键样式。</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置类样式"><a aria-hidden="true" tabindex="-1" href="#内置类样式"><span class="icon icon-link"></span></a>内置类样式</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>shortcuts</code></td><td>快捷键样式</td></tr><tr><td align="left"><code>wrap-text</code></td><td>超出换行</td></tr><tr><td align="left"><code>show-header</code></td><td>展示表头</td></tr></tbody></table>
+<!--rehype:className=shortcuts-->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="颜色标签"><a aria-hidden="true" tabindex="-1" href="#颜色标签"><span class="icon icon-link"></span></a>颜色标签</h3><div class="wrap-body">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;yel></code></td><td>黄色</td></tr><tr><td align="left"><code>&#x3C;pur></code></td><td>紫色</td></tr><tr><td align="left"><code>&#x3C;code></code> 或 <code>``</code></td><td>绿色</td></tr></tbody></table>
+<!--rehype:className=shortcuts-->
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="布局"><a aria-hidden="true" tabindex="-1" href="#布局"><span class="icon icon-link"></span></a>布局</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="h2-部分"><a aria-hidden="true" tabindex="-1" href="#h2-部分"><span class="icon icon-link"></span></a>H2 部分</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="h2-部分"><a aria-hidden="true" tabindex="-1" href="#h2-部分"><span class="icon icon-link"></span></a>H2 部分</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">H2 部分
 </span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">---</span></span>
 </span><span class="code-line line-number" line="3">
@ -156,45 +235,48 @@
 </span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
 </span></code></pre>
 <p>使用注释配置为 H2 部分 添加 <code>col-span-2</code> 类，将 <del><code>3</code></del> 栏布局变成 <code>2</code> 栏布局。</p>
-<table class="show-header ">
-  <thead>
-    <tr>
-      <th>类</th>
-      <th>说明</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>cols-1</code></td>
-      <td><code>1</code> 栏卡片布局</td>
-    </tr>
-    <tr>
-      <td><code>cols-2</code></td>
-      <td><code>2</code> 栏卡片布局</td>
-    </tr>
-    <tr>
-      <td><code>cols-3</code></td>
-      <td><code>3</code> 栏卡片布局</td>
-    </tr>
-    <tr>
-      <td><code>cols-4</code></td>
-      <td><code>4</code> 栏卡片布局</td>
-    </tr>
-    <tr>
-      <td><code>cols-5</code></td>
-      <td><code>5</code> 栏卡片布局</td>
-    </tr>
-  </tbody>
-</table><!--rehype:className=show-header -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="show-header "><thead><tr><th>类</th><th>说明</th></tr></thead><tbody><tr><td><code>cols-1</code></td><td><code>1</code> 栏卡片布局</td></tr><tr><td><code>cols-2</code></td><td><code>2</code> 栏卡片布局</td></tr><tr><td><code>cols-3</code></td><td><code>3</code> 栏卡片布局</td></tr><tr><td><code>cols-4</code></td><td><code>4</code> 栏卡片布局</td></tr><tr><td><code>cols-5</code></td><td><code>5</code> 栏卡片布局</td></tr></tbody></table>
+<!--rehype:className=show-header -->
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="占位布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#占位布局-style-写法"><span class="icon icon-link"></span></a>占位布局 style 写法</h3><div class="wrap-body">
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-style=grid-row: span 2/span 2;--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 <p>放在 <code>### H3 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:wrap-class=row-span-2--></code> 相同，设置 2 行占位布局。</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片栏布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#卡片栏布局-style-写法"><span class="icon icon-link"></span></a>卡片栏布局 style 写法</h3><div class="wrap-body">
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">##</span> H2 部分</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));--></span>
-</span></code></pre><!--rehype:className=wrap-text -->
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 <p>放在 <code>## H2 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:body-class=cols-2--></code> 相同，设置 2 栏布局。</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="h3-部分"><a aria-hidden="true" tabindex="-1" href="#h3-部分"><span class="icon icon-link"></span></a>H3 部分</h3><div class="wrap-body">
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
@ -203,40 +285,41 @@
 </span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
 </span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
 </span></code></pre>
-<table class="show-header ">
-  <thead>
-    <tr>
-      <th>类</th>
-      <th>说明</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>col-span-2</code></td>
-      <td><code>2</code> 列占位</td>
-    </tr>
-    <tr>
-      <td><code>col-span-3</code></td>
-      <td><code>3</code> 列占位</td>
-    </tr>
-    <tr>
-      <td><code>col-span-4</code></td>
-      <td><code>4</code> 列占位</td>
-    </tr>
-    <tr>
-      <td><code>row-span-2</code></td>
-      <td><code>2</code> 行占位</td>
-    </tr>
-    <tr>
-      <td><code>row-span-3</code></td>
-      <td><code>3</code> 行占位</td>
-    </tr>
-    <tr>
-      <td><code>row-span-4</code></td>
-      <td><code>4</code> 行占位</td>
-    </tr>
-  </tbody>
-</table><!--rehype:className=show-header -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="show-header "><thead><tr><th>类</th><th>说明</th></tr></thead><tbody><tr><td><code>col-span-2</code></td><td><code>2</code> 列占位</td></tr><tr><td><code>col-span-3</code></td><td><code>3</code> 列占位</td></tr><tr><td><code>col-span-4</code></td><td><code>4</code> 列占位</td></tr><tr><td><code>row-span-2</code></td><td><code>2</code> 行占位</td></tr><tr><td><code>row-span-3</code></td><td><code>3</code> 行占位</td></tr><tr><td><code>row-span-4</code></td><td><code>4</code> 行占位</td></tr></tbody></table>
+<!--rehype:className=show-header -->
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片合并行布局-1"><a aria-hidden="true" tabindex="-1" href="#卡片合并行布局-1"><span class="icon icon-link"></span></a>卡片合并行布局 1</h3><div class="wrap-body">
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
 </span><span class="code-line line-number" line="2">┆   H3 Title <span class="token number">1</span>  ┆
@ -357,7 +440,8 @@
 </span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>Title 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
 </span><span class="code-line line-number" line="2">┆ <span class="token number">1</span>       ┆ ┆ <span class="token number">2</span> ┆
 </span><span class="code-line line-number" line="3">┆         ┆ ╰┈┈┈╯
@ -381,146 +465,151 @@
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="表格"><a aria-hidden="true" tabindex="-1" href="#表格"><span class="icon icon-link"></span></a>表格</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="基本表格"><a aria-hidden="true" tabindex="-1" href="#基本表格"><span class="icon icon-link"></span></a>基本表格</h3><div class="wrap-body">
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="date"><a aria-hidden="true" tabindex="-1" href="#date"><span class="icon icon-link"></span></a>Date</h4><div class="wrap-body">
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>%m/%d/%Y</code></td>
-      <td>06/05/2013</td>
-    </tr>
-    <tr>
-      <td><code>%A, %B %e, %Y</code></td>
-      <td>Sunday, June 5, 2013</td>
-    </tr>
-    <tr>
-      <td><code>%b %e %a</code></td>
-      <td>Jun 5 Sun</td>
-    </tr>
-  </tbody>
-</table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>%m/%d/%Y</code></td><td>06/05/2013</td></tr><tr><td><code>%A, %B %e, %Y</code></td><td>Sunday, June 5, 2013</td></tr><tr><td><code>%b %e %a</code></td><td>Jun 5 Sun</td></tr></tbody></table>
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="time"><a aria-hidden="true" tabindex="-1" href="#time"><span class="icon icon-link"></span></a>Time</h4><div class="wrap-body">
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>%H:%M</code></td>
-      <td>23:05</td>
-    </tr>
-    <tr>
-      <td><code>%I:%M %p</code></td>
-      <td>11:05 PM</td>
-    </tr>
-  </tbody>
-</table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>%H:%M</code></td><td>23:05</td></tr><tr><td><code>%I:%M %p</code></td><td>11:05 PM</td></tr></tbody></table>
 <p>标题为 <code>H4</code> 的基本表格。</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="快捷键"><a aria-hidden="true" tabindex="-1" href="#快捷键"><span class="icon icon-link"></span></a>快捷键</h3><div class="wrap-body">
-<table>
-  <thead>
-    <tr>
-      <th></th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>V</code></td>
-      <td>Vector</td>
-    </tr>
-    <tr>
-      <td><code>P</code></td>
-      <td>Pencil</td>
-    </tr>
-    <tr>
-      <td><code>T</code></td>
-      <td>Text</td>
-    </tr>
-    <tr>
-      <td><code>L</code></td>
-      <td>Line</td>
-    </tr>
-    <tr>
-      <td><code>R</code></td>
-      <td>Rectangle</td>
-    </tr>
-    <tr>
-      <td><code>O</code></td>
-      <td>Oval</td>
-    </tr>
-    <tr>
-      <td><code>U</code></td>
-      <td>Rounded</td>
-    </tr>
-  </tbody>
-</table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>V</code></td><td>Vector</td></tr><tr><td><code>P</code></td><td>Pencil</td></tr><tr><td><code>T</code></td><td>Text</td></tr><tr><td><code>L</code></td><td>Line</td></tr><tr><td><code>R</code></td><td>Rectangle</td></tr><tr><td><code>O</code></td><td>Oval</td></tr><tr><td><code>U</code></td><td>Rounded</td></tr></tbody></table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="展示标题"><a aria-hidden="true" tabindex="-1" href="#展示标题"><span class="icon icon-link"></span></a>展示标题</h3><div class="wrap-body">
-<table class="show-header">
-  <thead>
-    <tr>
-      <th>Prefix</th>
-      <th>Example</th>
-      <th>What</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>//</code></td>
-      <td><code>//hr[@class='edge']</code></td>
-      <td>Anywhere</td>
-    </tr>
-    <tr>
-      <td><code>./</code></td>
-      <td><code>./a</code></td>
-      <td>Relative</td>
-    </tr>
-    <tr>
-      <td><code>/</code></td>
-      <td><code>/html/body/div</code></td>
-      <td>Root</td>
-    </tr>
-  </tbody>
-</table><!--rehype:className=show-header-->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<table class="show-header"><thead><tr><th>Prefix</th><th>Example</th><th>What</th></tr></thead><tbody><tr><td><code>//</code></td><td><code>//hr[@class='edge']</code></td><td>Anywhere</td></tr><tr><td><code>./</code></td><td><code>./a</code></td><td>Relative</td></tr><tr><td><code>/</code></td><td><code>/html/body/div</code></td><td>Root</td></tr></tbody></table>
+<!--rehype:className=show-header-->
 <p><code>&#x3C;!--rehype:className=show-header--></code></p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="列表"><a aria-hidden="true" tabindex="-1" href="#列表"><span class="icon icon-link"></span></a>列表</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="一栏默认"><a aria-hidden="true" tabindex="-1" href="#一栏默认"><span class="icon icon-link"></span></a>一栏（默认）</h3><div class="wrap-body">
 <ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
 </ul>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="四列"><a aria-hidden="true" tabindex="-1" href="#四列"><span class="icon icon-link"></span></a>四列</h3><div class="wrap-body">
 <ul class="cols-4">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-  <li>Item 4</li>
-  <li>Item 5</li>
-  <li>Item 6</li>
-  <li>Item 7</li>
-  <li>Item 8</li>
-</ul><!--rehype:className=cols-4-->
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+<li>Item 6</li>
+<li>Item 7</li>
+<li>Item 8</li>
+</ul>
+<!--rehype:className=cols-4-->
 <p><code>&#x3C;!--rehype:className=cols-4--></code></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="没有标记"><a aria-hidden="true" tabindex="-1" href="#没有标记"><span class="icon icon-link"></span></a>没有标记</h3><div class="wrap-body">
 <ul class="cols-3 style-none">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-  <li>Item 4</li>
-  <li>Item 5</li>
-  <li>Item 6</li>
-</ul><!--rehype:className=cols-3 style-none-->
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+<li>Item 6</li>
+</ul>
+<!--rehype:className=cols-3 style-none-->
 <p><code>&#x3C;!--rehype:className=cols-3 style-none--></code></p>
-</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h2-部分---5列效果展示"><a aria-hidden="true" tabindex="-1" href="#h2-部分---5列效果展示"><span class="icon icon-link"></span></a>H2 部分 - 5列效果展示</h2><div class="wrap-body"><!--rehype:body-class=cols-5-->
-</div></div><div class="h2wrap-body cols-5"><div class="wrap" style="background:#dba300;"><div class="wrap-header h3wrap"><h3 id="one"><a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>One</h3><div class="wrap-body"><!--rehype:wrap-style=background:#dba300;-->
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h2-部分---5列效果展示"><a aria-hidden="true" tabindex="-1" href="#h2-部分---5列效果展示"><span class="icon icon-link"></span></a>H2 部分 - 5列效果展示</h2><div class="wrap-body">
+<!--rehype:body-class=cols-5-->
+</div></div><div class="h2wrap-body cols-5"><div class="wrap" style="background:#dba300;"><div class="wrap-header h3wrap"><h3 id="one"><a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>One</h3><div class="wrap-body">
+<!--rehype:wrap-style=background:#dba300;-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="two"><a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>Two</h3><div class="wrap-body">
@ -536,46 +625,52 @@
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h3-部分---占位效果展示"><a aria-hidden="true" tabindex="-1" href="#h3-部分---占位效果展示"><span class="icon icon-link"></span></a>H3 部分 - 占位效果展示</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="row-span-2"><a aria-hidden="true" tabindex="-1" href="#row-span-2"><span class="icon icon-link"></span></a>row-span-2</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="row-span-2"><a aria-hidden="true" tabindex="-1" href="#row-span-2"><span class="icon icon-link"></span></a>row-span-2</h3><div class="wrap-body">
+<!--rehype:wrap-class=row-span-2-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 <p><code>&#x3C;!--rehype:wrap-class=row-span-2--></code></p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="col-span-2"><a aria-hidden="true" tabindex="-1" href="#col-span-2"><span class="icon icon-link"></span></a>col-span-2</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="col-span-2"><a aria-hidden="true" tabindex="-1" href="#col-span-2"><span class="icon icon-link"></span></a>col-span-2</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-2-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 <p><code>&#x3C;!--rehype:wrap-class=col-span-2--></code></p>
-</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题-1"><a aria-hidden="true" tabindex="-1" href="#红色标题-1"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body"><!--rehype:style=background:#e91e63;-->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题-1"><a aria-hidden="true" tabindex="-1" href="#红色标题-1"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body">
+<!--rehype:style=background:#e91e63;-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 <p><code>&#x3C;!--rehype:style=background:#e91e63;--></code></p>
-</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="黄色标题"><a aria-hidden="true" tabindex="-1" href="#黄色标题"><span class="icon icon-link"></span></a>黄色标题</h3><div class="wrap-body"><!--rehype:style=background:#d7a100;-->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="黄色标题"><a aria-hidden="true" tabindex="-1" href="#黄色标题"><span class="icon icon-link"></span></a>黄色标题</h3><div class="wrap-body">
+<!--rehype:style=background:#d7a100;-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 <p><code>&#x3C;!--rehype:style=background:#d7a100;--></code></p>
-</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="col-span-3"><a aria-hidden="true" tabindex="-1" href="#col-span-3"><span class="icon icon-link"></span></a>col-span-3</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
+</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="col-span-3"><a aria-hidden="true" tabindex="-1" href="#col-span-3"><span class="icon icon-link"></span></a>col-span-3</h3><div class="wrap-body">
+<!--rehype:wrap-class=col-span-3-->
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">...
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片子项"><a aria-hidden="true" tabindex="-1" href="#卡片子项"><span class="icon icon-link"></span></a>卡片子项</h3><div class="wrap-body">
 <p>每个部分可以有以下子项：</p>
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="h4-子标题"><a aria-hidden="true" tabindex="-1" href="#h4-子标题"><span class="icon icon-link"></span></a>H4 子标题</h4><div class="wrap-body">
 <ul>
-  <li>pre</li>
-  <li>table</li>
-  <li>ul</li>
+<li>pre</li>
+<li>table</li>
+<li>ul</li>
 </ul>
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="h4-子标题-1"><a aria-hidden="true" tabindex="-1" href="#h4-子标题-1"><span class="icon icon-link"></span></a>H4 子标题</h4><div class="wrap-body">
 <ul>
-  <li>pre</li>
-  <li>table</li>
-  <li>ul</li>
+<li>pre</li>
+<li>table</li>
+<li>ul</li>
 </ul>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="h3-部分-1"><a aria-hidden="true" tabindex="-1" href="#h3-部分-1"><span class="icon icon-link"></span></a>H3 部分</h3><div class="wrap-body">
 <p>每个盒子(卡片)都是一个 <code>H3</code> 部分。 盒子将包含 <code>H3</code> 自身内的所有东西。</p>
 <p>这是一个包含段落的基本部分。</p>
-</div></div></div><div class="wrap" style="background: #1b5064;"><div class="wrap-header h3wrap"><h3 id="h3-部分背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分背景颜色"><span class="icon icon-link"></span></a>H3 部分背景颜色</h3><div class="wrap-body"><!--rehype:wrap-style=background: #1b5064;-->
+</div></div></div><div class="wrap" style="background: #1b5064;"><div class="wrap-header h3wrap"><h3 id="h3-部分背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分背景颜色"><span class="icon icon-link"></span></a>H3 部分背景颜色</h3><div class="wrap-body">
+<!--rehype:wrap-style=background: #1b5064;-->
 <pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">注释配置：
 </span><span class="code-line line-number" line="2"><span class="token code-snippet code keyword">`&#x3C;!--rehype:wrap-style=background: #1b5064;-->`</span>
-</span></code></pre><!--rehype:className=wrap-text -->
-
+</span></code></pre>
+<!--rehype:className=wrap-text -->
 </div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
 </html>