doc: Update react.md cheatsheet. a723b97df5

2025-06-18 21:21:21 +08:00 · 2022-10-05 06:47:35 +00:00
parent 0199aac757
commit ce6a2200e3
24 changed files with 4436 additions and 4405 deletions
--- a/docs/quickreference.html
+++ b/docs/quickreference.html
@ -40,22 +40,22 @@
 </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">
 <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
+<pre class="wrap-text "><code class="language-shell code-highlight"><span class="code-line"><span class="token function">git</span> clone git@github.com:jaywcjlove/reference.git
 </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>
-</span><span class="code-line line-number" line="3"><span class="token function">npm</span> run start <span class="token comment"># 监听 md 文件编译输出 HTML</span>
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">npm</span> i         <span class="token comment"># 安装依赖</span>
+</span><span class="code-line"><span class="token function">npm</span> run build <span class="token comment"># 编译输出 HTML</span>
+</span><span class="code-line"><span class="token function">npm</span> run start <span class="token comment"># 监听 md 文件编译输出 HTML</span>
 </span></code></pre>
 <p>HTML 存放在仓库根目录下的 <code>dist</code> 目录中，将 <code>dist/index.html</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">
 <p>在备忘清单采用 <code>HTML 注释语法</code>，标识网站布局和一些样式，目的是为了在 <code>GitHub</code> 中也是正常毫无瑕疵的预览 <code>Markdown</code>。</p>
-<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=col-span-2--></span>
-</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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片标题</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
+</span><span class="code-line">
+</span><span class="code-line">卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
 </span></code></pre>
 <!--rehype:className=wrap-text -->
 <p>使用 <code>col-span-2</code> 类标识，卡片占 <code>2</code> 列位置</p>
@ -70,15 +70,15 @@
 <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>
-</span><span class="code-line line-number" line="3">
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
-</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H2 部分</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
+</span><span class="code-line">
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
 </span></code></pre>
 </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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 标题</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-3&#x26;style=color:red;--></span>
 </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">
@ -109,44 +109,57 @@

 <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>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><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"><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>
 </span></code></pre>
 <p>上面添加注释样式，文字 <em style="color: red;">我是红色</em><!--rehype:style=color: red;--> 文字变<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="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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><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"><span class="token comment">&#x3C;!--rehype:style=color: red;font-size: 18px--></span>
 </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
-</span><span class="code-line line-number" line="2">function () {}
-</span><span class="code-line line-number" line="3">\```
-</span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:className=wrap-text --></span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">\```js
+</span><span class="code-line">function () {}
+</span><span class="code-line">\```
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:className=wrap-text --></span>
 </span></code></pre>
 <p>如果代码块内容太长，使用强制换行类解决</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"><span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> Key </span><span class="token punctuation">|</span><span class="token table-header important"> value </span><span class="token punctuation">|</span><span class="token table-header important"> </span>
-</span></span></span><span class="code-line line-number" line="2"><span class="token table"><span class="token table-header-row"></span><span class="token table-line"><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></span></span><span class="code-line line-number" line="3"><span class="token table"><span class="token table-line"></span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> <span class="token code-snippet code keyword">`键`</span> </span><span class="token punctuation">|</span><span class="token table-data"> 值    </span><span class="token punctuation">|</span>
-</span></span></span><span class="code-line line-number" line="4"><span class="token table"><span class="token table-data-rows"></span></span><span class="token comment">&#x3C;!--rehype:className=show-header--></span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> Key </span><span class="token punctuation">|</span><span class="token table-header important"> value </span><span class="token punctuation">|</span><span class="token table-header important"> </span>
+</span></span></span><span class="code-line"><span class="token table"><span class="token table-header-row"></span><span class="token table-line"><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></span></span><span class="code-line"><span class="token table"><span class="token table-line"></span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> <span class="token code-snippet code keyword">`键`</span> </span><span class="token punctuation">|</span><span class="token table-data"> 值    </span><span class="token punctuation">|</span>
+</span></span></span><span class="code-line"><span class="token table"><span class="token table-data-rows"></span></span><span class="token comment">&#x3C;!--rehype:className=show-header--></span>
 </span></code></pre>
 <p>注释配置添加 <code>show-header</code> 类，放置在表格下面，表头将被展示出来。</p>
+</div></div></div><div class="wrap row-span-2"><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">
+<!--rehype:wrap-class=row-span-2-->
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
+</span><span class="code-line"><span class="token keyword module">import</span> <span class="token string">"./Student.css"</span><span class="token punctuation">;</span>
+</span><span class="code-line">
+</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
+</span><span class="code-line highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
+</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></code></pre>
+<p>上面 <code>{1,4-5}</code> 行代码高亮，下面是 <code>Markdown</code> 代码示例</p>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">  ```jsx {1,4-5}
+</span></code></pre>
 </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;-->
-<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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分(卡片)背景颜色</span>
+</span><span class="code-line"><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;-->
-<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>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 红色标题</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:style=background:#e91e63;--></span>
 </span></code></pre>
+<p>在 H3 标题下面添加样式标注 <code>&#x3C;!--rehype:style=background:#e91e63;--></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">


@ -168,6 +181,11 @@
 <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">
+<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
+</span><span class="code-line line-number" line="2">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token punctuation">;</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">


@ -223,20 +241,20 @@
 </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-->
-<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">
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
+</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
+</span><span class="code-line">
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
 </span></code></pre>
 <p>上面实例 <code>H2 部分</code> 标题下面有三个<code>卡片</code>，默认 <code>3</code> 栏布局。</p>
-<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"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
+</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
+</span><span class="code-line"><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>

@ -271,23 +289,23 @@
 <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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-style=grid-row: span 2/span 2;--></span>
 </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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> H2 部分</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));--></span>
 </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>
-</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
-</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>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
 </span></code></pre>


@ -325,165 +343,165 @@
 <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>  ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
+</span><span class="code-line">┆   H3 Title <span class="token number">1</span>  ┆
+</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> H3 Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="4">
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="6">
-</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 Title 1</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line">
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line">
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
 </span></code></pre>
 <p>第一标题添加 <code>col-span-3</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-2"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-2"><span class="icon icon-link"></span></a>卡片列合并布局 2</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="3">┆   ┆ ╰┈┈┈╯ ╰┈┈┈╯
-</span><span class="code-line line-number" line="4">┆   ┆ ╭┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆   ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">┆   ┆ ╰┈┈┈╯ ╰┈┈┈╯
+</span><span class="code-line">┆   ┆ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆   ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>Title 1</code> 标题添加 <code>row-span-2</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-3"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-3"><span class="icon icon-link"></span></a>卡片列合并布局 3</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈╯ ┆   ┆ ╰┈┈┈╯
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ┆   ┆ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆   ┆ ┆ <span class="token number">5</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ┆   ┆ ╰┈┈┈╯
+</span><span class="code-line">╭┈┈┈╮ ┆   ┆ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆   ┆ ┆ <span class="token number">5</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="3"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>Title 2</code> 标题添加 <code>row-span-2</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-4"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-4"><span class="icon icon-link"></span></a>卡片列合并布局 4</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ┆   ┆
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ┆   ┆
-</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆   ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ┆   ┆
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ┆   ┆
+</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆   ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>Title 3</code> 标题添加 <code>row-span-2</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-5"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-5"><span class="icon icon-link"></span></a>卡片列合并布局 5</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ 
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span>       ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ 
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span>       ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
-</span><span class="code-line line-number" line="6"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
 </span></code></pre>
 <p>在 <code>Title 5</code> 标题添加 <code>col-span-2</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-6"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-6"><span class="icon icon-link"></span></a>卡片列合并布局 6</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span>       ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span>       ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="3"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>Title 2</code> 标题添加 <code>col-span-2</code> 占位类</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-7"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-7"><span class="icon icon-link"></span></a>卡片列合并布局 7</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">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
-</span><span class="code-line line-number" line="4">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span>       ┆ ┆ <span class="token number">5</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">4</span>       ┆ ┆ <span class="token number">5</span> ┆
+</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
+</span><span class="code-line"><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"><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">
-<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>      ┆
-</span><span class="code-line line-number" line="3">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
-</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
+</span><span class="code-line">┆     H3 Title <span class="token number">1</span>      ┆
+</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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"><span class="token comment">&#x3C;!--rehype:body-class=cols-4--></span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
-</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-4--></span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="8"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="9"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
+</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">----</span></span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-4--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-4--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
 </span></code></pre>
 <p>在 <code>H2 部分</code> 标题添加 <code>cols-4</code>，和 <code>Title 1</code> 添加 <code>col-span-4</code> 合并栏</p>
 </div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-9"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-9"><span class="icon icon-link"></span></a>卡片列合并布局 9</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">┆         ┆ ╰┈┈┈╯
-</span><span class="code-line line-number" line="4">┆         ┆ ╭┈┈┈╮
-</span><span class="code-line line-number" line="5">┆         ┆ ┆ <span class="token number">3</span> ┆
-</span><span class="code-line line-number" line="6">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
-</span><span class="code-line line-number" line="7">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
-</span><span class="code-line line-number" line="8">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ <span class="token number">6</span> ┆
-</span><span class="code-line line-number" line="9">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">1</span>       ┆ ┆ <span class="token number">2</span> ┆
+</span><span class="code-line">┆         ┆ ╰┈┈┈╯
+</span><span class="code-line">┆         ┆ ╭┈┈┈╮
+</span><span class="code-line">┆         ┆ ┆ <span class="token number">3</span> ┆
+</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
+</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ <span class="token number">6</span> ┆
+</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
 </span></code></pre>
 <p>上面布局效果 Markdown 源码：</p>
-<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> Title 1</span>
-</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2 row-span-2--></span>
-</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
-</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
-</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
-</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
-</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 6</span>
+<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
+</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2 row-span-2--></span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
+</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 6</span>
 </span></code></pre>
 <p>在 <code>Title 1</code> 标题添加 <code>col-span-2</code> 和 <code>row-span-2</code> 占位类，使用 <code>空格</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">
@ -634,44 +652,44 @@
 <!--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">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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">
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="three"><a aria-hidden="true" tabindex="-1" href="#three"><span class="icon icon-link"></span></a>Three</h3><div class="wrap-body">
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="four"><a aria-hidden="true" tabindex="-1" href="#four"><span class="icon icon-link"></span></a>Four</h3><div class="wrap-body">
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="five"><a aria-hidden="true" tabindex="-1" href="#five"><span class="icon icon-link"></span></a>Five</h3><div class="wrap-body">
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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-->
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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-->
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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;-->
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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;-->
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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-->
-<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
+<pre><code class="code-highlight"><span class="code-line">...
 </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>
@ -692,8 +710,8 @@
 <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;-->
-<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>
+<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line">注释配置：
+</span><span class="code-line"><span class="token code-snippet code keyword">`&#x3C;!--rehype:wrap-style=background: #1b5064;-->`</span>
 </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>