feat: add CONTRIBUTING.md document.

2022-09-29 02:40:26 +08:00
parent 719da7d477
commit efa51c0a06
19 changed files with 573 additions and 214 deletions
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,42 @@
+Contributing 贡献
+====
+
+感谢您对**备忘清单**贡献的兴趣👍👍，是像您这样的人使 [`Quick Reference`](https://jaywcjlove.github.io/reference) 成为如此出色的网站 🎉🎉。随时提交问题和增强请求。
+
+`docs/{filename}.md` 文件将被处理成备忘清单，让我们创建或编辑一个 `markdown` 文件：
+
+## 前沿问题
+
+```markdown
+备忘清单 标题
+===
+
+这是您可以在 Quick Reference 备忘清单上使用的样式参考！【备忘清单介绍】
+```
+
+只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。
+
+## CSS 类注释
+
+[`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
+
+最后，参考现有备忘清单的源代码是一个好习惯！
+
+## 首页导航
+
+[`Quick Reference`](https://jaywcjlove.github.io/reference) 的首页存放在仓库的根目录 `README.md`，[`Quick Reference`](https://jaywcjlove.github.io/reference) 是通过这个 `README.md` 自动生成首页导航，下面是导航实例：
+
+```markdown
+## Linux 命令
+
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
+<!--rehype:class=home-card-->
+```
+
+## 本地开发
+
+```bash
+npm i          # 安装依赖
+npm run build  # 编译生成静态页面
+```
--- a/docs/cron.md
+++ b/docs/cron.md
@@ -36,6 +36,7 @@ Min  Hour Day  Mon  Weekday
 | 月份中的某天   | 1 - 31 | , - * ? / L W      |
 | 月 Month     | 1 - 12 | , - * /            |
 | 星期几        | 0 - 6  | , - * ? / L #      |
+<!--rehype:className=show-header -->


 ### 示例
@@ -54,7 +55,6 @@ Min  Hour Day  Mon  Weekday
 | `0 0 0 1 * *`  | 每个月的 1 日（每月）   |
 | `0 0 0 1 1 *`  | 每年 1 月 1 日（每年）   |
 | `@reboot`      | 每次重启 _(非标准)_   |
-<!--rehype:class=table-thead-hide-->


 ### 特殊字符串
@@ -69,6 +69,7 @@ Min  Hour Day  Mon  Weekday
 | @daily         | 每天运行一次，“0 0 * * *” _（非标准）_ |
 | @midnight      | （与@daily 相同）_（非标准）_ |
 | @hourly        | 每小时运行一次，“0 * * * *” _（非标准）_ |
+<!--rehype:className=show-header -->


 ### Crontab 命令
@@ -80,13 +81,11 @@ Min  Hour Day  Mon  Weekday
 | `crontab -r` | 删除 crontab 文件。 |
 | `crontab -v` | 显示您上次编辑 crontab 文件的时间。 _（非标准）_ |
 | `echo "@reboot echo hi" | crontab` | 轻松添加任务 |
-<!--rehype:class=table-thead-hide-->


 ### 特殊字符
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 | 特殊字符             | 说明 |
 |---------------------|------------|
 `星号(*)`  | 匹配字段中的所有值或任何可能的值。
@@ -96,6 +95,7 @@ Min  Hour Day  Mon  Weekday
 `L`       | 仅允许用于 `月份中的某天` 或 `星期几` 字段，`星期几` 中的 `2L` 表示每个月的最后一个星期二
 `井号 (#)` | 仅允许用于 `星期几` 字段，后面必须在 1 到 5 的范围内。例如，`4#1` 表示给定月份的“第一个星期四”。
 `问号(?)`  | 可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 `月份中的某天` 或 `星期几`。
+<!--rehype:className=show-header -->


 ## Also see
--- a/docs/docker.md
+++ b/docs/docker.md
@@ -51,7 +51,6 @@ $ docker run -it -p 8001:8080 --name my-nginx nginx
 | `docker port <container>`           | 显示容器的端口映射                                  |
 | `docker top <container>`            | 列出进程                                  |
 | `docker kill <container>`           | 杀死一个容器                                  |
-<!--rehype:class=table-thead-hide-->

 参数 `<container>` 可以是容器 id 或名称

@@ -71,7 +70,6 @@ Docker 容器
 `docker wait nginx-server`    | 阻塞容器
 `docker kill nginx-server`    | 发送 SIGKILL
 `docker attach nginx-server`  | 连接到现有容器
-<!--rehype:class=table-thead-hide-->

 ### 说明

@@ -86,7 +84,6 @@ Docker 容器
 `docker top nginx-server`     | 运行进程
 `docker stats nginx-server`   | 容器资源使用
 `docker diff nginx-server`    | 列出对容器所做的更改
-<!--rehype:class=table-thead-hide-->


 ### 创建容器
@@ -131,9 +128,6 @@ docker rm nginx-server
 docker update --cpu-shares 512 -m 300M nginx-server
 ```

-
-
-
 Docker Images
 ----
 <!--rehype:body-class=cols-2-->
@@ -151,8 +145,6 @@ Docker Images
 `docker commit nginx`              | 将容器另存为镜像。
 `docker tag nginx eon01/nginx`     | 标记镜像
 `docker push eon01/nginx`          | 推送镜像
-<!--rehype:class=table-thead-hide-->
-

 ### 构建镜像

@@ -166,8 +158,6 @@ $ docker build -f myOtherDockerfile .
 $ curl example.com/remote/Dockerfile | docker build -f - .
 ```

-
-
 Docker 联网
 ----
 <!--rehype:body-class=cols-2-->
@@ -228,9 +218,6 @@ docker network create -d overlay \
  MyOverlayNetwork
 ```

-
-
-
 各种各样的
 ----
 <!--rehype:body-class=cols-2-->
@@ -243,7 +230,6 @@ docker network create -d overlay \
 `docker pull user/image   ` | 从 docker hub 下载镜像。
 `docker login             ` | 向 docker hub 进行身份验证
 `docker push user/image   ` | 将镜像上传到 docker hub。
-<!--rehype:class=table-thead-hide-->

 ### 注册表命令
 <!--rehype:wrap-class=row-span-3-->
@@ -290,8 +276,6 @@ $ docker push eon01/nginx localhost:5000/myadmin/nginx
 `docker stop -f $(docker ps -a -q)` | 停止所有容器
 `docker rm -f $(docker ps -a -q)` | 删除所有容器
 `docker rmi -f $(docker images -q)` | 删除所有图像
-<!--rehype:class=table-thead-hide-->
-

 ### 卷 volume

--- a/docs/git.md
+++ b/docs/git.md
@@ -29,7 +29,6 @@ $ git clone git_url 指定目录
 ### 做出改变
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 在工作目录中**显示**修改后的文件，为您的下一次提交暂存

 ```shell
@@ -444,7 +443,6 @@ $ git rm -r --cached <目录/文件>
 ### 修改远程 Commit 记录
 <!--rehype:wrap-class=row-span-4-->

-<!--rehype:-->
 ```shell
 $ git rebase -i HEAD~3
 # 表示要修改当前版本的倒数第三次状态
--- a/docs/javascript.md
+++ b/docs/javascript.md
@@ -129,7 +129,6 @@ let age = 7;
 ### 字符串
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```js
 var abc = "abcdefghijklmnopqrstuvwxyz";
 var esc = 'I don\'t \n know';    // \n 换行
@@ -156,7 +155,6 @@ abc.split("");
 ### 数字
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```js
 var pi = 3.141;
 pi.toFixed(0);    // 返回 3             
@@ -213,7 +211,6 @@ Math.floor(Math.random() * 5) + 1;
 ### 全局函数
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```js
 // 像脚本代码一样执行字符串
 eval();                     
@@ -249,7 +246,6 @@ JavaScript 条件
 ### 操作符
 <!--rehype:wrap-class=row-span-3-->

-<!--rehype:-->
 ```javascript
 true || false;       // true
 10 > 5 || 10 > 20;   // true
@@ -403,7 +399,6 @@ const rocketToMars = function() {
 ### 箭头函数 (ES6)
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 #### 有两个参数

 ```javascript
@@ -496,7 +491,6 @@ JavaScript 范围
 ### 范围
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 function myFunction() {
  var pizzaName = "Margarita";
@@ -795,7 +789,6 @@ for (let index in fruits) {
 ### label 语句
 <!--rehype:wrap-class= row-span-2-->

-<!--rehype:-->
 ```js
 var num = 0;

@@ -829,7 +822,6 @@ for (let fruit of fruits) {
 ### for await...of
 <!--rehype:wrap-class= row-span-2-->

-<!--rehype:-->
 ```javascript
 async function* asyncGenerator() {
  var i = 0;
@@ -865,7 +857,6 @@ JavaScript 迭代器(Iterators)
 ----
 <!--rehype:body-class=cols-2-->

-<!--rehype:-->
 ### 分配给变量的函数

 ```javascript
@@ -936,7 +927,6 @@ JavaScript 对象(Objects)
 ----
 <!--rehype:body-class=cols-2-->

-<!--rehype:-->
 ### 访问属性

 ```javascript
@@ -974,7 +964,6 @@ console.log(classElection.place); // undefined
 ### 可变的
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 const student = {
  name: 'Sheldon',
@@ -1043,7 +1032,6 @@ console.log(origObj.color);
 ### 工厂函数
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 // 一个接受 'name'，'age' 和 'breed' 的工厂函数，
 //  参数返回一个自定义的 dog 对象。
@@ -1121,7 +1109,6 @@ JavaScript Classes
 ### 静态方法/字段
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 class Dog {
  constructor(name) {
@@ -1313,7 +1300,6 @@ JavaScript Promises
 ### Promise
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 创建 promises

 ```javascript
@@ -1418,7 +1404,6 @@ promise.catch((err) => {
 ### Promise.all()
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```javascript
 const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
@@ -1459,7 +1444,6 @@ promise.then(res => {
 ### 避免嵌套的 Promise 和 .then()
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```javascript
 const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {
@@ -1486,7 +1470,6 @@ JavaScript Async-Await
 ### 异步
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 function helloWorld() {
  return new Promise(resolve => {
@@ -1613,7 +1596,6 @@ req.send();
 ### POST
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 const data = { weight: '1.5 KG' };
 const xhr = new XMLHttpRequest();
@@ -1636,7 +1618,6 @@ xhr.onerror = () => {
 ### fetch api
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```javascript
 fetch(url, {
    method: 'POST',
@@ -1697,7 +1678,6 @@ fetch('https://api-xxx.com/endpoint', {
 ### async await 语法
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```javascript
 const getSuggestions = async () => {
  const wordQuery = inputField.value;
--- a/docs/jest.md
+++ b/docs/jest.md
@@ -19,7 +19,6 @@ Jest 是一款优雅、简洁的 JavaScript 测试框架。
 ### 测试结构
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```js
 describe('makePoniesPink', () => {
  beforeAll(() => {
@@ -152,7 +151,6 @@ expect([{ a: 1 }, { b: 2 }]).toEqual([
 ### 模拟函数
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```js
 // const fn = jest.fn()
 // const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+
@@ -295,7 +293,6 @@ expect(fn).toThrowErrorMatchingSnapshot()
 ### 实例
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 请参阅 Jest 文档中的 [更多示例](https://jestjs.io/docs/en/tutorial-async)。

 在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。
@@ -332,7 +329,6 @@ test('async test', async () => {
 ### done() 回调
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```js
 test('async test', (done) => {
  expect.assertions(1)
@@ -373,7 +369,6 @@ test('async test', () => {
 ### 模拟函数
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```js
 test('call the callback', () => {
  const callback = jest.fn()
@@ -506,7 +501,6 @@ const setTitle = jest
 ### 定时器模拟
 <!--rehype:wrap-class=row-span-3-->

-<!--rehype:-->
 为使用本机计时器函数（`setTimeout`、`setInterval`、`clearTimeout`、`clearInterval`）的代码编写同步测试。

 ```js
@@ -558,7 +552,6 @@ Object.defineProperty(location, 'title', {
 ### 清除和恢复模拟
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 对于一个模拟

 ```js
--- a/docs/json.md
+++ b/docs/json.md
@@ -44,12 +44,10 @@ JSON 备忘清单
 | `Value`   | 字符串、数字、布尔值、空值等         |
 | `Object`  | 键/值对的无序集合                 |
 | `null`    | Null 或 Empty                   |
-<!--rehype:class=table-thead-hide-->

 ### 字符串
-<!--rehype:data-wrap-style=grid-row: span 3/span 3;-->
+<!--rehype:wrap-style=grid-row: span 3/span 3;-->

-<!--rehype:-->
 |      |                            |
 |------|----------------------------|
 | `\"` | 双引号 Double quote         |
@@ -61,7 +59,6 @@ JSON 备忘清单
 | `\r` | 回车 Carriage return        |
 | `\t` | 标签 Tab                    |
 | `\u` | 后跟四个十六进制数字           |
-<!--rehype:class=table-thead-hide-->

 #### 示例

@@ -84,12 +81,12 @@ Have to be delimited by double quotes
 ### 数字
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
-| Type       | Description                            |
-|------------|----------------------------------------|
-| `Integer`  | Digits 1-9, 0 and positive or negative |
-| `Fraction` | Fractions like 0.3, 3.9                |
-| `Exponent` | Exponent like e, e+, e-, E, E+, E      |
+ 类型 | 说明 
+-----|------
+`Integer`  | 数字 1-9、0 和正数或负数
+`Fraction` | 0.3、3.9 等分数
+`Exponent` | 指数，如 e、e+、e-、E、E+、E
+<!--rehype:className=show-header -->

 #### 示例

@@ -226,12 +223,10 @@ let myObject = {
 | `myObject.age`     | 39        |
 | `myObject.other`   | undefined |
 | `myObject[0]`      | undefined |
-<!--rehype:class=table-thead-hide-->

 ### 访问嵌套
-<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-style=grid-row: span 2/span 2;-->

-<!--rehype:-->
 ```javascript
 let myObject = {
    "ref": {
@@ -270,12 +265,10 @@ let myObject = {
 | `myObject.jdoe`          | ["Jason", "Doe", 39 ...] |
 | `myObject.jsmith[3]`     | "F"                      |
 | `myObject[1]`            | undefined                |
-<!--rehype:class=table-thead-hide-->

 ### 访问对象数组
-<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-style=grid-row: span 2/span 2;-->

-<!--rehype:-->
 ```javascript
 let myArray = [
  {
@@ -313,7 +306,6 @@ let myArray = [
 | `myArray[1][2]`     | 42                         |
 | `myArray[3]`        | undefined                  |
 | `myArray[3].gender` | TypeError: Cannot read...  |
-<!--rehype:class=table-thead-hide-->

 ### 访问阵列

@@ -335,7 +327,6 @@ let myArray = [
 | `myArray[1]` | "Doe"     |
 | `myArray[5]` | true      |
 | `myArray[6]` | undefined |
-<!--rehype:class=table-thead-hide-->


 另见
--- a/docs/markdown.md
+++ b/docs/markdown.md
@@ -42,9 +42,8 @@ Header 2
 ```

 ### 无序列表
-<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-style=grid-row: span 2/span 2;-->

-<!--rehype:-->
 ```markdown
 * Item 1
 * Item 2
@@ -166,9 +165,8 @@ console.log("This is a block code")
 ```

 ### 表格
-<!--rehype:data-wrap-style=grid-column: span 2/span 2;-->
+<!--rehype:wrap-style=grid-column: span 2/span 2;-->

-<!--rehype:-->
 ```markdown
 |     左栏     |     中间栏     |     右栏     |
 |:------------|:-------------:|-------------:|
@@ -188,9 +186,8 @@ console.log("This is a block code")
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)

 ### 图片
-<!--rehype:data-wrap-style=grid-column: span 2/span 2;-->
+<!--rehype:wrap-style=grid-column: span 2/span 2;-->

-<!--rehype:-->
 ```markdown
 ![GitHub Logo](/images/logo.png)

--- a/docs/package.json.md
+++ b/docs/package.json.md
@@ -51,7 +51,6 @@ package.json 备忘清单
 ### 安装 `name` 包
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```sh
 yarn add [包名]
 # or
@@ -89,7 +88,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `license`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。

 ```json
@@ -140,7 +138,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `repository`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 ```json
 {
  "repository": {
@@ -188,7 +185,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `contributors`
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```json
 {
  "contributors": [
@@ -290,7 +286,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `esnext`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 完整的[提案在这里](http://2ality.com/2017/04/transpiling-dependencies-babel.html)。 简短说明：

 - `esnext`：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。
@@ -358,7 +353,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### 特定的 `scripts`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 对于以下脚本，`npm` 支持 `package.json` 文件的 `scripts` 默认命令字段：

 - `prepublish`: 在打包并发布包之前运行，以及在没有任何参数的本地 `npm` 安装之前运行。 （见下文）
@@ -411,7 +405,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `dependencies`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 这些是你的包的开发版和发布版都需要的依赖。

 ```json
@@ -442,7 +435,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### workspaces
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```json
 {
  "name": "my-workspaces-powered-project",
@@ -486,7 +478,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `peerDependencies`
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```json
 {
  "peerDependencies": {
@@ -547,7 +538,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `engines`
 <!--rehype:wrap-class=col-span-2 row-span-2-->

-<!--rehype:-->
 指定使用你的包客户必须使用的版本，这将检查 `process.versions` 以及当前 `yarn` 版本。

 ```json
@@ -602,7 +592,6 @@ https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
 ### `publishConfig`
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 这些配置值将在你的包发布时使用。比如，你可以给包打标签。

 ```json
@@ -635,7 +624,6 @@ Yarn
 ### `resolutions`
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```json
 {
  "resolutions": {
--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@@ -0,0 +1,409 @@
+Quick Reference 备忘清单
+===
+
+这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！
+
+入门
+---
+
+### 本地编译预览
+
+简单的将仓库克隆下来本地调试页面展示。
+
+#### 克隆仓库
+
+```shell
+git clone git@github.com:jaywcjlove/reference.git
+```
+
+#### 安装依赖编译生成 HTML 页面
+
+```shell
+npm i         # 安装依赖
+npm run build # 编译输出 HTML
+```
+
+HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静态页面在浏览器中打开预览。
+
+### 介绍
+
+在备忘清单采用 `HTML 注释语法`，标识网站布局和一些样式，目的是为了在 `GitHub` 中也是正常毫无瑕疵的预览 `Markdown`。
+
+```markdown
+### 卡片标题
+<!--rehype:wrap-class=col-span-2-->
+
+卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
+<!--rehype:style=color: red;-->
+```
+<!--rehype:className=wrap-text -->
+
+使用 `col-span-2` 类标识，卡片占 `2` 列位置
+
+### 注释语法介绍
+<!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
+
+- 在某个 Markdown 语法下方或者后面，添加 HTML注释
+- 以 `<!--rehype:` 开始，`-->` 结束，包裹参数内容
+- 内容采用 URL 参数的字符拼接方式
+
+#### 语法
+
+`<!--rehype:` + `key=value` + `&` + `key=value` + `-->`  
+`标识开始`     + `参数`     + `分隔符` + `参数`  + `标识结束`
+
+#### 示例
+
+```markdown
+### H2 部分
+<!--rehype:body-class=cols-2-->
+
+### H3 部分
+<!--rehype:wrap-class=row-span-2-->
+```
+
+#### 示例，三行占位，标题红色
+
+```markdown
+### 标题
+<!--rehype:wrap-class=row-span-3&style=color:red;-->
+```
+<!--rehype:className=wrap-text -->
+
+
+#### 参数说明
+
+类 | 说明
+---- | ----
+`body-style` | 包裹所有卡片`外壳`的样式
+`body-class` | 用于卡片栏布局，添加`类`名
+`wrap-style` | 卡片栏添加 CSS 样式
+`wrap-class` | 用于卡片占位，添加`类`名
+
+### 文字颜色
+
+```markdown
+_我是红色_<!--rehype:style=color: red;-->
+**加粗红色**<!--rehype:style=color: red;-->
+```
+
+上面添加注释样式，文字 _我是红色_<!--rehype:style=color: red;--> 文字变`红`了
+
+### 文字大小
+
+```markdown
+**加粗变大红色**
+<!--rehype:style=color: red;font-size: 18px-->
+```
+<!--rehype:className=wrap-text -->
+
+上面添加注释样式，文字 _加粗变大红色_<!--rehype:style=color: red;font-size: 18px--> 变`红`并且`大`了
+
+### 强制换行
+
+```markdown
+\```js
+function () {}
+\```
+<!--rehype:className=wrap-text -->
+```
+
+如果代码块内容太长，使用强制换行类解决
+
+
+### 展示表格表头
+
+```markdown
+| Key | value | 
+| ---- | ---- |
+| `键` | 值    |
+<!--rehype:className=show-header-->
+```
+
+注释配置添加 `show-header` 类，放置在表格下面，表头将被展示出来。
+
+布局
+---
+
+### H2 部分
+<!--rehype:wrap-class=row-span-2-->
+
+```markdown
+H2 部分
+---
+
+### 卡片 1 (H3 部分)
+### 卡片 2 (H3 部分)
+### 卡片 3 (H3 部分)
+```
+
+上面实例 `H2 部分` 标题下面有三个`卡片`，默认 `3` 栏布局。
+
+```markdown
+H2 部分
+---
+<!--rehype:body-class=cols-2-->
+### 卡片 1 (H3 部分)
+### 卡片 2 (H3 部分)
+### 卡片 3 (H3 部分)
+```
+
+使用注释配置为 H2 部分 添加 `col-span-2` 类，将 ~~`3`~~ 栏布局变成 `2` 栏布局。
+
+类 | 说明
+---- | ----
+`cols-1` | `1` 栏卡片布局
+`cols-2` | `2` 栏卡片布局
+`cols-3` | `3` 栏卡片布局
+`cols-4` | `4` 栏卡片布局
+`cols-5` | `5` 栏卡片布局
+<!--rehype:className=show-header -->
+
+### 占位布局 style 写法
+
+```markdown
+### H3 部分
+<!--rehype:wrap-style=grid-row: span 2/span 2;-->
+```
+<!--rehype:className=wrap-text -->
+
+放在 `### H3 部分` 下面的注释配置，与 `<!--rehype:wrap-class=row-span-2-->` 相同，设置 2 行占位布局。
+
+### 卡片栏布局 style 写法
+
+```markdown
+## H2 部分
+<!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));-->
+```
+<!--rehype:className=wrap-text -->
+
+放在 `## H2 部分` 下面的注释配置，与 `<!--rehype:body-class=cols-2-->` 相同，设置 2 栏布局。
+
+
+### H3 部分
+
+```markdown
+### 卡片 1 (H3 部分)
+<!--rehype:wrap-class=row-span-2-->
+### 卡片 2 (H3 部分)
+<!--rehype:wrap-class=col-span-3-->
+### 卡片 3 (H3 部分)
+```
+
+类 | 说明
+---- | ----
+`col-span-2` | `2` 列占位
+`col-span-3` | `3` 列占位
+`col-span-4` | `4` 列占位
+`row-span-2` | `2` 行占位
+`row-span-3` | `3` 行占位
+`row-span-4` | `4` 行占位
+<!--rehype:className=show-header -->
+
+### 卡片 1 列布局
+
+```shell
+╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
+┆   H3 Title 1  ┆
+╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
+╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆
+╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+```
+
+Markdown 源码
+
+```markdown
+### H3 Title 1
+<!--rehype:wrap-class=col-span-3-->
+### Title 2
+
+### Title 3
+
+### Title 4
+```
+
+默认 3 列布局，第一标题添加 `col-span-3` 占位类
+
+
+表格
+---
+
+### 基本表格
+
+#### Date
+
+|      |      |
+| ---- | ---- |
+`%m/%d/%Y` | 06/05/2013
+`%A, %B %e, %Y` | Sunday, June 5, 2013
+`%b %e %a` | Jun 5 Sun
+
+#### Time
+
+|      |      |
+| ---- | ---- |
+`%H:%M` | 23:05
+`%I:%M %p` | 11:05 PM
+
+标题为 `H4` 的基本表格。
+
+### 快捷键
+
+|      |      |
+| ---- | ---- |
+`V` | Vector
+`P` | Pencil
+`T` | Text
+`L` | Line
+`R` | Rectangle
+`O` | Oval
+`U` | Rounded
+
+### 展示标题
+
+| Prefix | Example | What |
+| ---- | ---- | ---- |
+`//` | `//hr[@class='edge']` | Anywhere
+`./` | `./a` | Relative
+`/` | `/html/body/div` | Root
+<!--rehype:className=show-header-->
+
+`<!--rehype:className=show-header-->`
+
+列表
+---
+
+### 一栏（默认）
+
+- Item 1
+- Item 2
+- Item 3
+
+### 四列
+
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+- Item 5
+- Item 6
+- Item 7
+- Item 8
+<!--rehype:className=cols-4-->
+
+`<!--rehype:className=cols-4-->`
+
+### 没有标记
+
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+- Item 5
+- Item 6
+<!--rehype:className=cols-3 style-none-->
+
+`<!--rehype:className=cols-3 style-none-->`
+
+H2 部分 - 5列效果展示
+---
+<!--rehype:body-class=cols-5-->
+
+### One
+
+```
+...
+```
+
+### Two
+
+```
+...
+```
+
+### Three
+
+```
+...
+```
+
+### Four
+
+```
+...
+```
+
+### Five
+
+```
+...
+```
+
+H3 部分 - 占位效果展示
+---
+
+### row-span-2
+<!--rehype:wrap-class=row-span-2-->
+
+```
+...
+```
+
+`<!--rehype:wrap-class=row-span-2-->`
+
+### col-span-2
+<!--rehype:wrap-class=col-span-2-->
+
+```
+...
+```
+
+`<!--rehype:wrap-class=col-span-2-->`
+
+### 红色标题
+<!--rehype:style=background:#e91e63;-->
+
+```
+...
+```
+
+`<!--rehype:style=background:#e91e63;-->`
+
+### 黄色标题
+<!--rehype:style=background:#d7a100;-->
+
+```
+...
+```
+
+`<!--rehype:style=background:#d7a100;-->`
+
+### col-span-3
+<!--rehype:wrap-class=col-span-3-->
+
+```
+...
+```
+
+### 卡片子项
+
+每个部分可以有以下子项：
+
+#### H4 子标题
+
+- pre
+- table
+- ul
+
+#### H4 子标题
+
+- pre
+- table
+- ul
+
+### H3 部分
+
+每个盒子(卡片)都是一个 `H3` 部分。 盒子将包含 `H3` 自身内的所有东西。
+
+这是一个包含段落的基本部分。
--- a/docs/semver.md
+++ b/docs/semver.md
@@ -21,7 +21,6 @@ Semver 备忘清单
 | `主版本号(MAJOR)` | 当你做了不兼容的 API 修改 |
 | `次版本号(MINOR)` | 当你做了向下兼容的功能性新增 |
 | `修订号(PATCH)` | 当你做了向下兼容的问题修正 |
-<!--rehype:class=table-thead-hide-->

 ### 简单范围

@@ -38,7 +37,6 @@ Semver 备忘清单
 ### 范围
 <!--rehype:wrap-class=row-span-3-->

-<!--rehype:-->
 | 范围    | 描述         | Notes             |
 | ---      | ---                 | ---               |
 | `~1.2.3` | 是 `>=1.2.3 <1.3.0` |                    |
@@ -54,15 +52,14 @@ Semver 备忘清单
 | `1`      | 相同的               |                    |
 | `*`      | 任何版本             |                    |
 | `x`      | 相同的               |                    |
-<!--rehype:class=table-thead-hide-->

 ### 连字符范围
 <!--rehype:wrap-class=row-span-3-->

-<!--rehype:-->
 | 范围               | 描述           |
 | ---                | ---                   |
 | `1.2.3 - 2.3.4`    | 是 `>=1.2.3 <=2.3.4`  |
+<!--rehype:className=show-header -->

 #### 部分向右

@@ -70,14 +67,12 @@ Semver 备忘清单
 | ---             | ---                   |
 | `1.2.3 - 2.3`   | 是 `>=1.2.3 <2.4.0`   |
 | `1.2.3 - 2`     | 是 `>=1.2.3 <3.0.0`   |
-<!--rehype:class=table-thead-hide-->

 #### 部分向左

 | 范围           | 描述           |
 | ---            | ---                   |
 | `1.2 - 2.3.0`  | 是 `1.2.0 - 2.3.0`    |
-<!--rehype:class=table-thead-hide-->

 当右侧为部分（例如，`2.3`）时，假定缺失的部分为`x`（例如，` 2.3.x`）。

@@ -89,6 +84,7 @@ Semver 备忘清单
 | ---                | ---                   |
 | `>=0.14 <16`       | 和 (空格分隔) |
 | `0.14.x \|\| 15.x.x` | 或 (双竖线分隔)   |
+<!--rehype:className=show-header -->

 ### 预发布

@@ -104,7 +100,6 @@ Semver 备忘清单
 | `~`     | 意思是“相当接近”     |
 | `0.x.x` | 用于“初始开发”     |
 | `1.x.x` | 表示定义了公共 API     |
-<!--rehype:class=table-thead-hide-->


 另见
--- a/docs/sketch.md
+++ b/docs/sketch.md
@@ -8,7 +8,7 @@ Sketch 备忘清单

 ### 插入

-| 快捷键 | 插入 |
+| 快捷键 | 描述 |
 | ----- | ---- |
 | `a` | (New Artboard) 新画板 |
 | `s` | (Slice) 切片 |
@@ -20,13 +20,11 @@ Sketch 备忘清单
 | `v` | (Vector Point) 向量点 |
 | `p` | (Pencil) 铅笔 |
 | `t` | (Text) 文本 |
-<!--rehype:class=table-thead-hide-->


 ### 类型
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 | 快捷键 | 类型 |
 | ----- | ---- |
 | `Cmd + B` | 加粗 |
@@ -42,13 +40,11 @@ Sketch 备忘清单
 | `Cmd + Shift + \` | 居中对齐 |
 | `Cmd + Shift + }` | 右对齐 |
 | `Control + Cmd + Space`  | 特殊字符 |
-<!--rehype:class=table-thead-hide-->

 ### 画布视图

 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 | 画布视图 | 快捷键 |
 | ----- | ---- |
 | `Cmd (+) +` | 放大 |
@@ -66,7 +62,6 @@ Sketch 备忘清单
 | `Control + H` | 切换选择手柄 |
 | `Control + X` | 切换像素网格 |
 | `Space + Drag` | 移动画布 |
-<!--rehype:class=table-thead-hide-->

 ### 窗口

@@ -79,7 +74,6 @@ Sketch 备忘清单
 | `Alt + Cmd + T` | 切换工具栏 |
 | `Cmd + .` | 演示模式 |
 | `Control + Cmd + F` | 进入全屏 |
-<!--rehype:class=table-thead-hide-->

 ### 编辑形状

@@ -94,7 +88,6 @@ Sketch 备忘清单
 | `Cmd + Arrows` | 更改对象大小 |
 | `Shift + Cmd + Arrows` | 将单位更改 10 |
 | `1, 2, 3, 4` | 更改矢量点样式 |
-<!--rehype:class=table-thead-hide-->

 ### 编辑图层

@@ -110,7 +103,6 @@ Sketch 备忘清单
 | `Shift + Cmd + R` | 旋转 |
 | `F` | 切换填充 |
 | `B` | 切换边框 |
-<!--rehype:class=table-thead-hide-->

 ### 排列图层、组和画板

@@ -131,7 +123,6 @@ Sketch 备忘清单
 | `Cmd + F` | 按名称查找图层 |
 | `Fn + ↑` | 选择上方页面 |
 | `Fn + ↓` | 选择下面的页面 |
-<!--rehype:class=table-thead-hide-->


 另见
--- a/docs/toml.md
+++ b/docs/toml.md
@@ -102,7 +102,6 @@ array3 = [8001, 8001, 8002]
 ### 友好数组
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```toml
 array1 = [ "Don't mix", "different", "types" ]
 array2 = [ [ 1.2, 2.4 ], ["all", 'strings', """are the same""", '''type'''] ]
@@ -173,7 +172,6 @@ bar = 2
 ### 类数组
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```toml
 [[comments]]
 author = "Nate"
@@ -251,7 +249,6 @@ bat = "hi"
 ### Inline Table
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```toml 
 name = { first = "Tom", last = "Preston-Werner" }
 point = { x = 1, y = 2 }
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -68,7 +68,6 @@ Object, String, Number, Boolean
 ### 通用语法
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```ts
 /** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */
 interface JSONResponse extends Response, HTTPAble {
@@ -263,7 +262,6 @@ const data: import("./data").data
 ### 对象字面量语法
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```ts
 type JSONResponse = {
  version: number;                        // 字段
@@ -302,7 +300,6 @@ type ArtistSub = Subscriber<Artist>
 ### 模板联合类型
 <!--rehype:wrap-class=col-span-3-->

-<!--rehype:-->
 ```ts
 type SupportedLangs =  "en" | "pt" | "zh";
 type FooterLocaleIDs = "header" | "footer";
@@ -316,7 +313,6 @@ type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_id`;
 ### 条件类型
 <!--rehype:wrap-class=col-span-3-->

-<!--rehype:-->
 ```ts
 type HasFourLegs<Animal> = Animal extends { legs: 4 } ? Animal : never
 type Animals = Bird | Dog | Ant | Wolf;
@@ -379,7 +375,6 @@ if (Array.isArray(input)) {
 ### 任务
 <!--rehype:wrap-class=row-span-3-->

-<!--rehype:-->
 ```ts
 const data1 = {
  name: "Zagreus"
@@ -558,7 +553,6 @@ class C implements Bag {}
 ### 通用语法
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```ts
 // 确保类符合一组接口或类型  ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮
 // 子类这个类 ┈┈┈┈┈┈┈┈↘                 ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈
@@ -645,7 +639,6 @@ class Dog extends Animal { getName(): { ... } }
 ### 装饰器和属性
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```ts
 import { Syncable, triggersSync, preferCache, required } from "mylib"

@@ -1145,7 +1138,6 @@ declare namespace JSX {
 ### 函数组件
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```tsx
 interface FooProp {
  name: string;
@@ -1189,7 +1181,6 @@ function Dog(prop:CeProps): JSX.Element {
 ### 函数子组件
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```tsx
 interface MenuProps extends React.LiHTMLAttributes<HTMLUListElement> { ... }
 const InternalMenu = (props: MenuProps, ref?: React.ForwardedRef<HTMLUListElement>) => (
@@ -1213,7 +1204,6 @@ Menu.SubMenu = SubMenu;
 ### 有效组件
 <!--rehype:wrap-class=row-span-2-->

-<!--rehype:-->
 ```tsx
 declare namespace JSX {
  interface ElementClass {
@@ -1247,7 +1237,6 @@ function NotAValidFactoryFunction() {
 ### 类组件
 <!--rehype:wrap-class=col-span-2-->

-<!--rehype:-->
 ```ts
 type Props = {
  header: React.ReactNode;
--- a/docs/vscode.md
+++ b/docs/vscode.md
@@ -15,11 +15,9 @@ VSCode 备忘清单
 | `Ctrl` `Shift` `W`          | 关闭窗口                |
 | `Ctrl` `,`                  | 用户设置                |
 | `Ctrl` `K` `Ctrl` `S`       | 键盘快捷键               |
-<!--rehype:class=table-thead-hide-->
-

 ### 基本编辑
-<!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-style=grid-row: span 2/span 2;-->

 | -                         | -                                  |
 |---------------------------|------------------------------------|
@@ -48,7 +46,6 @@ VSCode 备忘清单
 | `Ctrl` `/`                | 切换行注释                           |
 | `Shift` `Alt` `A`         | 切换块评论                           |
 | `Alt` `Z`                 | 切换自动换行                         |
-<!--rehype:class=table-thead-hide-->

 ### 导航

@@ -64,7 +61,6 @@ VSCode 备忘清单
 | `Ctrl` `Shift` `Tab` | 浏览编辑组历史       |
 | `Alt` ` ←` _/_ `→`   | 后退/前进           |
 | `Ctrl` `M`           | 切换 Tab 移动焦点   |
-<!--rehype:class=table-thead-hide-->


 ### 搜索和替换
@@ -78,7 +74,6 @@ VSCode 备忘清单
 | `Ctrl` `D`                | 将选择添加到下一个查找匹配项         |
 | `Ctrl` `K` `Ctrl` `D`     | 将最后一个选择移动到下一个查找匹配项  |
 | `Alt` `C` _/_ `R` _/_ `W` | 切换区分大小写/正则表达式/整个单词   |
-<!--rehype:class=table-thead-hide-->

 ### 多光标和选择

@@ -96,7 +91,6 @@ VSCode 备忘清单
 | `Shift` `Alt` `<Drag>`                 | 列（框）选择                   |
 | `Ctrl` `Shift` `Alt` `<Arrow>`         | 列（框）选择                   |
 | `Ctrl` `Shift` `Alt` `PgUp` _/_ `PgDn` | 列（框）选择页上/下             |
-<!--rehype:class=table-thead-hide-->

 ### 丰富的语言编辑

@@ -114,7 +108,6 @@ VSCode 备忘清单
 | `F2`                        | 重命名符号       |
 | `Ctrl` `K` `Ctrl` `X`       | 修剪尾随空格      |
 | `Ctrl` `K` `M`              | 更改文件语言      |
-<!--rehype:class=table-thead-hide-->


 ### 编辑管理
@@ -128,7 +121,6 @@ VSCode 备忘清单
 | `Ctrl` `K` `Ctrl` `←` _/_ `→`    | 专注于上一个/下一个编辑组    |
 | `Ctrl` `Shift` `PgUp` _/_ `PgDn` | 向左/向右移动编辑器         |
 | `Ctrl` `K` `←` _/_ `→`           | 移动活动编辑器组            |
-<!--rehype:class=table-thead-hide-->


 ### 文件管理
@@ -149,7 +141,6 @@ VSCode 备忘清单
 | `Ctrl` `K` `P`        | 复制活动文件的路径             |
 | `Ctrl` `K` `R`        | 在资源管理器中显示活动文件      |
 | `Ctrl` `K` `O`        | 在新窗口/实例中显示活动文件     |
-<!--rehype:class=table-thead-hide-->

 ### 展示

@@ -170,7 +161,6 @@ VSCode 备忘清单
 | `Ctrl` `Shift` `V` | 打开 Markdown 预览                         |
 | `Ctrl` `K` `V`     | 打开 Markdown 预览到一边                    |
 | `Ctrl` `K` `Z`     | Zen 模式（Esc Esc 退出）                    |
-<!--rehype:class=table-thead-hide-->


 ### 调试
@@ -190,4 +180,3 @@ VSCode 备忘清单
 | `Ctrl` `↑` _/_ `↓`             | 向上/向下滚动                   |
 | `Shift` `PgUp` _/_ `PgDn`      | 向上/向下滚动页面               |
 | `Ctrl` `Home` _/_ `End`        | 滚动到顶部/底部                 |
-<!--rehype:class=table-thead-hide-->
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
  },
  "keywords": [],
  "devDependencies": {
-    "@wcj/markdown-to-html": "^2.0.14",
+    "@wcj/markdown-to-html": "^2.0.15",
    "fs-extra": "^10.1.0",
    "recursive-readdir-files": "^2.3.0",
    "rehype-document": "^6.1.0",
--- a/scripts/create.mjs
+++ b/scripts/create.mjs
@@ -62,8 +62,8 @@ export function getTocsTree(arr = [], result = []) {
      const headerCls = ['wrap-header', `h${level}wrap`];

      if (level === 1) wrapCls.push('max-container');
-      const wrapStyle = toc.properties['data-wrap-style'];
-      delete toc.properties['data-wrap-style']
+      const wrapStyle = toc.properties['wrap-style'];
+      delete toc.properties['wrap-style']
      const wrapClass = toc.properties['wrap-class'];
      if (wrapClass) wrapCls.push(wrapClass);
      delete toc.properties['wrap-class'];
@@ -93,9 +93,8 @@ export function getTocsTree(arr = [], result = []) {
      const childs = getChilds([...data.slice(n + 1)], level);
      const resultChilds = getTocsTree(childs);
      if (resultChilds.length > 0) {
-        const bodyStyle = toc.properties['data-body-style'];
-        delete toc.properties['data-body-style']
-
+        const bodyStyle = toc.properties['body-style'];
+        delete toc.properties['body-style']
        const bodyClass = toc.properties['body-class'];
        delete toc.properties['body-class']
        panle.children = panle.children.concat({
--- a/scripts/index.mjs
+++ b/scripts/index.mjs
@@ -42,7 +42,7 @@ export async function run() {
  await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH)
  const files = await recursiveReaddirFiles(process.cwd(), {
    ignored: /\/(node_modules|\.git)/,
-    exclude: /(\.json|mjs)$/,
+    exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
    filter: (item) => item.ext === 'md',
  });
  createHTML(files);
--- a/scripts/style.css
+++ b/scripts/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;