released v1.10.0

.github/workflows/ci.yml

@@ -16,6 +16,13 @@ jobs:
       - run: npm install
       - run: npm run build
 
+      - name: Generate Contributors Images
+        uses: jaywcjlove/github-action-contributors@main
+        with:
+          filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
+          output: dist/CONTRIBUTORS.svg
+          avatarSize: 42
+
       - name: Create Tag
         id: create_tag
         uses: jaywcjlove/create-tag-action@main

README.md

@@ -21,9 +21,11 @@ Quick Reference
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
 [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
+[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
 [Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
 [TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
 [YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
@@ -105,6 +107,16 @@ Quick Reference
 <!--rehype:style=margin-top:3rem-->
 
 <!--rehype:ignore:start-->
+## 贡献
+
+请参阅[贡献指南](./CONTRIBUTING.md)了解如何开始。一如既往，感谢我们出色的贡献者！
+
+<a href="https://github.com/jaywcjlove/reference/graphs/contributors">
+  <img src="https://jaywcjlove.github.io/reference/CONTRIBUTORS.svg" />
+</a>
+
+上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。
+
 ## License
 
 MIT © [Kenny Wong](https://github.com/jaywcjlove)

docs/chmod.md

@@ -31,10 +31,21 @@ $ chmod -R 755 my_directory
 
 ### Chmod 生成器
 
-```html
-
+```html preview
+<div>
+权限：<input type="text" id="num" placeholder="777" maxlength="3" style="padding: 0.3rem 0.3rem;" /> <input type="text" id="let" placeholder="rwxrwxrwx" maxlength="9" style="padding: 0.3rem 0.3rem;" />
+</div>
 ```
 
+---
+
+&nbsp; | User | Group | Other
+:- | :- | :- | :-
+读 _(Read)_ | <input checked id="1" type="checkbox"></input> | <input checked id="4" type="checkbox"></input> | <input checked id="7" type="checkbox"></input>
+写 _(Write)_ | <input checked id="2" type="checkbox"></input> | <input checked id="5" type="checkbox"></input> | <input checked id="8" type="checkbox"></input>
+执行 _(Execute)_ | <input checked id="3" type="checkbox"></input> | <input checked id="6" type="checkbox"></input> | <input checked id="9" type="checkbox"></input>
+<!--rehype:className=show-header-->
+
 Chmod 生成器允许您以数字和符号的形式快速、直观地生成权限。
 
 ### 通用权限
@@ -263,4 +274,233 @@ $ find /path -type f -exec chmod 644 {} \;
 另见
 ----
 
-* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
+
+<!--rehype:ignore:start-->
+### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+<!--rehype:ignore:end-->
+
+```html preview
+<!-- Chmod 生成器 JS 代码 -->
+<script type="text/javascript">
+  const reg_num = /^[0-7]{3}$/; // 一些正则表达式来检查 num 输入
+  const reg_let = /^([r\-]{1}[w\-]{1}[x\-]{1}){3}$/; // 一些正则表达式来检查文本输入
+  function checkBoxHandle() {
+    change_occured(true, false, false);
+    // get rid of bad input classes
+    document.getElementById('num').classList.remove('bad-input');
+    document.getElementById('let').classList.remove('bad-input');
+  }
+  window.addEventListener("DOMContentLoaded", function () {
+    // loop over all the check boxes
+    for (let i = 1; i < 10; i++) {
+      let checkBox = document.getElementById(`${i}`);
+      checkBox.addEventListener('change', function () {
+        change_occured(true, false, false);
+
+        // get rid of bad input classes
+        document.getElementById('num').classList.remove('bad-input');
+
+        document.getElementById('let').classList.remove('bad-input');
+      });
+    }
+    // the octal input
+    let num_input = document.getElementById('num');
+    let num_fn = function () {
+      // check for bad input
+      if (!reg_num.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, true, false);
+      }
+    };
+    num_input.addEventListener('change', num_fn);
+    num_input.addEventListener('keyup', num_fn);
+    // the let input
+    let let_input = document.getElementById('let');
+    let let_fn = function () {
+      // check for bad input
+      if (!reg_let.test(this.value)) {
+        this.classList.add('bad-input');
+      } else {
+        this.classList.remove('bad-input');
+        change_occured(false, false, true);
+      }
+    };
+    let_input.addEventListener('change',let_fn);
+    let_input.addEventListener('keyup',let_fn);
+  });
+  /* SETUP
+  r-4-1  r-4-4  r-4-7
+  w-2-2  w-2-5  w-2-8
+  x-1-3  x-1-6  x-1-9
+  */
+  // define a function that runs when a change occures
+  function change_occured(caller_was_check, caller_was_num, caller_was_let) {
+    let num1 = 0, num2 = 0, num3 = 0; // these are the three numbers for the octal
+    let perm_string = ''; // holds the permision string ex. rw-x--r--
+    if (caller_was_check) {
+      // loop over all the check boxes and get the permisions
+      for (let i = 1; i < 10; i++) {
+        let checkBox = document.getElementById(`${i}`);
+        if (checkBox.checked) { // if checked
+          let current_perm = check_to_octal_and_text(i);
+          perm_string += `${current_perm.perm_let}`;
+          if (i <= 3) {
+            num1 += current_perm.perm_num;
+          } else if (i <= 6) {
+            num2 += current_perm.perm_num;
+          } else {
+            num3 += current_perm.perm_num;
+          }
+        } else { // if not checked
+          perm_string += '-';
+        }
+      }
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    } else if (caller_was_num) {
+      // get the individual numbers
+      let num_input_val = document.getElementById('num').value;
+      num1 = num_input_val.substring(0, 1);
+      num2 = num_input_val.substring(1, 2);
+      num3 = num_input_val.substring(2, 3);
+      // set the checkboxes and get the perm string
+      perm_string += octal_to_check_and_txt(num1, 0); //Owner
+      perm_string += octal_to_check_and_txt(num2, 1); //Owner
+      perm_string += octal_to_check_and_txt(num3, 2); //Owner
+      // set the permision input text
+      document.getElementById('let').value = perm_string;
+    } else if (caller_was_let) {
+      // get the text input
+      let perm_text = document.getElementById('let').value;
+      num1 = text_to_check_and_octal(perm_text.substring(0, 3), 0)
+      num2 = text_to_check_and_octal(perm_text.substring(3, 6), 3)
+      num3 = text_to_check_and_octal(perm_text.substring(6, 9), 6)
+      // set the octal value
+      document.getElementById('num').value = `${num1}${num2}${num3}`;
+    }
+  }
+  // define a function to converts the checkbox # to the respective permissions
+  // returns perm_num, perm_let
+  function check_to_octal_and_text(check_num) {
+    let perm_num = 0;
+    let perm_let = '-';
+    switch (check_num) {
+      case 1:
+      case 4:
+      case 7:
+        perm_num = 4;
+        perm_let = 'r';
+        break;
+      case 2:
+      case 5:
+      case 8:
+        perm_num = 2;
+        perm_let = 'w';
+        break;
+      case 3:
+      case 6:
+      case 9:
+        perm_num = 1;
+        perm_let = 'x';
+        break;
+      default:
+        perm_num = 0;
+        perm_let = '-';
+    }
+    // return values
+    return {
+      perm_num,
+      perm_let
+    };
+  }
+  /**
+   Takes a number 1-7 and which class it is in:
+   0 = owner
+   1 = Group
+   2 = Public
+   Returns: perm text (ex. "rwx") and sets the appropriate checkboxes
+   */
+  function octal_to_check_and_txt(octal_num, class_num) {
+    let perm_text = '';
+    let offset = class_num * 3;
+    switch (octal_num) {
+      case '1':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '--x';
+        break;
+      case '2':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '-w-';
+        break;
+      case '3':
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = '-wx';
+        break;
+      case '4':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'r--';
+        break;
+      case '5':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'r-x';
+        break;
+      case '6':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = 'rw-';
+        break;
+      case '7':
+        document.getElementById(`${1 + offset}`).checked = true;
+        document.getElementById(`${2 + offset}`).checked = true;
+        document.getElementById(`${3 + offset}`).checked = true;
+        perm_text = 'rwx';
+        break;
+      default:
+        document.getElementById(`${1 + offset}`).checked = false;
+        document.getElementById(`${2 + offset}`).checked = false;
+        document.getElementById(`${3 + offset}`).checked = false;
+        perm_text = '---';
+    }
+    return perm_text;
+  }
+  /**
+   Takes 3 letters (r, w, x, -    ex. 'rw-') and an offset (0,3,6)
+   Returns the octal num and sets the appropriate checkboxes
+   */
+  function text_to_check_and_octal(letters, offset) {
+    let perm_num = 0; // the octal number to return
+    // add up the oct num and set the check boxes
+    for (let i = 0; i < 3; i++) {
+      current_let = letters.substring(i, i + 1);
+      if (current_let == 'r') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 4;
+      } else if (current_let == 'w') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 2;
+      } else if (current_let == 'x') {
+        document.getElementById(`${i + 1 + offset}`).checked = true;
+        perm_num += 1;
+      } else {
+        document.getElementById(`${i + 1 + offset}`).checked = false;
+      }
+    }
+    return perm_num;
+  }
+</script>
+```

docs/cron.md

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

docs/curl.md

@@ -110,7 +110,7 @@ apk add --update curl  # alpine linux 中安装
 `curl --connect-timeout 10 -I -k https://www.baidu.com` | `curl` 默认没有超时
 `curl --verbose --header "Host: www.mytest.com:8182" www.baidu.com` | `curl` 得到额外的标题
 `curl -k -v https://www.google.com` | `curl` 获取带有标题的响应
-
+<!--rehype:class=auto-wrap-->
 
 ### 多文件上传
 <!--rehype:wrap-class=col-span-2-->
@@ -136,6 +136,7 @@ $ curl -XGET http://${elasticsearch_ip}:9200/_cluster/nodes | python -m json.too
 :- | :-
 `curl -d "name=username&password=123456" <URL>` | `curl` 发请求
 `curl <URL> -H "content-type: application/json" -d "{ \"woof\": \"bark\"}"` | `curl` 发送 json
+<!--rehype:class=auto-wrap-->
 
 ### CURL 脚本安装 rvm
 <!--rehype:wrap-class=col-span-2-->
@@ -156,6 +157,7 @@ curl -sSL https://get.rvm.io | bash
 `curl -T cryptopp552.zip -u test:test ftp://10.32.99.187/` | curl `ftp` 上传
 `curl -u test:test ftp://10.32.99.187/cryptopp552.zip -o cryptopp552.zip` | curl `ftp` 下载
 `curl -v -u admin:admin123 --upload-file package1.zip http://mysever:8081/dir/package1.zip` | 使用凭证 `curl` 上传
+<!--rehype:class=auto-wrap-->
 
 ### 检查网站响应时间
 <!--rehype:wrap-class=col-span-4-->

docs/dockerfile.md

@@ -110,6 +110,7 @@ RUN true | false  # 将脱离管道
 `CMD ["executable","param1","param2"]` | (exec 形式，这是首选形式)
 `CMD ["param1","param2"]` | (作为 ENTRYPOINT 的默认参数)
 `CMD command param1 param2` | (shell形式)
+<!--rehype:class=auto-wrap-->
 
 ```dockerfile
 EXPOSE 5900
@@ -185,6 +186,7 @@ temp?
 `*/temp*` | 在根的任何直接子目录中<br />排除名称以 `temp` 开头的文件和目录
 `*/*/temp*` | 从根以下两级的任何子目录中<br />排除以 `temp` 开头的文件和目录
 `temp?` | 排除根目录中名称为<br /> `temp` 的单字符扩展名的文件和目录
+<!--rehype:class=auto-wrap-->
 
 如果此文件存在，排除与其中的模式匹配的文件和目录，有利于避免 `ADD` 或 `COPY` 将敏感文件添加到镜像中。匹配是使用 Go 的 [filepath.Match](https://golang.org/pkg/path/filepath#Match) 规则完成的。
 
@@ -203,6 +205,7 @@ temp?
 `CMD command param1 param2` | 设置默认命令
 `ENV <key>=<value> ...` | 设置环境变量
 `EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
+<!--rehype:class=auto-wrap-->
 
 ### 服务静态网站的最小 Docker 镜像
 <!--rehype:wrap-class=col-span-2-->

docs/ini.md

@@ -0,0 +1,185 @@
+INI 备忘清单
+====
+
+这是理解和编写 INI 格式配置文件的快速参考备忘单，此清单包含配置的内容，结构和语法等内容。
+
+入门
+------
+
+### 介绍
+
+INI 是一种固定标准格式的配置文件，INI配置方法来自 MS-DOS 操作系统
+
+```ini
+; 这里是注释
+[owner]
+name=John Doe
+organization=Acme Products
+
+[database]
+; 这里是注释
+server=192.0.2.42
+port=143
+file="acme payroll.dat"
+```
+
+现在已成为许多配置的非正式标准，其它操作系统可能使用 `.conf` 或 `.cfg` 作为后缀
+
+### 稳定的特性
+
+- 基本元素是键或属性
+- 每个键由`名称`和`值`构成，等号 (=) 分隔
+- `键名称`显示在等号的`左侧`
+- `等号`和`分号`是`保留`字符
+<!--rehype:className=style-round-->
+
+```ini
+name = value
+```
+
+与下面👇 JSON 大致相同
+
+```js
+{
+  "name": "value"
+}
+```
+
+### 注释
+
+注释 (`;`)
+
+```ini
+; 这里是注释文本，将被忽略
+```
+
+注释 (`#`)
+
+```ini
+# 这里是注释文本，⚠️ 部分编译器支持
+```
+
+一行之后的注释 (`;`,`#`) _(不标准)_
+
+```ini
+var = a       ; 这是一个内联注释
+foo = bar     # 这是另一个内联注释
+```
+
+在某些情况下注释必须单独出现在行上
+
+### 部分(Sections)
+
+- 名称单独出现在一行中
+- 名称在方括号 `[` 和 `]` 中
+- 没有明确的 `section 结束` 分隔符
+- 在下一个 `section` 声明处或文件末尾处结束
+- 部分和属性名称不区分大小写
+<!--rehype:className=style-round-->
+
+```ini
+[section]
+key1 = a
+key2 = b
+```
+
+与下面👇 `JSON` 大致相同
+
+```json
+{
+  "section": {
+    "key1": "a",
+    "key2": "b"
+  }
+}
+```
+
+### 嵌套(部分解析器支持)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+
+[section.subsection]
+foo = bar
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io"
+    "subsection": {
+      "foo": "bar"
+    }
+  }
+}
+```
+
+嵌套到上一节(简写)
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+[.subsection]
+foo = bar
+```
+
+### 转义字符
+
+序列 | 意思
+:- | :-
+`\\` | \ (单个反斜杠，转义转义字符)
+`\'` | 撇号
+`\"` | 双引号
+`\0` | 空字符
+`\a` | 铃声/警报/声音
+`\b` | 退格键，某些应用程序的[贝尔字符](https://en.wikipedia.org/wiki/Bell_character)
+`\t` | 制表符
+`\r` | 回车
+`\n` | 换行
+`\;` | 分号
+`\#` | 数字符号
+`\=` | 等号
+`\:` | 冒号
+`\x????` | 十六进制代码点的 Unicode 字符对应于 ????
+
+### 数组
+
+```ini
+[section]
+domain = jaywcjlove.github.io
+array[]=first value
+array[]=second value
+```
+
+与下面👇 `JSON` 大致相同
+
+```js
+{
+  "section": {
+    "domain": "jaywcjlove.github.io",
+    "array": [
+      "first value", "second value"
+    ]
+  }
+}
+```
+
+### 解释器
+
+- [@go-ini/ini](https://github.com/go-ini/ini) _(golang)_
+- [@npm/ini](https://www.npmjs.com/package/ini) _(nodejs)_
+- [@zonyitoo/rust-ini](https://github.com/zonyitoo/rust-inii) _(rust)_
+- [@rxi/ini](https://www.npmjs.com/package/ini) _(c)_
+- [@pulzed/mINI](https://github.com/pulzed/mINI) _(c++)_
+- [@rickyah/ini-parser](https://github.com/rickyah/ini-parser) _(c#)_
+- [@Enichan/Ini](https://github.com/Enichan/Ini) _(c#)_
+
+另见
+---
+
+- [INI 文件配置](https://en.wikipedia.org/wiki/INI_file) _(wikipedia.org)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

docs/npm.md

@@ -21,6 +21,7 @@ npm 备忘清单
 | `npm install <package_name>@<tag>` | 使用 dist-tags 安装包                   |
 | `npm install -g <package_name>`    | 全局安装包                   |
 | `npm uninstall <package_name>`     | 卸载包                   |
+<!--rehype:class=auto-wrap-->
 
 `--save` 是 npm@5 的默认值。 以前，使用不带 `--save` 的 `npm install` 不会更新 package.json。
 
@@ -40,6 +41,7 @@ npm 备忘清单
 | `npm i /path/to/repo`                | 绝对路径            |
 | `npm i ./archive.tgz`                | 压缩包             |
 | `npm i https://site.com/archive.tgz` | 通过 HTTP 压缩包    |
+<!--rehype:class=auto-wrap-->
 
 ### 清单
 
@@ -49,6 +51,7 @@ npm 备忘清单
 | `npm list -g --depth 0` | 列出所有全局安装包的安装版本 | 
 | `npm view`              | 列出此软件中所有依赖项的最新版本 | 
 | `npm outdated`          | 仅列出此软件中已过时的依赖项  |
+<!--rehype:class=auto-wrap-->
 
 ### 更新
 

docs/quickreference.md

@@ -228,6 +228,16 @@ const school = <div>学校</div>;
 ```
 <!--rehype:className=wrap-text -->
 
+### HTML 代码预览
+
+```
+  ```html preview
+  这里是你的 HTML 代码
+  \```
+```
+
+上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
+
 
 布局
 ---
@@ -602,6 +612,17 @@ H2 部分
 
 `<!--rehype:className=style-list-arrow-->`
 
+### 隐藏表头强制小尺寸自动换行
+
+:- | :-
+:- | :-
+`visualEffectState.inactive` | 后台应一直显示为非激活状态。
+`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
+`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
+<!--rehype:className=auto-wrap-->
+
+`<!--rehype:className=auto-wrap-->`
+
 列表
 ---
 

docs/toml.md

@@ -12,6 +12,7 @@ TOML 备忘清单
 
 - [Document](https://toml.io/en/latest) _(toml.io)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
 
 ### 示例
 
@@ -253,4 +254,15 @@ bat = "hi"
 name = { first = "Tom", last = "Preston-Werner" }
 point = { x = 1, y = 2 }
 animal = { type.name = "pug" }
-```
+```
+
+另见
+---
+
+- [Document](https://toml.io/en/latest) _(toml.io)_
+- [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
+- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
+
+
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_

docs/yaml.md

@@ -426,9 +426,9 @@ YAML 参考
 `"`   | 环绕内嵌转义标量
 `|`   | 块标量指示器
 `>`   | 折叠标量指示器
-`-`   | 剥离 chomp 修饰符（`|-` 或 `>-`）
-`+`   | 保留 chomp 修饰符（`|+` 或 `>+`）
-`1-9` | 显式缩进修饰符（`|1` 或 `>2`）。 <br/> 修饰符可以组合（`|2-`, `>+1`）
+`-`   | 剥离 chomp 修饰符（`\|-` 或 `>-`）
+`+`   | 保留 chomp 修饰符（`\|+` 或 `>+`）
+`1-9` | 显式缩进修饰符（`\|1` 或 `>2`）。 <br/> 修饰符可以组合（`\|2-`, `>+1`）
 
 ### 标签属性（通常未指定）
 <!--rehype:wrap-class=col-span-2-->
@@ -441,6 +441,7 @@ YAML 参考
 `!!foo`  | 次要的（按照惯例，表示 `tag:yaml.org,2002:foo`）
 `!h!foo` | 需要 `%TAG !h! <prefix>`（然后表示 `<prefix>foo`）
 `!<foo>` | 逐字标记（始终表示“foo”）
+<!--rehype:class=auto-wrap-->
 
 ### 杂项指标
 
@@ -515,10 +516,13 @@ YAML 参考
 | `[.inf, -.Inf, .NAN]`     | [无穷大（浮点数），负数，不是数字] |
 | `{Y, true, Yes, ON}`      | 布尔真 |
 | `{n, FALSE, No, off}`     | 布尔假 |
+<!--rehype:class=auto-wrap-->
 
 另见
 ---
 
 - [YAML Reference Card](https://yaml.org/refcard.html) _(yaml.org)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/yaml/) _(learnxinyminutes.com)_
-- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
+- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
+- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
+- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcj/reference",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",
@@ -12,14 +12,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jaywcjlove/reference.git"
+    "url": "https://github.com/jaywcjlove/reference.git"
   },
   "bugs": {
     "url": "https://github.com/jaywcjlove/reference/issues"
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.0",
+    "@wcj/markdown-to-html": "^2.1.1",
     "chokidar": "^3.5.3",
     "fs-extra": "^10.1.0",
     "recursive-readdir-files": "^2.3.0",

scripts/assets/swiftui.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
+  <path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
+</svg>

scripts/create.mjs

@@ -12,6 +12,7 @@ import { homeCardIcons } from './utils/homeCardIcons.mjs';
 import { getTocsTree } from './utils/getTocsTree.mjs';
 import { rehypeTitle } from './utils/rehypeTitle.mjs';
 import { anchorPoint } from './utils/anchorPoint.mjs';
+import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
 
 const favicon = `data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E`;
 
@@ -41,6 +42,7 @@ export function create(str = '', options = {}) {
       }],
     ],
     rewrite: (node, index, parent) => {
+      rehypePreviewHTML(node, parent);
       rehypeTitle(node, options.filename);
       homeCardIcons(node, parent, options.isHome);
       tooltips(node, index, parent);

scripts/style.css

@@ -959,11 +959,14 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   .footer-wrap {
     font-size: 0.75rem;
   }
-  table {
+  table.auto-wrap {
     overflow: auto;
     display: block;
   }
-  table td, table th {
+  table.auto-wrap thead {
+    display: none;
+  }
+  table.auto-wrap td, table.auto-wrap th {
     display: block;
     text-align: left !important;
   }
@@ -973,9 +976,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   table td:first-child {
     white-space: initial;
   }
-  .wrap-header.h3wrap > .wrap-body {
-    overflow: initial;
-  }
   .tooltip:hover .tooltiptext {
     display: inline-block;
   }

scripts/utils/getSVGNode.mjs

@@ -3,11 +3,19 @@ import rehypeParse from 'rehype-parse';
 import {unified} from 'unified';
 import { VFile } from 'vfile';
 
-export function getSVGNode(iconPath) {
+export function getSVGNode(iconPath, space = 'svg') {
   const svgStr = fs.readFileSync(iconPath);
-  const processor = unified().use(rehypeParse,{ fragment: true, space: "svg" })
+  const processor = unified().use(rehypeParse,{ fragment: true, space })
   const file = new VFile();
   file.value = svgStr.toString();
   const hastNode = processor.runSync(processor.parse(file), file);
   return hastNode.children || []
+}
+
+export function getVNode(str = '', space = 'html') {
+  const processor = unified().use(rehypeParse,{ fragment: true, space })
+  const file = new VFile();
+  file.value = str.toString();
+  const hastNode = processor.runSync(processor.parse(file), file);
+  return hastNode.children || []
 }

scripts/utils/rehypePreviewHTML.mjs

@@ -0,0 +1,14 @@
+import { getCodeString } from 'rehype-rewrite';
+import { getVNode } from './getSVGNode.mjs';
+
+export function rehypePreviewHTML(node, parent) {
+  if (node.type === 'element' && node.tagName === 'pre' && node.properties?.className?.includes('language-html')) {
+    const child = node.children[0];
+    if (child?.tagName === 'code' && child.data?.meta === 'preview') {
+      const code = getCodeString(node.children)
+      const vnode = getVNode(code || '')
+      node.children = vnode
+    }
+  }
+
+}