feat: add CONTRIBUTING.md document. efa51c0a06

docs/cron.html

@@ -26,7 +26,7 @@
 </span><span class="code-line line-number" line="7">└─────────────────────  分钟           (0..59)
 </span></code></pre>
 <hr>
-<table>
+<table class="show-header ">
   <thead>
     <tr>
       <th>字段</th>
@@ -61,9 +61,9 @@
       <td>, - * ? / L #</td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>示例</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>Example</th>
@@ -120,9 +120,9 @@
       <td>每次重启 <em>(非标准)</em></td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>特殊字符串</h3><div class="wrap-body">
-<table>
+<table class="show-header ">
   <thead>
     <tr>
       <th>特殊字符串</th>
@@ -163,9 +163,9 @@
       <td>每小时运行一次，“0 * * * *” <em>（非标准）</em></td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Crontab 命令</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -194,9 +194,9 @@
       <td>crontab`</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>特殊字符</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
-<table>
+</table>
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>特殊字符</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
+<table class="show-header ">
   <thead>
     <tr>
       <th>特殊字符</th>
@@ -233,7 +233,7 @@
       <td>可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 <code>月份中的某天</code> 或 <code>星期几</code>。</td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Also see</h2><div class="wrap-body">
 <ul>
   <li><a href="https://devhints.io/cron">Devhints</a> <em>(devhints.io)</em></li>

docs/docker.html

@@ -33,7 +33,7 @@
   <li><code>nginx</code> - 要使用的镜像</li>
 </ul>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>一般命令</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>Example</th>
@@ -90,11 +90,11 @@
       <td>杀死一个容器</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 <p>参数 <code>&#x3C;container></code> 可以是容器 id 或名称</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Docker 容器</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>启动和停止</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>Description</th>
@@ -135,9 +135,9 @@
       <td>连接到现有容器</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>说明</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>Example</th>
@@ -182,7 +182,7 @@
       <td>列出对容器所做的更改</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>创建容器</h3><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">docker</span> create <span class="token punctuation">[</span>options<span class="token punctuation">]</span> IMAGE
 </span><span class="code-line line-number" line="2">  -a, <span class="token parameter variable">--attach</span>               <span class="token comment"># 附加标准输出/错误</span>
@@ -211,7 +211,7 @@
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Docker Images</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>操控</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th><code>Example</code></th>
@@ -256,7 +256,7 @@
       <td>推送镜像</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>构建镜像</h3><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">docker</span> build <span class="token builtin class-name">.</span>
 </span><span class="code-line line-number" line="2">$ <span class="token function">docker</span> build github.com/creack/docker-firefox
@@ -303,7 +303,7 @@
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>各种各样的</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>Docker Hub</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>Docker 语法</th>
@@ -328,7 +328,7 @@
       <td>将镜像上传到 docker hub。</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>注册表命令</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
 <p>登录到注册表</p>
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">docker</span> login
@@ -351,7 +351,7 @@
 </span><span class="code-line line-number" line="2">$ <span class="token function">docker</span> push eon01/nginx localhost:5000/myadmin/nginx
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>批量清除</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>实例</th>
@@ -372,7 +372,7 @@
       <td>删除所有图像</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卷 volume</h3><div class="wrap-body">
 <p>检查卷</p>
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">docker</span> volume <span class="token function">ls</span>

docs/git.html

@@ -22,7 +22,7 @@
 <p>将存储库克隆到指定目录</p>
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> clone git_url 指定目录
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>做出改变</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>做出改变</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <p>在工作目录中<strong>显示</strong>修改后的文件，为您的下一次提交暂存</p>
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> status
 </span></code></pre>
@@ -238,7 +238,7 @@
 </span><span class="code-line line-number" line="5"><span class="token comment"># 远程有俩相同目录，通过这种方式清除掉，然后提交记录</span>
 </span><span class="code-line line-number" line="6">$ <span class="token function">git</span> <span class="token function">rm</span> <span class="token parameter variable">-r</span> <span class="token parameter variable">--cached</span> <span class="token operator">&#x3C;</span>目录/文件<span class="token operator">></span> 
 </span></code></pre>
-</div></div></div><div class="wrap row-span-4"><div class="wrap-header h3wrap"><h3>修改远程 Commit 记录</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-4--><!--rehype:-->
+</div></div></div><div class="wrap row-span-4"><div class="wrap-header h3wrap"><h3>修改远程 Commit 记录</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-4-->
 <pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rebase <span class="token parameter variable">-i</span> HEAD~3
 </span><span class="code-line line-number" line="2"><span class="token comment"># 表示要修改当前版本的倒数第三次状态</span>
 </span><span class="code-line line-number" line="3"><span class="token comment"># 将要更改的记录行首单词 pick 改为 edit</span>

docs/javascript.html

@@ -96,7 +96,7 @@
 </span><span class="code-line line-number" line="4"><span class="token comment">// 字符串插值</span>
 </span><span class="code-line line-number" line="5"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tommy is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> abc <span class="token operator">=</span> <span class="token string">"abcdefghijklmnopqrstuvwxyz"</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">var</span> esc <span class="token operator">=</span> <span class="token string">'I don\'t \n know'</span><span class="token punctuation">;</span>    <span class="token comment">// \n 换行</span>
 </span><span class="code-line line-number" line="3"><span class="token keyword">var</span> len <span class="token operator">=</span> abc<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span>            <span class="token comment">// 字符串长度</span>
@@ -118,7 +118,7 @@
 </span><span class="code-line line-number" line="19"><span class="token comment">// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)</span>
 </span><span class="code-line line-number" line="20"><span class="token number">128.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>             
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> pi <span class="token operator">=</span> <span class="token number">3.141</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 返回 3             </span>
 </span><span class="code-line line-number" line="3">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 返回 3.14 - 使用金钱</span>
@@ -167,7 +167,7 @@
 </span><span class="code-line line-number" line="24"><span class="token comment">// 随机整数，从 1</span>
 </span><span class="code-line line-number" line="25">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>  
 </span></code></pre>
-</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>全局函数</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>全局函数</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 像脚本代码一样执行字符串</span>
 </span><span class="code-line line-number" line="2"><span class="token function">eval</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                     
 </span><span class="code-line line-number" line="3"><span class="token comment">// 从数字返回字符串</span>
@@ -194,7 +194,7 @@
 </span><span class="code-line line-number" line="24"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                 
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 条件</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>操作符</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>操作符</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span>       <span class="token comment">// true</span>
 </span><span class="code-line line-number" line="2"><span class="token number">10</span> <span class="token operator">></span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">;</span>   <span class="token comment">// true</span>
 </span><span class="code-line line-number" line="3"><span class="token boolean">false</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span>      <span class="token comment">// false</span>
@@ -304,7 +304,7 @@
 </span><span class="code-line line-number" line="7">  <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>箭头函数 (ES6)</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>箭头函数 (ES6)</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>有两个参数</h4><div class="wrap-body">
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">param1<span class="token punctuation">,</span> param2</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> 
 </span><span class="code-line line-number" line="2">  <span class="token keyword control-flow">return</span> param1 <span class="token operator">+</span> param2<span class="token punctuation">;</span> 
@@ -364,7 +364,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 范围</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3">  <span class="token comment">// 这里的代码可以使用 PizzaName</span>
@@ -604,7 +604,7 @@
 </span><span class="code-line line-number" line="6"><span class="token comment">// => 1</span>
 </span><span class="code-line line-number" line="7"><span class="token comment">// => 2</span>
 </span></code></pre>
-</div></div></div><div class="wrap  row-span-2"><div class="wrap-header h3wrap"><h3>label 语句</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap  row-span-2"><div class="wrap-header h3wrap"><h3>label 语句</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2">
 </span><span class="code-line line-number" line="3"><span class="token literal-property property">outPoint</span><span class="token operator">:</span>
@@ -629,7 +629,7 @@
 </span><span class="code-line line-number" line="6"><span class="token comment">// => orange</span>
 </span><span class="code-line line-number" line="7"><span class="token comment">// => banana</span>
 </span></code></pre>
-</div></div></div><div class="wrap  row-span-2"><div class="wrap-header h3wrap"><h3>for await...of</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap  row-span-2"><div class="wrap-header h3wrap"><h3>for await...of</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3">  <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator">&#x3C;</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -656,7 +656,7 @@
 </span><span class="code-line line-number" line="6">  i<span class="token operator">++</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 迭代器(Iterators)</h2><div class="wrap-body"><!--rehype:body-class=cols-2--><!--rehype:-->
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 迭代器(Iterators)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>分配给变量的函数</h3><div class="wrap-body">
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> <span class="token function-variable function">plusFive</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword control-flow">return</span> number <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>  
@@ -705,7 +705,7 @@
 </span><span class="code-line line-number" line="3">  <span class="token keyword control-flow">return</span> n <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 对象(Objects)</h2><div class="wrap-body"><!--rehype:body-class=cols-2--><!--rehype:-->
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 对象(Objects)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
 </div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>访问属性</h3><div class="wrap-body">
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> apple <span class="token operator">=</span> <span class="token punctuation">{</span> 
 </span><span class="code-line line-number" line="2">  <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
@@ -731,7 +731,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>classElection<span class="token punctuation">.</span><span class="token property-access">place</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>可变的</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>可变的</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Sheldon'</span><span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="3">  <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
@@ -786,7 +786,7 @@
 </span><span class="code-line line-number" line="11"><span class="token comment">// 通过引用，因此是可变的。</span>
 </span><span class="code-line line-number" line="12"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>origObj<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>工厂函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>工厂函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 一个接受 'name'，'age' 和 'breed' 的工厂函数，</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">//  参数返回一个自定义的 dog 对象。</span>
 </span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">dogFactory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> breed</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@@ -845,7 +845,7 @@
 </span><span class="code-line line-number" line="13">myCat<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> <span class="token string">'Yankee'</span><span class="token punctuation">;</span>
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Classes</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>静态方法/字段</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>静态方法/字段</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> name<span class="token punctuation">;</span>  
@@ -999,7 +999,7 @@
 </span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token comment">// 10</span>
 </span></code></pre>
 </div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Promises</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Promise</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Promise</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <p>创建 promises</p>
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -1077,7 +1077,7 @@
 </span><span class="code-line line-number" line="13">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Promise.all()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Promise.all()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -1110,7 +1110,7 @@
 </span><span class="code-line line-number" line="14">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
 </span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>  
 </span><span class="code-line line-number" line="2">  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -1129,7 +1129,7 @@
 </span><span class="code-line line-number" line="16">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>twoStars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>oneDot<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>print<span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Async-Await</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
-</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>异步</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>异步</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@@ -1226,7 +1226,7 @@
 </span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="7">req<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>POST</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>POST</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3"><span class="token comment">// 初始化一个请求。</span>
@@ -1244,7 +1244,7 @@
 </span><span class="code-line line-number" line="15">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>fetch api</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>fetch api</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="3">    <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
@@ -1291,7 +1291,7 @@
 </span><span class="code-line line-number" line="12">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">)</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>async await 语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>async await 语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">getSuggestions</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword">const</span> wordQuery <span class="token operator">=</span> inputField<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3">  <span class="token keyword">const</span> endpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryParams<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>wordQuery<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

docs/jest.html

@@ -21,7 +21,7 @@
   <li>快照， 轻松编写持续追踪大型对象的测试，并在测试旁或代码内显示实时快照。</li>
   <li>代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。</li>
 </ul>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>测试结构</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>测试结构</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token comment">/* 在所有测试之前运行 */</span>
@@ -128,7 +128,7 @@
 </span><span class="code-line line-number" line="13">  expect<span class="token punctuation">.</span><span class="token method function property-access">anything</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="14"><span class="token punctuation">]</span><span class="token punctuation">)</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// const fn = jest.fn()</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">// const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+</span>
 </span><span class="code-line line-number" line="3"><span class="token comment">// 函数被调用</span>
@@ -248,7 +248,7 @@
   <li><code>toThrowError</code> → <code>toThrow</code></li>
 </ul>
 </div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>异步测试</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>实例</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>实例</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <p>请参阅 Jest 文档中的 <a href="https://jestjs.io/docs/en/tutorial-async">更多示例</a>。</p>
 <p>在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。</p>
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@@ -271,7 +271,7 @@
 </span><span class="code-line line-number" line="5">  <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
 </span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">)</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>done() 回调</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>done() 回调</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">done</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
 </span><span class="code-line line-number" line="3">
@@ -300,7 +300,7 @@
 </span></code></pre>
 <p>从你的测试中 <em>返回</em> 一个 Promise</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>模拟</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>模拟函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'call the callback'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword">const</span> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 </span><span class="code-line line-number" line="3">  <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
@@ -387,7 +387,7 @@
 </span><span class="code-line line-number" line="6">    <span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'set'</span><span class="token punctuation">)</span>
 </span><span class="code-line line-number" line="7">    <span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>定时器模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
+</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>定时器模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
 <p>为使用本机计时器函数（<code>setTimeout</code>、<code>setInterval</code>、<code>clearTimeout</code>、<code>clearInterval</code>）的代码编写同步测试。</p>
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 启用假计时器</span>
 </span><span class="code-line line-number" line="2">jest<span class="token punctuation">.</span><span class="token method function property-access">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
@@ -425,7 +425,7 @@
 </span><span class="code-line line-number" line="6">  <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>清除和恢复模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>清除和恢复模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <p>对于一个模拟</p>
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 清除模拟使用日期</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">// （fn.mock.calls、fn.mock.instances）</span>

docs/json.html

@@ -36,7 +36,7 @@
 </span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>类型</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>类型</th>
@@ -73,9 +73,9 @@
       <td>Null 或 Empty</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap" style="grid-row: span 3/span 3;"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 3/span 3;--><!--rehype:-->
-<table class="table-thead-hide">
+</table>
+</div></div></div><div class="wrap" style="grid-row: span 3/span 3;"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:wrap-style=grid-row: span 3/span 3;-->
+<table>
   <thead>
     <tr>
       <th></th>
@@ -120,7 +120,7 @@
       <td>后跟四个十六进制数字</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>示例</h4><div class="wrap-body">
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://quickref.me"</span><span class="token punctuation">,</span>
@@ -132,29 +132,29 @@
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 'bar' <span class="token punctuation">}</span>
 </span></code></pre>
 <p>Have to be delimited by double quotes</p>
-</div></div></div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
-<table>
+</div></div></div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
+<table class="show-header ">
   <thead>
     <tr>
-      <th>Type</th>
-      <th>Description</th>
+      <th>类型</th>
+      <th>说明</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><code>Integer</code></td>
-      <td>Digits 1-9, 0 and positive or negative</td>
+      <td>数字 1-9、0 和正数或负数</td>
     </tr>
     <tr>
       <td><code>Fraction</code></td>
-      <td>Fractions like 0.3, 3.9</td>
+      <td>0.3、3.9 等分数</td>
     </tr>
     <tr>
       <td><code>Exponent</code></td>
-      <td>Exponent like e, e+, e-, E, E+, E</td>
+      <td>指数，如 e、e+、e-、E、E+、E</td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>示例</h4><div class="wrap-body">
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"positive"</span> <span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
@@ -247,7 +247,7 @@
 </span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span></code></pre>
 <hr>
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th></th>
@@ -276,8 +276,8 @@
       <td>undefined</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问嵌套</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
+</table>
+</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问嵌套</h3><div class="wrap-body"><!--rehype:wrap-style=grid-row: span 2/span 2;-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">    <span class="token string-property property">"ref"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">        <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
@@ -306,7 +306,7 @@
 </span><span class="code-line line-number" line="26"><span class="token punctuation">}</span><span class="token punctuation">;</span>
 </span></code></pre>
 <hr>
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th></th>
@@ -335,8 +335,8 @@
       <td>undefined</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问对象数组</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
+</table>
+</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问对象数组</h3><div class="wrap-body"><!--rehype:wrap-style=grid-row: span 2/span 2;-->
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
 </span><span class="code-line line-number" line="2">  <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
@@ -365,7 +365,7 @@
 </span><span class="code-line line-number" line="26"><span class="token punctuation">]</span><span class="token punctuation">;</span>
 </span></code></pre>
 <hr>
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th></th>
@@ -394,7 +394,7 @@
       <td>TypeError: Cannot read...</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>访问阵列</h3><div class="wrap-body">
 <pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
 </span><span class="code-line line-number" line="2">  <span class="token string">"Jason"</span><span class="token punctuation">,</span>
@@ -406,7 +406,7 @@
 </span><span class="code-line line-number" line="8"><span class="token punctuation">]</span><span class="token punctuation">;</span>
 </span></code></pre>
 <hr>
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th></th>
@@ -427,7 +427,7 @@
       <td>undefined</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
 <ul>
   <li><a href="https://www.json.org/json-en.html">JSON</a> <em>(json.org)</em></li>

docs/markdown.html

@@ -34,7 +34,7 @@
 </span><span class="code-line line-number" line="4"><span class="token blockquote punctuation">> ></span> 嵌套
 </span><span class="code-line line-number" line="5"><span class="token blockquote punctuation">> ></span> 块引用
 </span></code></pre>
-</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>无序列表</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
+</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>无序列表</h3><div class="wrap-body"><!--rehype:wrap-style=grid-row: span 2/span 2;-->
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">*</span> Item 1
 </span><span class="code-line line-number" line="2"><span class="token list punctuation">*</span> Item 2
 </span><span class="code-line line-number" line="3">    <span class="token list punctuation">*</span> item 3a
@@ -100,7 +100,7 @@
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>内联代码</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 code-snippet code keyword">`Inline code`</span> 周围有反引号
 </span></code></pre>
-</div></div></div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>表格</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-column: span 2/span 2;--><!--rehype:-->
+</div></div></div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>表格</h3><div class="wrap-body"><!--rehype:wrap-style=grid-column: span 2/span 2;-->
 <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">     左栏     </span><span class="token punctuation">|</span><span class="token table-header important">     中间栏     </span><span class="token punctuation">|</span><span class="token table-header important">     右栏     </span><span class="token punctuation">|</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 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"> 单元格 1     </span><span class="token punctuation">|</span><span class="token table-data">   居中         </span><span class="token punctuation">|</span><span class="token table-data">        $1600 </span><span class="token punctuation">|</span>
@@ -113,7 +113,7 @@
 </span></span></span><span class="code-line line-number" line="4"><span class="token table"><span class="token table-data-rows"><span class="token table-data">  单元格 2   </span><span class="token punctuation">|</span><span class="token table-data">   单元格 3     </span><span class="token punctuation">|</span><span class="token table-data">     $12</span>
 </span></span></span></code></pre>
 <p>Markdown 表格生成器：<a href="https://tableconvert.com/">tableconvert.com</a></p>
-</div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>图片</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-column: span 2/span 2;--><!--rehype:-->
+</div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>图片</h3><div class="wrap-body"><!--rehype:wrap-style=grid-column: span 2/span 2;-->
 <pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url"><span class="token operator">!</span>[<span class="token content">GitHub Logo</span>](<span class="token url">/images/logo.png</span>)</span>
 </span><span class="code-line line-number" line="2">
 </span><span class="code-line line-number" line="3"><span class="token url"><span class="token operator">!</span>[<span class="token content">Alt Text</span>](<span class="token url">url</span>)</span>

docs/package.json.html

@@ -45,7 +45,7 @@
   <li>name 和 version 字段一起用于创建唯一ID</li>
 </ul>
 <p>如果没有 <code>name</code> 和<code>version</code> 字段，您的包将无法安装</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>安装 <code>name</code> 包</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>安装 <code>name</code> 包</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-sh"><code class="language-sh code-highlight"><span class="code-line line-number" line="1"><span class="token function">yarn</span> <span class="token function">add</span> <span class="token punctuation">[</span>包名<span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="2"><span class="token comment"># or</span>
 </span><span class="code-line line-number" line="3"><span class="token function">npm</span> <span class="token function">install</span> <span class="token punctuation">[</span>包名<span class="token punctuation">]</span>
@@ -64,7 +64,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>帮助使用者了解包的功能的字符串，包管理器也会把这个字符串作为搜索关键词。</p>
-</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>license</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>license</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <p>所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。</p>
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>
@@ -97,7 +97,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>是包的项目主页或者文档首页。</p>
-</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>repository</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>repository</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/user/repo.git"</span>
@@ -128,7 +128,7 @@
 </span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>作者信息，一个人。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>contributors</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>contributors</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"contributors"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
 </span><span class="code-line line-number" line="3">    <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Your Friend"</span><span class="token punctuation">,</span> <span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"friend@xxx.com"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://friends-xx.com"</span> <span class="token punctuation">}</span>
@@ -196,7 +196,7 @@
 </span></code></pre>
 <p>如果您的主声明文件名为 <code>index.d.ts</code> 并且位于包的根目录（<code>index.js</code>旁边），则不需要标记 <code>types</code> 属性，建议这样做。</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>打包包字段</h2><div class="wrap-body">
-</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>esnext</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>esnext</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <p>完整的<a href="http://2ality.com/2017/04/transpiling-dependencies-babel.html">提案在这里</a>。 简短说明：</p>
 <ul>
   <li><code>esnext</code>：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。</li>
@@ -240,7 +240,7 @@
 <p>有一些特殊的脚本名称。 如果定义了 <code>preinstall</code> 脚本，它会在包安装前被调用。 出于兼容性考虑，<code>install</code>、<code>postinstall</code> 和 <code>prepublish</code> 脚本会在包完成安装后被调用。</p>
 <p><code>start</code> 脚本的默认值为 <code>node server.js</code>。</p>
 <p>参考文档：<a href="https://docs.npmjs.com/files/package.json#default-values">npm docs</a></p>
-</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3>特定的 <code>scripts</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3>特定的 <code>scripts</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <p>对于以下脚本，<code>npm</code> 支持 <code>package.json</code> 文件的 <code>scripts</code> 默认命令字段：</p>
 <ul>
   <li><code>prepublish</code>: 在打包并发布包之前运行，以及在没有任何参数的本地 <code>npm</code> 安装之前运行。 （见下文）</li>
@@ -280,7 +280,7 @@
 <p>配置中的键作为环境变量公开给脚本(scripts)。</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>依赖描述类字段</h2><div class="wrap-body">
 <p>你的包很可能依赖其他包。你可以在你的 <code>package.json</code> 文件里指定那些依赖。</p>
-</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>dependencies</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>dependencies</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <p>这些是你的包的开发版和发布版都需要的依赖。</p>
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
@@ -306,7 +306,7 @@
   你可以指定一个确切的版本、一个最小的版本 (比如 <code>>=</code>) 或者一个版本范围 (比如 <code>>= ... &#x3C;</code>)。 包也可以指向本地的一个目录文件夹。
   参考文档：<a href="https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies">npm docs</a>.
 </p>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>workspaces</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>workspaces</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"my-workspaces-powered-project"</span><span class="token punctuation">,</span>
 </span><span class="code-line line-number" line="3">  <span class="token property">"workspaces"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
@@ -337,7 +337,7 @@
 </span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>这些是只在你的包开发期间需要，但是生产环境不会被安装的包。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>peerDependencies</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>peerDependencies</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"peerDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token property">"package-3"</span><span class="token operator">:</span> <span class="token string">"^2.7.18"</span>
@@ -378,7 +378,7 @@
 </span></code></pre>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>系统</h2><div class="wrap-body">
 <p>你可以提供和你的包关联的系统级的信息，比如操作系统兼容性之类。</p>
-</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>engines</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
+</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>engines</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
 <p>指定使用你的包客户必须使用的版本，这将检查 <code>process.versions</code> 以及当前 <code>yarn</code> 版本。</p>
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"engines"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
@@ -411,7 +411,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>如果你不想你的包发布到包管理器(npm 或者 私有包管理)，设置为 <code>true</code>。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>publishConfig</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>publishConfig</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <p>这些配置值将在你的包发布时使用。比如，你可以给包打标签。</p>
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"publishConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
@@ -429,7 +429,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
 </span></code></pre>
 <p>请注意，如果你的 <code>package.json</code> 包含 <code>"flat": true</code> 并且其它包依赖你的包 (比如你在构建一个库，而不是应用)， 其它那些包也需要在它们的 <code>package.json</code> 加上 <code>"flat": true</code>，或者在命令行上用 <code>yarn install --flat</code> 安装。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>resolutions</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>resolutions</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token property">"resolutions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    <span class="token property">"transitive-package-1"</span><span class="token operator">:</span> <span class="token string">"0.0.29"</span><span class="token punctuation">,</span>

docs/quickreference.html

@@ -0,0 +1,417 @@
+<!doctype html>
+<html lang="en" data-color-mode="dark">
+<head>
+<meta charset="utf-8">
+<title>Quick Reference 备忘清单
+ &#x26;  quickreference cheatsheet &#x26;  Quick Reference</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta description="这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！为开发人员分享快速参考备忘单。">
+<meta keywords="Quick,Reference,cheatsheet,quickreference">
+<link rel="stylesheet" href="../style/style.css">
+</head>
+<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><path opacity=".5" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="white"></path><path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#cbd5e1"></path><path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#292D32"></path></svg><span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/quickreference.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1>Quick Reference 备忘清单</h1><div class="wrap-body">
+<p>这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！</p>
+</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>本地编译预览</h3><div class="wrap-body">
+<p>简单的将仓库克隆下来本地调试页面展示。</p>
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>克隆仓库</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">git</span> clone git@github.com:jaywcjlove/reference.git
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>安装依赖编译生成 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></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>介绍</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>
+</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;">注释语法介绍</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>
+</ul>
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>语法</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>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>示例</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>
+</span></code></pre>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>示例，三行占位，标题红色</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 -->
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>参数说明</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>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><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 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>
+</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>文字大小</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 -->
+<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>强制换行</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>
+</span></code></pre>
+<p>如果代码块内容太长，使用强制换行类解决</p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><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 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>
+</span></code></pre>
+<p>注释配置添加 <code>show-header</code> 类，放置在表格下面，表头将被展示出来。</p>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>布局</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>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>
+</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>
+</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 -->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>占位布局 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 -->
+<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>卡片栏布局 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 -->
+<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>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>
+</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 -->
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片 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">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+</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>
+</span></code></pre>
+<p>默认 3 列布局，第一标题添加 <code>col-span-3</code> 占位类</p>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>表格</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>基本表格</h3><div class="wrap-body">
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>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>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>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>
+<p>标题为 <code>H4</code> 的基本表格。</p>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>快捷键</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>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>展示标题</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-->
+<p><code>&#x3C;!--rehype:className=show-header--></code></p>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>列表</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>一栏（默认）</h3><div class="wrap-body">
+<ul>
+  <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>四列</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-->
+<p><code>&#x3C;!--rehype:className=cols-4--></code></p>
+</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>没有标记</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-->
+<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>H2 部分 - 5列效果展示</h2><div class="wrap-body"><!--rehype:body-class=cols-5-->
+</div></div><div class="h2wrap-body cols-5"><div class="wrap"><div class="wrap-header h3wrap"><h3>One</h3><div class="wrap-body">
+<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>Two</h3><div class="wrap-body">
+<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>Three</h3><div class="wrap-body">
+<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>Four</h3><div class="wrap-body">
+<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>Five</h3><div class="wrap-body">
+<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>H3 部分 - 占位效果展示</h2><div class="wrap-body">
+</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>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>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;">红色标题</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;">黄色标题</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>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>卡片子项</h3><div class="wrap-body">
+<p>每个部分可以有以下子项：</p>
+</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>H4 子标题</h4><div class="wrap-body">
+<ul>
+  <li>pre</li>
+  <li>table</li>
+  <li>ul</li>
+</ul>
+</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>H4 子标题</h4><div class="wrap-body">
+<ul>
+  <li>pre</li>
+  <li>table</li>
+  <li>ul</li>
+</ul>
+</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>H3 部分</h3><div class="wrap-body">
+<p>每个盒子(卡片)都是一个 <code>H3</code> 部分。 盒子将包含 <code>H3</code> 自身内的所有东西。</p>
+<p>这是一个包含段落的基本部分。</p>
+
+</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>

docs/semver.html

@@ -19,7 +19,7 @@
   <li><a href="https://docs.npmjs.com/cli/v6/using-npm/semver">npm 的语义版本器</a> <em>(npmjs.com)</em></li>
 </ul>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Semver</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -40,7 +40,7 @@
       <td>当你做了向下兼容的问题修正</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>简单范围</h3><div class="wrap-body">
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">  1.2.3
 </span><span class="code-line line-number" line="2"> =1.2.3
@@ -49,8 +49,8 @@
 </span><span class="code-line line-number" line="5">>=1.2.3
 </span></code></pre>
 <p>请注意，后缀版本（<code>1.2.3-rc1</code>）不匹配。</p>
-</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
-<table class="table-thead-hide">
+</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
+<table>
   <thead>
     <tr>
       <th>范围</th>
@@ -125,9 +125,9 @@
       <td></td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>连字符范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
-<table>
+</table>
+</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>连字符范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
+<table class="show-header ">
   <thead>
     <tr>
       <th>范围</th>
@@ -140,9 +140,9 @@
       <td>是 <code>>=1.2.3 &#x3C;=2.3.4</code></td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>部分向右</h4><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>范围</th>
@@ -159,9 +159,9 @@
       <td>是 <code>>=1.2.3 &#x3C;3.0.0</code></td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>部分向左</h4><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>范围</th>
@@ -174,11 +174,11 @@
       <td>是 <code>1.2.0 - 2.3.0</code></td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 <p>当右侧为部分（例如，<code>2.3</code>）时，假定缺失的部分为<code>x</code>（例如，<code> 2.3.x</code>）。</p>
 <p>如果左边是部分的（例如，<code>1.2</code>），则假定缺少的部分为<code>0</code>（例如，<code> 1.2.0</code>）。</p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>组合范围</h3><div class="wrap-body">
-<table>
+<table class="show-header ">
   <thead>
     <tr>
       <th>范围</th>
@@ -195,12 +195,12 @@
       <td>或 (双竖线分隔)</td>
     </tr>
   </tbody>
-</table>
+</table><!--rehype:className=show-header -->
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>预发布</h3><div class="wrap-body">
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">1.2.3-prerelease+build
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>解释</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>范围</th>
@@ -225,7 +225,7 @@
       <td>表示定义了公共 API</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
 <ul>
   <li><a href="https://regex101.com/r/vkijKf/1/">语义化版本号验证正则表达式，支持按编号提取的语言</a></li>

docs/sketch.html

@@ -13,11 +13,11 @@
 <p>这个 Sketch 快速参考备忘单显示了它的键盘快捷键和命令。</p>
 </div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>快捷键</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>插入</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>快捷键</th>
-      <th>插入</th>
+      <th>描述</th>
     </tr>
   </thead>
   <tbody>
@@ -62,9 +62,9 @@
       <td>(Text) 文本</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>类型</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
-<table class="table-thead-hide">
+</table>
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>类型</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
+<table>
   <thead>
     <tr>
       <th>快捷键</th>
@@ -125,9 +125,9 @@
       <td>特殊字符</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>画布视图</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
-<table class="table-thead-hide">
+</table>
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>画布视图</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
+<table>
   <thead>
     <tr>
       <th>画布视图</th>
@@ -196,9 +196,9 @@
       <td>移动画布</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>窗口</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>快捷键</th>
@@ -235,9 +235,9 @@
       <td>进入全屏</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>编辑形状</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>编辑形状</th>
@@ -282,9 +282,9 @@
       <td>更改矢量点样式</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>编辑图层</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>快捷键</th>
@@ -333,9 +333,9 @@
       <td>切换边框</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>排列图层、组和画板</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>排列图层、组和画板</th>
@@ -404,7 +404,7 @@
       <td>选择下面的页面</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
 <ul>
   <li><a href="https://www.sketch.com/">Sketch 官网</a> <em>(sketch.com)</em></li>

docs/toml.html

@@ -74,7 +74,7 @@
 </span><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"Commas"</span><span class="token punctuation">,</span> <span class="token string">"are"</span><span class="token punctuation">,</span> <span class="token string">"delimiter"</span><span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8002</span><span class="token punctuation">]</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>友好数组</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>友好数组</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">array1</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token string">"Don't mix"</span><span class="token punctuation">,</span> <span class="token string">"different"</span><span class="token punctuation">,</span> <span class="token string">"types"</span> <span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">2.4</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">'strings'</span><span class="token punctuation">,</span> <span class="token string">"""are the same"""</span><span class="token punctuation">,</span> <span class="token string">'''type'''</span><span class="token punctuation">]</span> <span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span>
@@ -119,7 +119,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">[</span><span class="token table class-name">table1.nested_table</span><span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="4">	<span class="token key property">baz</span> <span class="token punctuation">=</span> <span class="token string">"bat"</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>类数组</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>类数组</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">comments</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
 </span><span class="code-line line-number" line="2"><span class="token key property">author</span> <span class="token punctuation">=</span> <span class="token string">"Nate"</span>
 </span><span class="code-line line-number" line="3"><span class="token key property">text</span> <span class="token punctuation">=</span> <span class="token string">"Great Article!"</span>
@@ -175,7 +175,7 @@
 </span><span class="code-line line-number" line="3"><span class="token punctuation">[</span> <span class="token table class-name">g .  h  .i</span> <span class="token punctuation">]</span>   <span class="token comment"># same as [g.h.i]</span>
 </span><span class="code-line line-number" line="4"><span class="token punctuation">[</span> <span class="token table class-name">j . "ʞ" .'l'</span> <span class="token punctuation">]</span> <span class="token comment"># same as [j."ʞ".'l']</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Inline Table</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Inline Table</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">name</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">first</span> <span class="token punctuation">=</span> <span class="token string">"Tom"</span><span class="token punctuation">,</span> <span class="token key property">last</span> <span class="token punctuation">=</span> <span class="token string">"Preston-Werner"</span> <span class="token punctuation">}</span>
 </span><span class="code-line line-number" line="2"><span class="token key property">point</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">x</span> <span class="token punctuation">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token key property">y</span> <span class="token punctuation">=</span> <span class="token number">2</span> <span class="token punctuation">}</span>
 </span><span class="code-line line-number" line="3"><span class="token key property">animal</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">type.name</span> <span class="token punctuation">=</span> <span class="token string">"pug"</span> <span class="token punctuation">}</span>

docs/typescript.html

@@ -47,7 +47,7 @@
 </div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>避免</h4><div class="wrap-body">
 <pre><code class="code-highlight"><span class="code-line line-number" line="1">Object, String, Number, Boolean
 </span></code></pre>
-</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">interface</span> <span class="token class-name">JSONResponse</span> <span class="token keyword">extends</span> <span class="token class-name">Response</span><span class="token punctuation">,</span> HTTPAble <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">  version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
@@ -172,7 +172,7 @@
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data<span class="token operator">:</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./data"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data
 </span></code></pre>
 <p>这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>对象字面量语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>对象字面量语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">JSONResponse</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>                        <span class="token comment">// 字段</span>
 </span><span class="code-line line-number" line="3">  <span class="token comment">/** In bytes */</span>                         <span class="token comment">// 附加文档</span>
@@ -201,7 +201,7 @@
 </span><span class="code-line line-number" line="11"><span class="token comment">//    void, bio: (nv: string) => void }</span>
 </span></code></pre>
 <p>类似于类型系统的映射语句，允许输入类型更改新类型的结构。</p>
-</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>模板联合类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3--><!--rehype:-->
+</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>模板联合类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SupportedLangs</span> <span class="token operator">=</span>  <span class="token string">"en"</span> <span class="token operator">|</span> <span class="token string">"pt"</span> <span class="token operator">|</span> <span class="token string">"zh"</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">FooterLocaleIDs</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">|</span> <span class="token string">"footer"</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">AllLocaleIDs</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>SupportedLangs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>FooterLocaleIDs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_id</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
@@ -210,7 +210,7 @@
 </span><span class="code-line line-number" line="6"><span class="token comment">//         | "pt_header_id" | "pt_footer_id"</span>
 </span><span class="code-line line-number" line="7"><span class="token comment">//         | "zh_header_id" | "zh_footer_id"</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>条件类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3--><!--rehype:-->
+</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>条件类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">HasFourLegs<span class="token operator">&#x3C;</span>Animal<span class="token operator">></span></span> <span class="token operator">=</span> Animal <span class="token keyword">extends</span> <span class="token punctuation">{</span> legs<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span> <span class="token operator">?</span> Animal <span class="token operator">:</span> <span class="token builtin">never</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Animals</span> <span class="token operator">=</span> Bird <span class="token operator">|</span> Dog <span class="token operator">|</span> Ant <span class="token operator">|</span> Wolf<span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">FourLegs</span> <span class="token operator">=</span> HasFourLegs<span class="token operator">&#x3C;</span>Animals<span class="token operator">></span>
@@ -251,7 +251,7 @@
 </span><span class="code-line line-number" line="5">  input <span class="token comment">// number[]</span>
 </span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>任务</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
+</div></div></div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>任务</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
 </span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@@ -369,7 +369,7 @@
 <p>所以，小心不要这样做：</p>
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token keyword">implements</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 确保类符合一组接口或类型  ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮</span>
 </span><span class="code-line line-number" line="2"><span class="token comment">// 子类这个类 ┈┈┈┈┈┈┈┈↘                 ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈</span>
 </span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token keyword">extends</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Updatable</span><span class="token punctuation">,</span> Serializable <span class="token punctuation">{</span>
@@ -438,7 +438,7 @@
 </span><span class="code-line line-number" line="7"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
 </span></code></pre>
 <p>一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>装饰器和属性</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>装饰器和属性</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token punctuation">{</span> Syncable<span class="token punctuation">,</span> triggersSync<span class="token punctuation">,</span> preferCache<span class="token punctuation">,</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"mylib"</span>
 </span><span class="code-line line-number" line="2">
 </span><span class="code-line line-number" line="3"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Syncable</span></span>
@@ -822,7 +822,7 @@
 </span><span class="code-line line-number" line="4">  <span class="token punctuation">}</span>
 </span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">FooProp</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3">  <span class="token constant">X</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
@@ -857,7 +857,7 @@
 </span><span class="code-line line-number" line="16">  <span class="token comment">// ...</span>
 </span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
 </span></code></pre>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数子组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数子组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">MenuProps</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiHTMLAttributes</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span>
 </span><span class="code-line line-number" line="2"><span class="token keyword">const</span> <span class="token function-variable function">InternalMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">MenuProps</span><span class="token punctuation">,</span> ref<span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ForwardedRef</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
 </span><span class="code-line line-number" line="3">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
@@ -876,7 +876,7 @@
 </span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span>     <span class="token comment">// ✅ ok</span>
 </span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span>  <span class="token comment">// ✅ ok</span>
 </span></code></pre>
-</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>有效组件</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
+</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>有效组件</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
 <pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="3">    render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
@@ -900,7 +900,7 @@
 </span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
 </span></code></pre>
 <p>默认情况下，<code>JSX.ElementClass</code> 是 {}，但可以对其进行扩展，以将 <code>JSX</code> 的使用限制为仅限于符合适当接口的类型。</p>
-</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>类组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
+</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>类组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
 <pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
 </span><span class="code-line line-number" line="2">  header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
 </span><span class="code-line line-number" line="3">  body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>

docs/vscode.html

@@ -13,7 +13,7 @@
 <p>这个 VSCode (Visual Studio Code) 快速参考备忘单显示了它的键盘快捷键和命令。</p>
 </div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>Windows</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>一般的</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -46,9 +46,9 @@
       <td>键盘快捷键</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
-</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>基本编辑</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
-<table class="table-thead-hide">
+</table>
+</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>基本编辑</h3><div class="wrap-body"><!--rehype:wrap-style=grid-row: span 2/span 2;-->
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -157,9 +157,9 @@
       <td>切换自动换行</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>导航</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -208,9 +208,9 @@
       <td>切换 Tab 移动焦点</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>搜索和替换</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -247,9 +247,9 @@
       <td>切换区分大小写/正则表达式/整个单词</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>多光标和选择</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -306,9 +306,9 @@
       <td>列（框）选择页上/下</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>丰富的语言编辑</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -365,9 +365,9 @@
       <td>更改文件语言</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>编辑管理</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -404,9 +404,9 @@
       <td>移动活动编辑器组</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>文件管理</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -471,9 +471,9 @@
       <td>在新窗口/实例中显示活动文件</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>展示</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -542,9 +542,9 @@
       <td>Zen 模式（Esc Esc 退出）</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>调试</h3><div class="wrap-body">
-<table class="table-thead-hide">
+<table>
   <thead>
     <tr>
       <th>-</th>
@@ -605,7 +605,7 @@
       <td>滚动到顶部/底部</td>
     </tr>
   </tbody>
-</table><!--rehype:class=table-thead-hide-->
+</table>
 
 </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>

style/style.css

@@ -21,6 +21,91 @@ body {
 blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
   margin: 0;
 }
+h1,h2,h3,h4,h5,h6 {
+  font-size: inherit;
+  font-weight: inherit
+}
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.wrap-body > p > code {
+  --text-opacity: 1;
+  color: rgb(5 150 105/var(--text-opacity));
+}
+
+table {
+  width: 100%;
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse
+}
+
+table td:not(:last-child)>code, ul li > code, kbd {
+  background-color: rgb(51 65 85/0.5);
+  color: rgb(203 213 225/1);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
+  letter-spacing: 0.075rem;
+  padding: 0.1em 0.54em;
+  border: 1px solid rgb(204,204,204);
+  border-color: rgb(51 65 85/1);
+  line-height: 1.5;
+  font-family: Arial,Helvetica,sans-serif;
+  font-size: 12px;
+  display: inline-block;
+  border-radius: 3px;
+}
+
+table tr+tr {
+  border-top: solid 1px #ececec94;
+  border-color: rgb(51 65 85/0.5);
+}
+
+table td:first-child {
+  white-space: nowrap;
+}
+table td, table th {
+  padding: 9px 14px;
+  text-align: left;
+}
+table tr th:last-child, table tr td:last-child {
+  text-align: right;
+}
+
+table thead th {
+  white-space: nowrap;
+  font-weight: normal;
+  color: rgb(16 185 129/1);
+}
+
+table thead {
+  display: none;
+  border-bottom: solid 1px rgba(85,102,119,0.3);
+}
+
+table.show-header thead {
+  display: table-header-group;
+}
+
+tt, code {
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  font-size: 1em;
+}
+pre:only-child {
+  height: 100%;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+  word-wrap: normal;
+  line-height: 1.5;
+  overflow: hidden;
+  padding: 1rem;
+}
 
 .max-container a {
   color: rgb(2 132 199/1);
@@ -241,7 +326,7 @@ body.home .h1wrap p {
   width: 100%;
 }
 
-.wrap-header.h3wrap > .wrap-body p:last-child {
+.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child {
   margin-top: auto;
 }
 
@@ -267,12 +352,6 @@ body.home .h1wrap p {
   text-align: center;
 }
 
-ol, ul, menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
 .h4wrap > .wrap-body ul,
 .h4wrap > .wrap-body ol,
 .h4wrap > .wrap-body dl,
@@ -346,87 +425,25 @@ ol, ul, menu {
   box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
 }
 
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse
-}
-
-
-table td:not(:last-child)>code, ul li > code, kbd {
-  background-color: rgb(51 65 85/0.5);
-  color: rgb(203 213 225/1);
-  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
-  letter-spacing: 0.075rem;
-  padding: 0.1em 0.54em;
-  border: 1px solid rgb(204,204,204);
-  border-color: rgb(51 65 85/1);
-  line-height: 1.6;
-  font-family: Arial,Helvetica,sans-serif;
-  font-size: 12px;
-  display: inline-block;
-  border-radius: 3px;
-}
-
-table tr+tr {
-  border-top: solid 1px #ececec94;
-  border-color: rgb(51 65 85/0.5);
-}
-
-table td:first-child {
-  white-space: nowrap;
-}
-table td, table th {
-  padding: 9px 14px;
-  text-align: left;
-}
-table tr th:last-child, table tr td:last-child {
-  text-align: right;
-}
-
-table thead th {
-  white-space: nowrap;
-  font-weight: normal;
-  color: rgb(16 185 129/1);
-}
-
-table thead {
-  display: table-header-group;
-  border-bottom: solid 1px rgba(85,102,119,0.3);
-}
-
-.table-thead-hide thead {
-  display: none;
-}
-
-tt, code {
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
-  font-size: 1em;
-}
-pre:only-child {
-  height: 100%;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
-  word-wrap: normal;
-  line-height: 1.5;
-  overflow: hidden;
-  padding: 1rem;
-}
-
 .code-highlight {
   display: block;
   overflow-x: auto;
 }
 
 .cols-1 {
-  grid-template-columns: repeat(1,minmax(0,1fr));
+  grid-template-columns: repeat(1,minmax(0,1fr)) !important;
 }
 .cols-2 {
-  grid-template-columns: repeat(2,minmax(0,1fr));
+  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
+}
+.cols-3 {
+  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
+}
+.cols-4 {
+  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
+}
+.cols-5 {
+  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
 }
 .col-span-2 {
   grid-column: span 2/span 2;