released v1.26.0

* doc: maybe better translate.

Signed-off-by: 秋雨落 <i@rain.cx>

* Update cs.md

Signed-off-by: 秋雨落 <i@rain.cx>

.github/ISSUE_TEMPLATE/cheatsheet-request.md

@@ -6,13 +6,25 @@ labels: request
 assignees: jaywcjlove
 ---
 
+🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧   
+注意：请求太多，参考【优先级】快速添加内容  
+🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧   
+
+#### 优先级
+
+- [ ] 提交 PR 优先合并(优先处理)
+- [ ] 提供可复制的[中文/英文]备忘清单资料，优先添加
+- [ ] 大众化的内容(java/python)，优先搬运(小众内容请提供资料)
+
+#### 说明项目
+
 您可以在这里简单的提供一些资料，方便我们在 Quick Reference 中添加您想添加的备忘清单(速查表)。
 
 【请您在这里介绍一下工具或者语言，这很重要】
 
-- [ ] 如果你有一张不错的备忘清单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
-- [ ] 如果您不方便贡献，请在下方参考资料中提供链接地址，方便共建备忘清单(速查表)
-- [x] 这里为您提供了 Markdown 排版[示例教程](https://jaywcjlove.github.io/reference/docs/quickreference.html)
+- 如果你有一张不错的备忘清单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
+- 如果您不方便贡献，请在下方参考资料中提供链接地址，方便共建备忘清单(速查表)
+- 这里为您提供了 Markdown 排版[示例教程](https://jaywcjlove.github.io/reference/docs/quickreference.html)
 
 #### 提供参考资料地址
 

.github/workflows/ci.yml

@@ -93,39 +93,92 @@ jobs:
             http://localhost:9667/
             ```
 
-      # Create Docker Image in Github
-      - name: Login to GitHub registry
-        run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
-
-      - name: Build docker image
-        run: docker build -t ghcr.io/jaywcjlove/reference:latest .
-
-      - name: Publish to GitHub registry
-        run: docker push ghcr.io/jaywcjlove/reference:latest
-
-      - name: Tag docker image (beta) and publish to GitHub registry
-        if: steps.create_tag.outputs.successful
-        run: |
-          echo "version: v${{ steps.changelog.outputs.version }}"
-          docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
-          docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
-
       # Create Docker Image
-      - name: Docker login
-        run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
-        
-      - name: Build reference image
-        run: docker image build -t reference .
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USER }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Tags & Push image(latest)
-        run: |
-          echo "DOCKER_USER: ${{ secrets.DOCKER_USER }}"
-          docker tag reference ${{ secrets.DOCKER_USER }}/reference:latest
-          docker push ${{ secrets.DOCKER_USER }}/reference:latest
+      - name: Build and push image:latest
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          context: .
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ secrets.DOCKER_USER }}/reference:latest
 
-      - name: Tags & Push image
+      - name: Build and push image:tags
+        uses: docker/build-push-action@v3
         if: steps.create_tag.outputs.successful
-        run: |
-          echo "outputs.tag - ${{ steps.changelog.outputs.version }}"
-          docker tag reference ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
-          docker push ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
+        with:
+          push: true
+          context: .
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
+
+      # Create Docker Image in Github
+      - name: Login to the GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push image:latest
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          context: .
+          platforms: linux/amd64,linux/arm64
+          tags: ghcr.io/jaywcjlove/reference:latest
+
+      - name: Build and push image:tags
+        uses: docker/build-push-action@v3
+        if: steps.create_tag.outputs.successful
+        with:
+          push: true
+          context: .
+          platforms: linux/amd64,linux/arm64
+          tags: ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+
+
+
+      # # Create Docker Image in Github
+      # - name: Login to GitHub registry
+      #   run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      # - name: Build docker image
+      #   run: docker build -t ghcr.io/jaywcjlove/reference:latest .
+
+      # - name: Publish to GitHub registry
+      #   run: docker push ghcr.io/jaywcjlove/reference:latest
+
+      # - name: Tag docker image (beta) and publish to GitHub registry
+      #   if: steps.create_tag.outputs.successful
+      #   run: |
+      #     echo "version: v${{ steps.changelog.outputs.version }}"
+      #     docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+      #     docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+
+      # # Create Docker Image
+      # - name: Docker login
+      #   run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+        
+      # - name: Build reference image
+      #   run: docker image build -t reference .
+
+      # - name: Tags & Push image(latest)
+      #   run: |
+      #     echo "DOCKER_USER: ${{ secrets.DOCKER_USER }}"
+      #     docker tag reference ${{ secrets.DOCKER_USER }}/reference:latest
+      #     docker push ${{ secrets.DOCKER_USER }}/reference:latest
+
+      # - name: Tags & Push image
+      #   if: steps.create_tag.outputs.successful
+      #   run: |
+      #     echo "outputs.tag - ${{ steps.changelog.outputs.version }}"
+      #     docker tag reference ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
+      #     docker push ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}

.github/workflows/win.yml

@@ -0,0 +1,27 @@
+name: Win CI
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+      - run: |
+          cd ${{ github.workspace }}
+          ls
+          cd dist
+          ls
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: ${{ github.workspace }}\dist\**\*

CONTRIBUTING.md

@@ -61,6 +61,8 @@ Contributing 贡献
 - SVG 图标尺寸 `<svg height="1em" width="1em"`
 - SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
 
+图标可以在 [icongo 图标搜索](https://icongo.github.io/) 中搜索
+
 ### 提示配置
 
 ```markdown
@@ -78,13 +80,66 @@ Contributing 贡献
 ## 本地开发
 
 ```bash
-npm i          # 安装依赖
-npm run build  # 编译输出 HTML
-npm run start  # 监听 md 文件编译输出 HTML
+$ git clone https://github.com/jaywcjlove/reference.git 
+$ npm i          # 安装依赖
+$ npm run build  # 编译输出 HTML
+$ npm run start  # 监听 md 文件编译输出 HTML
 ```
 
 或者你也可以使用 `pnpm` 或者 `yarn` 做为包管理器
 
+## 快捷部署方法
+
+由于中国国内访问，时常打不开，推荐您部署的镜像网站，大家可以在这里留言推荐您的镜像网站网址，我将放置在首页推荐
+
+### 方法一，只需要克隆 gh-pages 分支代码到你的静态服务就可以了
+
+```shell
+$ git clone https://github.com/jaywcjlove/reference.git -b gh-pages
+```
+
+### 方法二，使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版
+
+```shell
+$ docker pull wcjiang/reference
+
+$ docker run --name reference --rm -d -p 9667:3000 wcjiang/reference:latest
+# Or
+$ docker run --name reference -itd -p 9667:3000 wcjiang/reference:latest
+```
+
+### 方法三，克隆仓库自己编译，添加导航菜单
+
+```bash
+$ git clone https://github.com/jaywcjlove/reference.git 
+$ npm install    # 安装依赖
+$ npm run build  # 编译输出静态页面
+$ npm run start  # 开发模式，监听实时编译输出静态页面
+```
+
+文件被输出到 `dist` 目录，将 `dist` 目录静态页面部署到静态服务就可以了
+
+<img width="423" alt="image" src="https://user-images.githubusercontent.com/1680273/203210099-cd9e1377-bceb-40cc-98f1-4c4c549a3986.png">
+
+提供自定义菜单，在项目的根目录建立 `.env` 文件，添加下面内容
+
+```ini
+REF_URL=http://ref.xxx.cn/
+REF_LABEL=网站首页
+```
+
+### 国内镜像
+
+由于中国国内访问，时常打不开，你可以访问下面镜像网站。
+
+- [ecdata.cn](http://ref.ecdata.cn)
+- [mofe.io](http://quickref.mofe.io)
+- [aibk.cn](https://quickref.aibk.cn)
+- [laoleng.vip](http://bbs.laoleng.vip/reference/)
+- [liujiapeng.com](https://www.liujiapeng.com/)
+- [dbyun.net](https://www.dbyun.net/reference/index.html)
+
+感谢🙏
 
 ## 贡献
 
@@ -96,12 +151,45 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
+<a href="https://github.com/mofelee" title="mofelee">
+  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
+</a>
+<a href="https://github.com/Alex-Programer" title="Alex">
+  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
+</a>
+<a href="https://github.com/expoli" title="expoli">
+  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
+</a>
+<a href="https://github.com/JeffersonHuang" title="Jefferson">
+  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
+</a>
+<a href="https://github.com/sjh42" title="42:p">
+  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
+</a>
+<a href="https://github.com/partoneplay" title="partoneplay">
+  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
+</a>
+<a href="https://github.com/ryanhex53" title="ryanhex53">
+  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
+</a>
 <a href="https://github.com/catcto" title="喵仙人">
   <img src="https://avatars.githubusercontent.com/u/5467932?v=4" width="42;" alt="喵仙人"/>
 </a>
+<a href="https://github.com/13812700839" title="花殇">
+  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
+</a>
+<a href="https://github.com/Smartdousha" title="Anko">
+  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
+</a>
+<a href="https://github.com/Brid9e" title="Brid9e">
+  <img src="https://avatars.githubusercontent.com/u/85558909?v=4" width="42;" alt="Brid9e"/>
+</a>
 <a href="https://github.com/CharlotteZeng" title="Chart">
   <img src="https://avatars.githubusercontent.com/u/19461184?v=4" width="42;" alt="Chart"/>
 </a>
+<a href="https://github.com/DaiNing810" title="DaiN">
+  <img src="https://avatars.githubusercontent.com/u/94962339?v=4" width="42;" alt="DaiN"/>
+</a>
 <a href="https://github.com/demigodliu" title="DemigodLiu">
   <img src="https://avatars.githubusercontent.com/u/30372735?v=4" width="42;" alt="DemigodLiu"/>
 </a>
@@ -111,35 +199,83 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/JetSquirrel" title="JetSquirrel">
   <img src="https://avatars.githubusercontent.com/u/20291255?v=4" width="42;" alt="JetSquirrel"/>
 </a>
+<a href="https://github.com/Lihuagreek" title="Lihuagreek">
+  <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
+</a>
+<a href="https://github.com/LufsX" title="LufsX">
+  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
+</a>
+<a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
+  <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
+</a>
 <a href="https://github.com/HanaNoryu" title="Noryu">
   <img src="https://avatars.githubusercontent.com/u/109856546?v=4" width="42;" alt="Noryu"/>
 </a>
+<a href="https://github.com/whb1998a" title="WHB">
+  <img src="https://avatars.githubusercontent.com/u/44045064?v=4" width="42;" alt="WHB"/>
+</a>
+<a href="https://github.com/y52y" title="Zyj">
+  <img src="https://avatars.githubusercontent.com/u/51304324?v=4" width="42;" alt="Zyj"/>
+</a>
+<a href="https://github.com/chyok" title="chyok">
+  <img src="https://avatars.githubusercontent.com/u/32629225?v=4" width="42;" alt="chyok"/>
+</a>
 <a href="https://github.com/gaoxiaoduan" title="coderduan">
   <img src="https://avatars.githubusercontent.com/u/69953511?v=4" width="42;" alt="coderduan"/>
 </a>
 <a href="https://github.com/cool9203" title="cool9203">
   <img src="https://avatars.githubusercontent.com/u/29609607?v=4" width="42;" alt="cool9203"/>
 </a>
+<a href="https://github.com/godotc" title="godotc">
+  <img src="https://avatars.githubusercontent.com/u/79260851?v=4" width="42;" alt="godotc"/>
+</a>
+<a href="https://github.com/greyhao" title="greyhao">
+  <img src="https://avatars.githubusercontent.com/u/107107440?v=4" width="42;" alt="greyhao"/>
+</a>
 <a href="https://github.com/hua03" title="hua03">
   <img src="https://avatars.githubusercontent.com/u/19561959?v=4" width="42;" alt="hua03"/>
 </a>
 <a href="https://github.com/hweining" title="hweining">
   <img src="https://avatars.githubusercontent.com/u/8973985?v=4" width="42;" alt="hweining"/>
 </a>
+<a href="https://github.com/k983551019" title="k983551019">
+  <img src="https://avatars.githubusercontent.com/u/48147837?v=4" width="42;" alt="k983551019"/>
+</a>
+<a href="https://github.com/kdxcxs" title="kdxcxs">
+  <img src="https://avatars.githubusercontent.com/u/18746192?v=4" width="42;" alt="kdxcxs"/>
+</a>
+<a href="https://github.com/larry-xue" title="larry">
+  <img src="https://avatars.githubusercontent.com/u/48818060?v=4" width="42;" alt="larry"/>
+</a>
 <a href="https://github.com/liliangrong777" title="liliangrong777">
   <img src="https://avatars.githubusercontent.com/u/58727146?v=4" width="42;" alt="liliangrong777"/>
 </a>
+<a href="https://github.com/lykjjj" title="lykjjj">
+  <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
+</a>
+<a href="https://github.com/mancuoj" title="mancuoj">
+  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
+</a>
 <a href="https://github.com/onewesong" title="onewesong">
   <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
-<a href="https://github.com/ryanhex53" title="ryanhex53">
-  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
+<a href="https://github.com/wjjwkwindy" title="wjjwkwindy">
+  <img src="https://avatars.githubusercontent.com/u/9508591?v=4" width="42;" alt="wjjwkwindy"/>
+</a>
+<a href="https://github.com/xing133" title="xing133">
+  <img src="https://avatars.githubusercontent.com/u/5336490?v=4" width="42;" alt="xing133"/>
 </a>
 <a href="https://github.com/zxx-457" title="zxx-457">
   <img src="https://avatars.githubusercontent.com/u/114141362?v=4" width="42;" alt="zxx-457"/>
 </a>
 <a href="https://github.com/lvzhenbo" title="吕振波">
   <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
+</a>
+<a href="https://github.com/qyl27" title="秋雨落">
+  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
+</a>
+<a href="https://github.com/lisheng741" title="芦荟柚子茶">
+  <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->
 
 上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。

README.md

@@ -9,141 +9,160 @@ Quick Reference
 <!--rehype:ignore:end-->
 
 <!--rehype:ignore:start-->
-[![Quick Reference](https://user-images.githubusercontent.com/1680273/200623638-280ac85b-0cfa-4c60-bae3-ae14231acc6f.png)](https://jaywcjlove.github.io/reference)
+[![Quick Reference](https://user-images.githubusercontent.com/1680273/201931931-d8559417-0a15-46af-a009-ec1e56e5b778.png)](https://jaywcjlove.github.io/reference)
 <!--rehype:ignore:end-->
 
-为开发人员分享快速参考备忘清单【速查表】。在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造中文版本的轮子使命感突然来了，为了方便自己的技术栈查阅，如果您提供一个清单，我将抽空搬运，立即撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
+为开发人员分享快速参考备忘清单【速查表】。这是英文版 [Reference](https://github.com/Randy8080/reference) 的中文版本，目的是为了方便自己的技术栈查阅，如果您提供一个清单，我将抽空搬运，立即撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
 
 ## 正在建设中...
 
 坑已挖，需要您的参与完善和贡献！🙏
 <!--rehype:style=padding-bottom: 23px;-->
 
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
-[Vue 3 ](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
+[Oracle](./docs/oracle.md)<!--rehype:style=background: rgb(255 0 0);&class=contributing tag&data-lang=SQL-->
+[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
+[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
 <!--rehype:class=home-card-->
 
 ## 编程
 
-[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
-[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
-[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255/var(\-\-bg\-opacity));-->
-[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));&class=tag&data-lang=Docker-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
-[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
-[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146/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));-->
-[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
-[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
-[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
-[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
-[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147/var(\-\-bg\-opacity));-->
-[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132/var(\-\-bg\-opacity));-->
-[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
-[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45/var(\-\-bg\-opacity));-->
-[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71/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));&class=tag&data-lang=swift-->
-[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));-->
+[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223);-->
+[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192);-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
+[C++](./docs/cpp.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
+[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255);-->
+[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);-->
+[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
+[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);-->
+[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);-->
+[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60);-->
+[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60);-->
+[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
+[Laravel 8](./docs/laravel.md)<!--rehype:style=background: rgb(249 50 44);&class=contributing tag&data-lang=PHP-->
+[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156);-->
+[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143);&class=tag&data-lang=SQL-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
+[Oracle](./docs/oracle.md)<!--rehype:style=background: rgb(255 0 0);-->
+[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147);-->
+[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132);-->
+[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163);&class=tag&data-lang=SQL-->
+[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45);-->
+[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71);-->
+[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift-->
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132);-->
+[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230);-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
+[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
 <!--rehype:class=home-card-->
 
 ## 前端
 
-[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
-[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
-[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
-[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));&class=tag&data-lang=JS-->
-[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
-[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
-[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
-[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
-[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
-[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
-[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
-[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
-[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
-[Vue 3 ](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205);&class=tag&data-lang=CSS-->
+[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153);-->
+[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23);-->
+[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23);&class=tag&data-lang=JS-->
+[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184);&class=tag&data-lang=CSS-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63);&class=tag&data-lang=CSS-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154);&class=tag&data-lang=CSS-->
+[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->
+[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
+[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93);&class=tag&data-lang=CSS-->
+[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173);-->
+[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155);-->
+[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198);-->
+[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131);-->
+[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
 <!--rehype:class=home-card-->
 
 ## Nodejs
 
-[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
-[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
-[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
-[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
-[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
-[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
-[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182/var(\-\-bg\-opacity));-->
+[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206);-->
+[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91);-->
+[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206);-->
+[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252);-->
+[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0);-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
+[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132);-->
+[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182);-->
 <!--rehype:class=home-card-->
 
 ## 工具
 
-[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134/var(\-\-bg\-opacity));-->
-[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54/var(\-\-bg\-opacity));-->
-[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0/var(\-\-bg\-opacity));-->
-[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
-[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
-[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
-[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
-[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
-[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220/var(\-\-bg\-opacity));-->
-[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
-[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134);-->
+[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54);-->
+[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0);-->
+[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141);-->
+[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0);&class=tag&data-lang=macOS-->
+[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0);-->
+[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230);-->
+[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8);-->
+[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220);-->
+[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230);-->
+[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233);&class=tag&data-lang=macOS-->
 <!--rehype:class=home-card-->
 
 ## 命令
 
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
-[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
-[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
-[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71/var(\-\-bg\-opacity));&class=tag&data-lang=Rust-->
-[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
-[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
-[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
-[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
-[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=JSON-->
-[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
-[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
-[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
-[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
-[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123/var(\-\-bg\-opacity));-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
+[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9);&class=tag&data-lang=C/C++-->
+[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6);&class=tag&data-lang=C/C++-->
+[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71);&class=tag&data-lang=Rust-->
+[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68);-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
+[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62);-->
+[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129);-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
+[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Homebrew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87);&class=tag&data-lang=macOS-->
+[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129);-->
+[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=JSON-->
+[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Mitmproxy](./docs/mitmproxy.md)<!--rehype:style=background: rgb(4 92 135);-->
+[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135);-->
+[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129);-->
+[OpenSSL](./docs/openssl.md)<!--rehype:style=background: rgb(114 20 18);-->
+[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129);-->
+[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99);-->
+[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99);-->
+[Sysdig](./docs/sysdig.md)<!--rehype:style=background: rgb(1 171 199);-->
+[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99);-->
+[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123);-->
+[CMD](./docs/cmd.md)<!--rehype:style=background: rgb(99 99 99);-->
+[APT](./docs/apt.md)<!--rehype:style=background: rgb(30 144 255);-->
+[tar](./docs/tar.md)<!--rehype:style=background: rgb(215 89 62);-->
 <!--rehype:class=home-card-->
 
 ## 其它
 
-[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=排版说明-->
-[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255/var(\-\-bg\-opacity));-->
-[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
-[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=HTML-->
-[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=排版说明-->
+[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255);-->
+[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=CSS-->
+[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129);-->
+[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=HTML-->
+[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129);-->
+[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129);-->
+[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129);-->
 <!--rehype:class=home-card-->
 
 ## 看到缺少什么了吗？
@@ -167,12 +186,45 @@ Quick Reference
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
+<a href="https://github.com/mofelee" title="mofelee">
+  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
+</a>
+<a href="https://github.com/Alex-Programer" title="Alex">
+  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
+</a>
+<a href="https://github.com/expoli" title="expoli">
+  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
+</a>
+<a href="https://github.com/JeffersonHuang" title="Jefferson">
+  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
+</a>
+<a href="https://github.com/sjh42" title="42:p">
+  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
+</a>
+<a href="https://github.com/partoneplay" title="partoneplay">
+  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
+</a>
+<a href="https://github.com/ryanhex53" title="ryanhex53">
+  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
+</a>
 <a href="https://github.com/catcto" title="喵仙人">
   <img src="https://avatars.githubusercontent.com/u/5467932?v=4" width="42;" alt="喵仙人"/>
 </a>
+<a href="https://github.com/13812700839" title="花殇">
+  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
+</a>
+<a href="https://github.com/Smartdousha" title="Anko">
+  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
+</a>
+<a href="https://github.com/Brid9e" title="Brid9e">
+  <img src="https://avatars.githubusercontent.com/u/85558909?v=4" width="42;" alt="Brid9e"/>
+</a>
 <a href="https://github.com/CharlotteZeng" title="Chart">
   <img src="https://avatars.githubusercontent.com/u/19461184?v=4" width="42;" alt="Chart"/>
 </a>
+<a href="https://github.com/DaiNing810" title="DaiN">
+  <img src="https://avatars.githubusercontent.com/u/94962339?v=4" width="42;" alt="DaiN"/>
+</a>
 <a href="https://github.com/demigodliu" title="DemigodLiu">
   <img src="https://avatars.githubusercontent.com/u/30372735?v=4" width="42;" alt="DemigodLiu"/>
 </a>
@@ -182,40 +234,104 @@ Quick Reference
 <a href="https://github.com/JetSquirrel" title="JetSquirrel">
   <img src="https://avatars.githubusercontent.com/u/20291255?v=4" width="42;" alt="JetSquirrel"/>
 </a>
+<a href="https://github.com/Lihuagreek" title="Lihuagreek">
+  <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
+</a>
+<a href="https://github.com/LufsX" title="LufsX">
+  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
+</a>
+<a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
+  <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
+</a>
 <a href="https://github.com/HanaNoryu" title="Noryu">
   <img src="https://avatars.githubusercontent.com/u/109856546?v=4" width="42;" alt="Noryu"/>
 </a>
+<a href="https://github.com/whb1998a" title="WHB">
+  <img src="https://avatars.githubusercontent.com/u/44045064?v=4" width="42;" alt="WHB"/>
+</a>
+<a href="https://github.com/y52y" title="Zyj">
+  <img src="https://avatars.githubusercontent.com/u/51304324?v=4" width="42;" alt="Zyj"/>
+</a>
+<a href="https://github.com/chyok" title="chyok">
+  <img src="https://avatars.githubusercontent.com/u/32629225?v=4" width="42;" alt="chyok"/>
+</a>
 <a href="https://github.com/gaoxiaoduan" title="coderduan">
   <img src="https://avatars.githubusercontent.com/u/69953511?v=4" width="42;" alt="coderduan"/>
 </a>
 <a href="https://github.com/cool9203" title="cool9203">
   <img src="https://avatars.githubusercontent.com/u/29609607?v=4" width="42;" alt="cool9203"/>
 </a>
+<a href="https://github.com/godotc" title="godotc">
+  <img src="https://avatars.githubusercontent.com/u/79260851?v=4" width="42;" alt="godotc"/>
+</a>
+<a href="https://github.com/greyhao" title="greyhao">
+  <img src="https://avatars.githubusercontent.com/u/107107440?v=4" width="42;" alt="greyhao"/>
+</a>
 <a href="https://github.com/hua03" title="hua03">
   <img src="https://avatars.githubusercontent.com/u/19561959?v=4" width="42;" alt="hua03"/>
 </a>
 <a href="https://github.com/hweining" title="hweining">
   <img src="https://avatars.githubusercontent.com/u/8973985?v=4" width="42;" alt="hweining"/>
 </a>
+<a href="https://github.com/k983551019" title="k983551019">
+  <img src="https://avatars.githubusercontent.com/u/48147837?v=4" width="42;" alt="k983551019"/>
+</a>
+<a href="https://github.com/kdxcxs" title="kdxcxs">
+  <img src="https://avatars.githubusercontent.com/u/18746192?v=4" width="42;" alt="kdxcxs"/>
+</a>
+<a href="https://github.com/larry-xue" title="larry">
+  <img src="https://avatars.githubusercontent.com/u/48818060?v=4" width="42;" alt="larry"/>
+</a>
 <a href="https://github.com/liliangrong777" title="liliangrong777">
   <img src="https://avatars.githubusercontent.com/u/58727146?v=4" width="42;" alt="liliangrong777"/>
 </a>
+<a href="https://github.com/lykjjj" title="lykjjj">
+  <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
+</a>
+<a href="https://github.com/mancuoj" title="mancuoj">
+  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
+</a>
 <a href="https://github.com/onewesong" title="onewesong">
   <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
-<a href="https://github.com/ryanhex53" title="ryanhex53">
-  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
+<a href="https://github.com/wjjwkwindy" title="wjjwkwindy">
+  <img src="https://avatars.githubusercontent.com/u/9508591?v=4" width="42;" alt="wjjwkwindy"/>
+</a>
+<a href="https://github.com/xing133" title="xing133">
+  <img src="https://avatars.githubusercontent.com/u/5336490?v=4" width="42;" alt="xing133"/>
 </a>
 <a href="https://github.com/zxx-457" title="zxx-457">
   <img src="https://avatars.githubusercontent.com/u/114141362?v=4" width="42;" alt="zxx-457"/>
 </a>
 <a href="https://github.com/lvzhenbo" title="吕振波">
   <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
+</a>
+<a href="https://github.com/qyl27" title="秋雨落">
+  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
+</a>
+<a href="https://github.com/lisheng741" title="芦荟柚子茶">
+  <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->
 
 贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成
 <!--rehype:style=padding-top:1rem;-->
 
+## 国内镜像网站
+<!--rehype:wrap-style=text-align: center;max-width: 650px;margin: 0 auto;&class=home-title-reset-->
+
+由于中国国内访问，时常打不开，你可以访问下面镜像网站。推荐自己的[镜像网站](https://github.com/jaywcjlove/reference/issues/102#issue-1451649637)
+
+[ecdata.cn](http://ref.ecdata.cn)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[mofe.io](http://quickref.mofe.io)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[aibk.cn](https://quickref.aibk.cn)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[laoleng.vip](http://bbs.laoleng.vip/reference/)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[liujiapeng.com](https://www.liujiapeng.com/)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[dbyun.net](https://www.dbyun.net/reference/index.html)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;-->
+[cyolc932.fun](https://cyolc932.fun/reference/)<!--rehype:target=_blank&style=background: rgb(16 185 129);height: 2.6rem;border-radius: 2rem;font-weight: bold;&class=contributing tag&data-info=👆需要梯子-->
+<!--rehype:class=home-card&style=margin:2.2rem 0;display: flex;justify-content: center;gap: 1rem;flex-wrap: wrap;-->
+
+如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版。
+
 <!--rehype:ignore:start-->
 ## License
 

docs/ansible.md

@@ -397,6 +397,7 @@ $ ansible-pull -U <repository> [options]
 另见
 ---
 
-[Getting started with Ansible](https://docs.ansible.com/ansible/latest/getting_started/index.html)  
-[Introduction to ad hoc commands](https://docs.ansible.com/ansible/latest/user_guide/intro_adhoc.html)
-[Ansible cheatsheet](https://github.com/luckylittle/ansible-cheatsheet/blob/master/ansible-cheatsheet.txt)
+- [Getting started with Ansible](https://docs.ansible.com/ansible/latest/getting_started/index.html)  
+- [Introduction to ad hoc commands](https://docs.ansible.com/ansible/latest/user_guide/intro_adhoc.html)
+- [Ansible cheatsheet](https://github.com/luckylittle/ansible-cheatsheet/blob/master/ansible-cheatsheet.txt)
+- [Ansible Tutorial for Beginners: Ultimate Playbook & Examples](https://spacelift.io/blog/ansible-tutorial)

docs/apt.md

@@ -0,0 +1,206 @@
+APT 备忘清单
+===
+
+这个 APT 快速参考备忘单显示了它的常用命令使用清单。
+
+APT 清单查询
+---
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+APT（`A`dvanced `P`ackaging `T`ools）是`Debian`及其派生的`Linux`软件包管理器。APT可以自动下载，配置，安装二进制或者源代码格式的软件包，因此简化了Unix系统上管理软件的过程。APT最早被设计成`dpkg的前端`，用来处理deb格式的软件包。现在经过`APT-RPM`组织修改，APT已经可以安装在支持RPM的系统管理RPM包。
+
+它结合了apt-get和apt-cache工具中最常用的命令以及选项与默认值。`apt`命令必须以具有`sudo`权限的用户运行。
+
+命令语法格式
+
+```bash
+$ apt [ OPTIONS ] COMMAND
+```
+
+----
+
+相关参考文献
+
+- [APT（8） 官方网站](https://manpages.debian.org/unstable/apt/apt.8.en.html)
+- [apt.conf(5) 官方文档](https://manpages.debian.org/unstable/apt/apt.conf.5.en.html)
+- [sources.list(5) 官方文档](https://manpages.debian.org/unstable/apt/sources.list.5.en.html)
+
+### 命令查询
+
+子命令描述和任务，显示 apt 命令和选项。
+
+```bash
+$ apt -h or --help
+# 或
+$ apt 
+```
+
+查看指令用法
+
+```bash
+$ man apt
+```
+
+### update
+
+从APT存储库中获取最新索引数据。
+
+```bash
+$ sudo apt update
+```
+
+在升级或安装新软件包之前，建议始终先运行一次更新软件包索引。
+
+### upgrade
+
+将安装的软件包升级到最新版本，该命令不会升级那些已删除软件包的依赖。
+
+```bash
+$ sudo apt upgrade
+```
+
+升级单个软件包。
+
+```bash
+$ sudo apt upgrade package_name
+```
+
+升级整个系统，则会删除当前安装的软件包。
+
+```bash
+$ sudo apt full-upgrade
+```
+
+### install
+
+安装软件包。
+
+```bash
+$ sudo apt install package_name
+```
+
+如果只想升级，不要安装
+
+```bash
+$ sudo apt install <package_name> --only-upgrade
+```
+<!--rehype:className=wrap-text -->
+
+安装多个软件包，包名用空格分隔。
+
+```bash
+$ sudo apt install package1 package2
+```
+
+安装本地deb文件，提供文件的完整路径。否则，apt命令将尝试从APT存储库中检索并安装软件包。
+`Deb是所有基于Debian的发行版使用的安装软件包格式`。
+
+```bash
+$ sudo apt install /full/path/file.deb
+```
+
+### remove和purge
+<!--rehype:wrap-class=row-span-2-->
+
+要删除已安装的程序包，你可以使用apt子命令`remove`和`purge`。
+
+#### remove
+
+remove子命令将卸载指定的软件包，`但可能会留下一些配置文件`。
+通过remove方式卸载的软件包可以通过重新安装软件包来恢复，因为个人配置文件还在本地。
+
+卸载指定的软件包
+
+```bash
+$ sudo apt remove package_name
+```
+
+指定多个软件包，以空格分隔
+
+```bash
+$ sudo apt remove package1 package2
+```
+
+#### purge
+
+purge子命令将卸载指定的软件包和配置文件。
+
+```bash
+$ sudo apt purge package_name
+```
+
+### autoremove自动删除依赖
+
+用于删除自动安装的包，这些包都是为了满足其他包的依赖关系，现在不再需要这些包，因为依赖关系已更改或者同时删除了需要它们的包。
+
+```bash
+$ sudo apt autoremove
+```
+
+### list
+<!--rehype:wrap-class=row-span-2-->
+
+打印所有软件包的列表，包括软件包的版本和结构的信息。
+
+```bash
+$ sudo apt list
+```
+
+要确定是否安装了指定的软件包，可以使用grep命令过滤输出。
+
+```bash
+$ sudo apt list | grep package_name
+```
+
+仅列出已安装的软件包。
+
+```bash
+$ sudo apt list --installed
+```
+
+获取可升级软件包的列表。
+
+```bash
+$ sudo apt list --upgradeable
+```
+
+### 搜索查找软件包详细信息
+
+#### search
+
+在可用软件源列表中搜索指定的软件包。如果找到该软件包，则将返回名称与搜索词匹配的软件包。
+
+```bash
+$ sudo apt search package_name
+```
+
+#### show
+
+显示有关给定软件包的信息，包括其依赖项、安装、下载大小、软件包可用的来源、软件包内容的描述等。
+
+```bash
+$ sudo apt show package_name
+```
+
+### edit-sources 快速换源
+
+允许您在首选的文本编辑器中编辑`sources.list(5)` 文件，同时还提供基本的健全性检查。
+
+首次换源可以使用`edit-sources`
+
+```bash
+$ sudo apt show edit-sources
+```
+
+换源后更新一下软件包索引。
+
+```bash
+$ sudo apt update
+```
+
+之后可以使用`select-editor`更换默认编辑器
+
+```bash
+$ sudo select-editor
+```

docs/bash.md

@@ -27,9 +27,9 @@ NAME="John"
 echo ${NAME}    # => John (变量)
 echo $NAME      # => John (变量)
 echo "$NAME"    # => John (变量)
-echo '$NAME'    # => $NAME (确切的字符串)
+echo '$NAME'    # => $NAME (字符串原样输出)
 echo "${NAME}!" # => John! (变量)
-NAME = "John"   # => Error (关于空间)
+NAME = "John"   # => Error (注意不能有空格)
 ```
 
 ### 注释
@@ -39,8 +39,8 @@ NAME = "John"   # => Error (关于空间)
 
 : '
 这是一个
-非常整洁的评论
-在 bash
+非常整洁的
+bash 注释
 '
 ```
 
@@ -53,11 +53,11 @@ NAME = "John"   # => Error (关于空间)
 :-|-
 `$1` … `$9` | 参数 1 ... 9
 `$0`        | 脚本本身的名称
-`$1`        | 第一个论点
+`$1`        | 第一个参数
 `${10}`     | 位置参数 10
 `$#`        | 参数数量
 `$$`        | shell 的进程 id
-`$*`        | 所有论据
+`$*`        | 所有参数
 `$@`        | 所有参数，从第一个开始
 `$-`        | 当前选项
 `$_`        | 上一个命令的最后一个参数
@@ -277,8 +277,8 @@ done
 <!--rehype:wrap-class=col-span-2-->
 
 ```bash
-Fruits=("${Fruits[@]}" "Watermelon")         # 推
-Fruits+=('Watermelon')                       # 也推
+Fruits=("${Fruits[@]}" "Watermelon")         # 添加
+Fruits+=('Watermelon')                       # 也是添加
 Fruits=( ${Fruits[@]/Ap*/} )                 # 通过正则表达式匹配删除
 unset Fruits[2]                              # 删除一项
 Fruits=("${Fruits[@]}")                      # 复制
@@ -350,14 +350,14 @@ Bash 条件句
 :- | -
 `[[ NUM -eq NUM ]]` | 等于 <yel>Eq</yel>ual                            |
 `[[ NUM -ne NUM ]]` | 不等于 <yel>N</yel>ot <yel>e</yel>qual             |
-`[[ NUM -lt NUM ]]` | 少于 <yel>L</yel>ess <yel>t</yel>han             |
-`[[ NUM -le NUM ]]` | 小于或等于 <yel>L</yel>ess than or <yel>e</yel>qual    |
+`[[ NUM -lt NUM ]]` | 小于 <yel>L</yel>ess <yel>t</yel>han             |
+`[[ NUM -le NUM ]]` | 小于等于 <yel>L</yel>ess than or <yel>e</yel>qual    |
 `[[ NUM -gt NUM ]]` | 大于 <yel>G</yel>reater <yel>t</yel>han          |
-`[[ NUM -ge NUM ]]` | 大于或等于 <yel>G</yel>reater than or <yel>e</yel>qual |
-`(( NUM < NUM ))`   | 少于
+`[[ NUM -ge NUM ]]` | 大于等于 <yel>G</yel>reater than or <yel>e</yel>qual |
+`(( NUM < NUM ))`   | 小于
 `(( NUM <= NUM ))`  | 小于或等于
-`(( NUM > NUM ))`   | 比...更棒
-`(( NUM >= NUM ))`  | 大于或等于
+`(( NUM > NUM ))`   | 比...更大
+`(( NUM >= NUM ))`  | 大于等于
 
 ### 字符串条件
 
@@ -365,7 +365,7 @@ Bash 条件句
 :- | -
 `[[ -z STR ]]`     | 空字符串
 `[[ -n STR ]]`     | <yel>非</yel>空字符串
-`[[ STR == STR ]]` | 平等的
+`[[ STR == STR ]]` | 相等
 `[[ STR = STR ]]`  | 相等（同上）
 `[[ STR < STR ]]`  | 小于 _(ASCII)_
 `[[ STR > STR ]]`  | 大于 _(ASCII)_
@@ -411,7 +411,7 @@ if [[ '1. abc' =~ ([a-z]+) ]]; then
 fi
 ```
 
-#### 更小
+#### 小于
 
 ```bash
 if (( $a < $b )); then
@@ -441,7 +441,7 @@ fi
 `[[ -w FILE ]]`   | 可写
 `[[ -x FILE ]]`   | 可执行文件
 `[[ f1 -nt f2 ]]` | f1 比 f2 新
-`[[ f1 -ot f2 ]]` | f2 早于 f1
+`[[ f1 -ot f2 ]]` | f2 比 f1 新
 `[[ f1 -ef f2 ]]` | 相同的文件
 
 ### 更多条件
@@ -492,7 +492,7 @@ for i in {1..5}; do
 done
 ```
 
-#### 具有步长
+#### 步长
 
 ```bash
 for i in {5..50..5}; do
@@ -510,7 +510,7 @@ while [[ $i -lt 4 ]]; do
 done
 ```
 
-### 自动递增
+### 自动递减
 
 ```bash
 i=3
@@ -554,7 +554,7 @@ until [ $count -gt 10 ]; do
 done
 ```
 
-### 永远
+### 死循环
 
 ```bash
 while true; do
@@ -562,7 +562,7 @@ while true; do
 done
 ```
 
-### 永远（简写）
+### 死循环（简写）
 
 ```bash
 while :; do
@@ -570,7 +570,7 @@ while :; do
 done
 ```
 
-### 正在读取行
+### 读取文件的每一行
 
 ```bash
 cat file.txt | while read line; do
@@ -613,7 +613,7 @@ myfunc() {
 result="$(myfunc)"
 ```
 
-### 正在引发错误
+### 抛出错误
 
 ```bash
 myfunc() {
@@ -719,7 +719,7 @@ Bash 历史
 
 `!!` 可以替换为任何有效的扩展，即 `!cat`、`!-2`、`!42` 等。
 
-各种各样的
+杂项
 -------------
 
 ### 数值计算

docs/c.md

@@ -44,7 +44,7 @@ int myNum3 = 15;  // myNum3 值为 15
 myNum3 = 10;      // 现在 myNum3 值为 10
 
 float myFloatNum = 5.99; // 浮点数
-char myLetter = 'D';     // 字符串
+char myLetter = 'D';     // 字符
 
 int x = 5;
 int y = 6;

docs/cmake.md

@@ -11,8 +11,13 @@ CMake 备忘清单
 CMake 是一个用于配置跨平台源代码项目应该如何配置的工具建立在给定的平台上。
 
 ```bash
-├┈ CMakeLists.txt # 希望运行的 CMake 命令
-╰┈ main.cpp # 带有 main 的源文件
+├── CMakeLists.txt  # 希望运行的 CMake命令
+├── main.cpp        # 带有main 的源文件
+├── include         # 头文件目录
+│   └── header.h
+└── src             # 源代码目录
+    ├── a.c
+    └── b.c
 ```
 
 在此项目上运行 `CMake` 时，系统会要求您提供二进制目录，运行 `CMake` 不会创建最终的可执行文件，而是会为 `Visual Studio`、`XCode` 或 `makefile` 生成项目文件。 使用这些工具构建该项目
@@ -26,6 +31,18 @@ cmake_minimum_required(VERSION 3.5)
 project (hello_cmake)
 # 添加可执行文件
 add_executable(hello_cmake main.cpp)
+# 添加头文件目录
+target_include_directories(hello_cmake PRIVATE ./include)
+# 批量添加源文件
+file(GLOB SRCS CONFIGURE_DEPENDS ./src/*.cpp)
+target_sources(hello_cmake PUBLIC ${SRCS})
+# 添加第三方库
+find_package(OpenGL CONFIG REQUIRED)
+# 链接第三方库
+target_link_libraries(hello_cmake PRIVATE OpenGL)
+# 指定输出路径
+set_property(TARGET hello_cmake ${CMAKE_SOURCE_DIR}/bin)
+
 ```
 
 #### main.cpp
@@ -46,6 +63,7 @@ int main(int argc, char *argv[])
 $ mkdir build   # 创建 build 目录
 $ cd build      # 进入目录
 $ cmake ..      # 目录的上一级目录运行命令
+$ make          # 使用对应的编译工具
 $ ./hello_cmake # 运行生成的 hello_cmake
 Hello CMake!
 ```
@@ -72,6 +90,12 @@ $ cmake --build <dir> [<options>] [-- <build-tool-options>]
 $ cmake --install <dir> [<options>]
 ```
 
+运行指定项目
+
+```bash
+cmake --build <dir> --target <project>
+```
+
 打开一个项目
 
 ```bash
@@ -108,6 +132,30 @@ $ cmake --workflow [<options>]
 $ cmake --help[-<topic>]
 ```
 
+#### 常用参数
+
+- 方式一: 在`CMakeLists.txt`中使用`set(KEY VAL)`函数
+- 方式二: 在执行`cmake ...` -D<arg> 指定(只需一次,推荐)
+
+```cmake
+# 指定编译参数(Debug/Release/MinSizeRel/RelWithDebInfo)
+$ cmake ... -D CMAKE_BUILD_TYPE=DEBUG
+# 指定编译链工具(windows下vcpkg需要)
+$ cmake ... -D CMAKE_TOOLCHAIN_FILE=<vcpkg_path>/scripts/buildsystems/vcpkg.cmake
+# 指定编译器
+$ cmake ... -D CAMKE_C_COMPILER=...
+$ cmake ... -D CAMKE_CXX_COMPILER=...
+# 指定生成器
+$ cmake .. -G "Unix Makefile"
+$ cmake .. -G "Ninja"
+$ cmake .. -G "Visual Studio 17 2022"
+
+# 设置Cpp标准
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON) # 在检测到不支持时出错
+set(CMAKE_CXX_EXTENSIONS ON) #一般设为off，否则在msvc上没有特性会出错
+```
+
 另见
 ----
 

docs/cmd.md

@@ -0,0 +1,286 @@
+Cmd 备忘清单
+===
+
+cmd 快速参考备忘单含括了常用的 cmd 命令
+
+常用操作
+--------
+
+### 磁盘操作
+
+#### format 参数
+
+参数 | action
+:-- | :--
+`/q`        | 快速格式化
+`/u`        | 不可恢复
+`/autotest` | 不提示
+`/s`        | 创建 MS-DOS 引导盘
+
+#### format 示例
+
+```shell
+format c: /q /u /autotest
+```
+
+### 目录操作(一)
+
+#### dir 参数
+
+参数 | action
+:--- | :---
+`/s`   | 查找子目录
+`/w`   | 只显示文件名
+`/p`   | 分页
+`/a`   | 显示隐藏文件
+
+#### dir 示例
+
+```shell
+dir format.exe /s
+```
+<!--rehype:className=wrap-text -->
+
+查找该盘的 `format.exe` 文件并报告位置
+
+### 目录操作(二)
+
+#### cd 参数
+
+可以使用相对目录或绝对目录
+
+参数 | action
+:--- | :--
+`cd …`          | 进入上一个文件夹
+`cd \`          | 返回根目录
+`cd c:\windows` | 进入 `c:\windows` 文件夹
+
+#### md(MKDIR) 参数
+
+参数 | action
+:--- | :--
+`md HELLOWORLD` | 创建 `HELLOWORLD` 目录
+
+#### rd (RMDIR) 参数
+
+参数 | action
+:--- | :--
+`rd HELLOWORLD` | 删除 `HELLOWORLD` 目录
+
+### 文件操作
+
+#### rmdir 参数
+
+参数 | action
+:--- | :--
+`rmdir c:\qqdownload/s` | 删除 `C` 盘的 `qqdownload` 目录
+
+#### del 参数
+
+参数 | action
+:--- | :--
+`/f`   | 删除只读文件
+`/s`   | 删除该目录及其下的所有内容
+`/q`   | 删除前不确认
+
+#### del 示例
+
+参数 | action
+:--- | :--
+`del c:\del /s /q` | 自动删除 c 盘的 del 目录
+<!--rehype:className=style-list-->
+
+#### copy 参数
+
+参数 | action
+:--- | :--
+`copy d:\pwin98*.* c:\presetup` | 将d盘的pwin98的所有文件复制到 c 盘的 presetup 下
+<!--rehype:className=style-list-->
+
+#### attrib 参数
+
+attrib命令可以列出或修改磁盘上文件的属性，
+文件属性包括文档（A）、只读、隐藏(H)、系统(S)
+
+#### attrib 示例
+
+参数 | action
+:--- | :--
+`attrib -h -r -s io.sys`       | io.sys文件的只读、隐藏、系统属性去掉
+`attrib +h +r +s autoexec.bat` | 为自动批处理文件增加以上属性
+<!--rehype:className=style-list-->
+
+### net 命令(一)
+
+参数 | action
+:--- | :--
+`net use ipipc$ " " /user:" "`               |   建立IPC空链接
+`net use ipipc$ " " /user:" "`               |   建立IPC空链接
+`net use ipipc$ “密码” /user:"`             |    用户名" 建立IPC非空链接
+`net use h: ipc$ “密码” /user:“用户名”`       |   直接登陆后映射对方C：到本地为H:
+`net use h: ipc$`                            |   登陆后映射对方C：到本地为H:
+`net use ipipc$ /del`                        |   删除IPC链接
+`net use h: /del`                            |   删除映射对方到本地的为H:的映射
+`net user 用户名　密码　/add`                |   建立用户
+`net user guest /active:yes`                |   激活guest用户
+`net user`                                   |   查看有哪些用户
+`net user 帐户名`                            |   查看帐户的属性
+`net localgroup administrators 用户名 /add`  |    把“用户”添加到管理员中使其具有管理员权限
+<!--rehype:className=style-list-->
+
+### net 命令(二)
+
+参数 | action
+:--- | :--
+`net start`              | 查看开启了哪些服务
+`net start 服务名`       | 开启服务；(如:net start telnet， net start schedule)
+`net stop 服务名`        | 停止某服务
+`net time 目标ip`        | 查看对方时间
+`net view`               | 查看本地局域网内开启了哪些共享
+`net view ip`            | 查看对方局域网内开启了哪些共享
+`net config`             | 显示系统网络设置
+`net pause 服务名`       | 暂停某服务
+`net send ip “文本信息”` | 向对方发信息
+`net ver`                | 局域网内正在使用的网络连接类型和信息
+`net share`              | 查看本地开启的共享
+`net share ipc$ /del`    | 删除ipc$共享
+`net share c$ /del`      | 删除C：共享
+`net user guest 12345`   | 用guest用户登陆后用将密码改为12345
+`net password 密码`      | 更改系统登陆密码
+<!--rehype:className=style-list-->
+
+### ping 命令
+<!--rehype:wrap-class=row-span-2 col-span-2-->
+
+参数 | action
+:--- | :--
+`-d`             | 使用 Socket 的 SO_DEBUG 功能
+`-c<完成次数>`   | 设置完成要求回应的次数
+`-f`             | 极限检测
+`-i<间隔秒数>`   | 指定收发信息的间隔时间
+`-I<网络界面>`   | 使用指定的网络界面送出数据包
+`-l<前置载入>`   | 设置在送出要求信息之前，先行发出的数据包
+`-n`             | 只输出数值
+`-p<范本样式>`   | 设置填满数据包的范本样式
+`-q`             | 不显示指令执行过程，开头和结尾的相关信息除外
+`-r`             | 忽略普通的Routing Table，直接将数据包送到远端主机上
+`-R`             | 记录路由过程
+`-s<数据包大小>` | 设置数据包的大小
+`-t<存活数值>`   | 设置存活数值TTL的大小
+`-v`             | 详细显示指令的执行过程
+
+### tracert 命令
+
+参数 | action
+:--- | :--
+`-d`              | 不将地址解析成主机名
+`-h maximum_hops` | 搜索目标的最大跃点数，默认30
+`-w timeout`      | 等待每个回复的超时时间(以毫秒为单位)
+`-R`              | 跟踪往返行程路径(仅适用于 IPv6)
+`-S srcaddr`      | 要使用的源地址(仅适用于 IPv6)
+`-4`              | 强制使用 IPv4
+`-6`              | 强制使用 IPv6
+
+### netstat 命令
+
+参数 | action
+:--- | :--
+`netstat -a`        | 查看开启了哪些端口,常用netstat -an
+`netstat -n`        | 查看端口的网络连接情况，常用netstat -an
+`netstat -v`        | 查看正在进行的工作
+`netstat -p 协议名`  | 例：netstat -p tcq/ip 查看某协议使用情况
+`netstat -s`        | 查看正在使用的所有协议使用情况
+`nbtstat -A ip`     | 对方136到139其中一个端口开了的话，就可查看对方最近登陆的用户名
+
+启动程序
+--------
+
+### 启动程序(一)
+<!--rehype:wrap-class=row-span-3-->
+
+参数 | action
+:--- | :--
+`appwiz.cpl`   | 程序和功能
+`calc`         | 启动计算器
+`certmgr.msc`  | 证书管理实用程序
+`charmap`      | 启动字符映射表
+`chkdsk.exe`   | Chkdsk磁盘检查（管理员身份运行命令提示符）
+`cleanmgr`     | 打开磁盘清理工具
+`cliconfg`     | SQL SERVER 客户端网络实用工具
+`cmstp`        | 连接管理器配置文件安装程序
+`compmgmt.msc` | 计算机管理
+`omexp.msc`    | 打开系统组件服务
+`control`      | 控制面版
+
+### 启动程序(二)
+<!--rehype:wrap-class=row-span-3-->
+
+参数 | action
+:--- | :--
+`dcomcnfg`     | 打开系统组件服务
+`devmgmt.msc`  | 设备管理器
+`diskmgmt.msc` | 磁盘管理
+`eventvwr`     | 事件查看器
+`explorer`     | 打开资源管理器
+`Firewall.cpl` | Windows防火墙
+`fsmgmt.msc`   | 共享文件夹管理器
+`hdwwiz.cpl`   | 设备管理器
+`lusrmgr.msc`  | 本地用户和组
+`Msra`         | 远程协助
+`mstsc`        | 远程桌面连接
+`notepad`      | 打开记事本
+`shrpubw`      | 创建共享文件夹
+
+### 自动关机
+
+参数 | action
+:--- | :--
+`shutdown -s -t 600`                   | 表示600秒后自动关机
+`shutdown -a`                          | 可取消定时关机
+`shutdown -r -t 600`                   | 表示600秒后自动重启
+`rundll32 user32.dll, LockWorkStation` | 表示锁定计算机
+<!--rehype:className=style-list-->
+
+其他
+--------
+
+### (一)
+
+参数 | action
+:--- | :--
+`ipconfig (winipcfg)`          | 查看本地ip，可加/all
+`kill -F 进程名`               | 加-F参数后强制结束某进程
+`del -F 文件名`                | 加-F参数可删除只读文件
+`move 源路径文件　目的路径`    | 移动文件，可修改文件名
+`fc one.txt two.txt > 3st.txt` | 对比文件并输出到3st.txt
+`finger username @host`        | 查看最近用户登陆
+`telnet`                       | 进入本机的telnet
+`telnet ip 端口`               | 远程登陆服务器,默认端口为23
+<!--rehype:className=style-list-->
+
+### （二）
+
+参数 | action
+:--- | :--
+`copy c:srv.exe ipadmin$`     | 复制本地c:srv.exe到对方的admin下
+`set`                         | 显示当前所有的环境变量
+`set 环境变量名称=变量的字符`     | 添加环境变量
+`set p(或其它字符)`             | 显示出当前以字符p(或其它字符)开头的所有环境变量
+`pause`                       | 暂停批处理程序，并显示出：请按任意键继续…
+`echo on/off`                 | 打开或关闭echo，仅用echo不加参数则显示当前echo设置
+`echo 信息`                   | 在屏幕上显示出信息
+<!--rehype:className=style-list-->
+
+### （三）
+
+参数 | action
+:--- | :--
+`echo 信息 >> pass.txt`  | 将"信息"保存到pass.txt文件中
+`findstr “Hello” aa.txt` | 在aa.txt文件中寻找字符串hello
+`find 文件名`            | 查找某文件
+`regedit /s`             | 注册表文件名 导入注册表；参数/S指安静模式导入，无任何提示
+`regedit /e`             | 注册表文件名 导出注册表
+`cacls 文件名`           | 查看文件的访问用户权限列表
+`REM 文本内容`           | 在批处理文件中添加注解
+`netsh`                  | 查看或更改本地网络配置情况
+<!--rehype:className=style-list-->

docs/cpp.md

@@ -0,0 +1,792 @@
+C++ 备忘清单
+===
+
+提供基本语法和方法的 [C++](https://zh.cppreference.com/) 快速参考备忘单
+
+入门
+--------
+
+### hello.cpp
+
+```cpp
+#include <iostream>
+int main() {
+    std::cout << "Hello Quick Reference\n";
+    return 0;
+}
+```
+
+编译运行
+
+```shell
+$ g++ hello.cpp -o hello
+$ ./hello
+Hello Quick Reference
+```
+
+### 变量
+
+```cpp
+int number = 5;       // 整数
+float f = 0.95;       // 浮点数
+double PI = 3.14159;  // 浮点数
+char yes = 'Y';       // 特点
+std::string s = "ME"; // 字符串（文本）
+bool isRight = true;  // 布尔值
+// 常量
+const float RATE = 0.8;
+```
+
+----
+
+```cpp
+int age {25};      // 自 C++11
+std::cout << age;  // 打印 25
+```
+
+### 原始数据类型
+
+数据类型 | 大小 | 范围
+:- | -- | --
+`int`     | 4 bytes        | -2<sup>31</sup> 到 2<sup>31</sup>-1
+`float`   | 4 bytes        | _N/A_
+`double`  | 8 bytes        | _N/A_
+`char`    | 1 byte         | -128 到 127
+`bool`    | 1 byte         | `true` / `false`
+`void`    | _N/A_          | _N/A_
+`wchar_t` | 2 到 4 bytes   | 1 个宽字符
+<!--rehype:className=show-header-->
+
+### 用户输入
+
+```cpp
+int num;
+std::cout << "Type a number: ";
+std::cin >> num;
+std::cout << "You entered " << num;
+```
+
+### 交换
+
+```cpp
+int a = 5, b = 10;
+std::swap(a, b);
+// 输出: a=10, b=5
+std::cout << "a=" << a << ", b=" << b;
+```
+
+### 注释
+
+```cpp
+// C++中的单行注释
+/* 这是一个多行注释
+    在 C++ 中 */
+```
+
+### If 语句
+
+```cpp
+if (a == 10) {
+    // do something
+}
+```
+
+查看: [条件](#c-条件)
+
+### 循环
+
+```cpp
+for (int i = 0; i < 10; i++) {
+    std::cout << i << "\n";
+}
+```
+
+查看: [循环 Loops](#c-循环)
+
+### 函数
+<!--rehype:wrap-class=row-span-2-->
+
+```cpp
+#include <iostream>
+ 
+void hello();   // 声明
+ 
+int main() {    // 主函数
+    hello();    // 执行函数
+}
+ 
+void hello() { // 定义
+  std::cout << "Hello Quick Reference!\n";
+}
+```
+
+查看: [函数 Functions](#c-函数)
+
+### 引用
+
+```cpp
+int i = 1;
+int& ri = i; // ri 是对 i 的引用
+ri = 2; // i 现在改为 2
+std::cout << "i=" << i;
+i = 3;   // i 现在改为 3
+std::cout << "ri=" << ri;
+```
+
+`ri` 和 `i` 指的是相同的内存位置
+
+### 命名空间
+
+```cpp
+#include <iostream>
+namespace ns1 {int val(){return 5;}}
+int main()
+{
+    std::cout << ns1::val();
+}
+```
+
+----
+
+```cpp
+#include <iostream>
+namespace ns1 {int val(){return 5;}}
+using namespace ns1;
+using namespace std;
+int main()
+{
+    cout << val(); 
+}
+```
+
+名称空间允许名称下的全局标识符
+
+C++ 数组
+------
+
+### 定义
+
+```cpp
+std::array<int, 3> marks; // 定义
+marks[0] = 92;
+marks[1] = 97;
+marks[2] = 98;
+// 定义和初始化
+std::array<int, 3> = {92, 97, 98};
+// 有空成员
+std::array<int, 3> marks = {92, 97};
+std::cout << marks[2]; // 输出: 0
+```
+
+### 操控
+
+```cpp
+┌─────┬─────┬─────┬─────┬─────┬─────┐
+| 92  | 97  | 98  | 99  | 98  | 94  |
+└─────┴─────┴─────┴─────┴─────┴─────┘
+   0     1     2     3     4     5
+```
+
+----
+
+```cpp
+std::array<int, 6> marks = {
+  92, 97, 98, 99, 98, 94
+};
+// 打印第一个元素
+std::cout << marks[0];
+// 将第 2 个元素更改为 99
+marks[1] = 99;
+// 从用户那里获取输入
+std::cin >> marks[2];
+```
+
+### 展示
+
+```cpp
+char ref[5] = {'R', 'e', 'f'};
+// 基于范围的for循环
+for (const int &n : ref) {
+    std::cout << std::string(1, n);
+}
+// 传统的for循环
+for (int i = 0; i < sizeof(ref); ++i) {
+    std::cout << ref[i];
+}
+```
+
+### 多维
+
+```cpp
+     j0   j1   j2   j3   j4   j5
+   ┌────┬────┬────┬────┬────┬────┐
+i0 | 1  | 2  | 3  | 4  | 5  | 6  |
+   ├────┼────┼────┼────┼────┼────┤
+i1 | 6  | 5  | 4  | 3  | 2  | 1  |
+   └────┴────┴────┴────┴────┴────┘
+```
+
+----
+
+```cpp
+int x[2][6] = {
+    {1,2,3,4,5,6}, {6,5,4,3,2,1}
+};
+for (int i = 0; i < 2; ++i) {
+    for (int j = 0; j < 6; ++j) {
+        std::cout << x[i][j] << " ";
+    }
+}
+// 输出: 1 2 3 4 5 6 6 5 4 3 2 1 
+```
+
+C++ 条件
+------------
+
+### If Clause
+
+```cpp
+if (a == 10) {
+    // do something
+}
+```
+
+----
+
+```cpp
+int number = 16;
+if (number % 2 == 0)
+{
+    std::cout << "even";
+}
+else
+{
+    std::cout << "odd";
+}
+// 输出: even
+```
+
+### Else if 语句
+
+```cpp
+int score = 99;
+if (score == 100) {
+    std::cout << "Superb";
+}
+else if (score >= 90) {
+    std::cout << "Excellent";
+}
+else if (score >= 80) {
+    std::cout << "Very Good";
+}
+else if (score >= 70) {
+    std::cout << "Good";
+}
+else if (score >= 60)
+    std::cout << "OK";
+else
+    std::cout << "What?";
+```
+
+### 运算符
+<!--rehype:wrap-class=row-span-2-->
+
+#### 关系运算符
+
+:--|--
+:--|--
+`a == b` | a 等于 b
+`a != b` | a 不等于 b
+`a < b`  | a 小于 b
+`a > b`  | a 大于 b
+`a <= b` | a 小于或等于 b
+`a >= b` | a 大于或等于 b
+
+#### 赋值运算符
+
+范例 | 相当于
+:--|--
+`a += b` | _Aka_ `a = a + b`
+`a -= b` | _Aka_ `a = a - b`
+`a *= b` | _Aka_ `a = a * b`
+`a /= b` | _Aka_ `a = a / b`
+`a %= b` | _Aka_ `a = a % b`
+
+#### 逻辑运算符
+
+| Example        | Meaning                |
+|----------------|------------------------|
+| `exp1 && exp2` | Both are true _(AND)_  |
+| `exp1 || exp2` | Either is true _(OR)_  |
+| `!exp`         | `exp` is false _(NOT)_ |
+
+#### 位运算符
+
+| Operator | Description             |
+|----------|-------------------------|
+| `a & b`  | Binary AND              |
+| `a | b`  | Binary OR               |
+| `a ^ b`  | Binary XOR              |
+| `a ~ b`  | Binary One's Complement |
+| `a << b` | Binary Shift Left       |
+| `a >> b` | Binary Shift Right      |
+
+### 三元运算符
+
+```
+           ┌── True ──┐
+Result = Condition ? Exp1 : Exp2;
+           └───── False ─────┘
+```
+
+----
+
+```cpp
+int x = 3, y = 5, max;
+max = (x > y) ? x : y;
+// 输出: 5
+std::cout << max << std::endl;
+```
+
+----
+
+```cpp
+int x = 3, y = 5, max;
+if (x > y) {
+    max = x;
+} else {
+    max = y;
+}
+// 输出: 5
+std::cout << max << std::endl;
+```
+
+### switch 语句
+
+```cpp
+int num = 2;
+switch (num) {
+    case 0:
+        std::cout << "Zero";
+        break;
+    case 1:
+        std::cout << "One";
+        break;
+    case 2:
+        std::cout << "Two";
+        break;
+    case 3:
+        std::cout << "Three";
+        break;
+    default:
+        std::cout << "What?";
+        break;
+}
+```
+
+C++ 循环
+------------
+
+### While
+
+```cpp
+int i = 0;
+while (i < 6) {
+    std::cout << i++;
+}
+// 输出: 012345
+```
+
+### Do-while
+
+```cpp
+int i = 1;
+do {
+    std::cout << i++;
+} while (i <= 5);
+// 输出: 12345
+```
+
+### Continue 语句
+
+```cpp
+for (int i = 0; i < 10; i++) {
+    if (i % 2 == 0) {
+        continue;
+    }
+    std::cout << i;
+} // 输出: 13579
+```
+
+### 无限循环
+
+```cpp
+while (true) { // true or 1
+    std::cout << "无限循环";
+}
+```
+
+----
+
+```cpp
+for (;;) {
+    std::cout << "无限循环";
+}
+```
+
+----
+
+```cpp
+for(int i = 1; i > 0; i++) {
+    std::cout << "infinite loop";
+}
+```
+
+### for_each (C++11 起)
+
+```cpp
+#include <iostream>
+int main()
+{
+    auto print = [](int num) {
+      std::cout << num << std::endl;
+    };
+    std::array<int, 4> arr = {1, 2, 3, 4};
+    std::for_each(arr.begin(), arr.end(), print);
+    return 0;
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 基于范围 (C++11 起)
+
+```cpp
+for (int n : {1, 2, 3, 4, 5}) {
+    std::cout << n << " ";
+}
+// 输出: 1 2 3 4 5
+```
+
+----
+
+```cpp
+std::string hello = "Quick Reference.ME";
+for (char c: hello)
+{
+    std::cout << c << " ";
+}
+// 输出: Q u i c k R e f . M E 
+```
+
+### 中断语句
+
+```cpp
+int password, times = 0;
+while (password != 1234) {
+    if (times++ >= 3) {
+        std::cout << "Locked!\n";
+        break;
+    }
+    std::cout << "Password: ";
+    std::cin >> password; // input
+}
+```
+
+### Several variations
+
+```cpp
+for (int i = 0, j = 2; i < 3; i++, j--){
+    std::cout << "i=" << i << ",";
+    std::cout << "j=" << j << ";";
+}
+// 输出: i=0,j=2;i=1,j=1;i=2,j=0;
+```
+
+C++ 函数
+------------
+
+### 参数和返回
+
+```cpp
+#include <iostream>
+int add(int a, int b) {
+    return a + b;  
+}
+int main() {
+    std::cout << add(10, 20); 
+}
+```
+
+`add` 是一个接受 2 个整数并返回整数的函数
+
+### 重载
+
+```cpp
+void fun(string a, string b) {
+    std::cout << a + " " + b;
+}
+void fun(string a) {
+    std::cout << a;
+}
+void fun(int a) {
+    std::cout << a;
+}
+```
+
+### 内置函数
+
+```cpp
+#include <iostream>
+#include <cmath> // 导入库
+ 
+int main() {
+    // sqrt() 来自 cmath
+    std::cout << sqrt(9);
+}
+```
+
+C++ 预处理器
+------------
+
+### 预处理器
+<!--rehype:wrap-class=row-span-3-->
+
+- [if](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [elif](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [else](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [endif](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [ifdef](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [ifndef](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [define](https://zh.cppreference.com/w/cpp/preprocessor/replace)
+- [undef](https://zh.cppreference.com/w/cpp/preprocessor/replace)
+- [include](https://zh.cppreference.com/w/cpp/preprocessor/include)
+- [line](https://zh.cppreference.com/w/cpp/preprocessor/line)
+- [error](https://zh.cppreference.com/w/cpp/preprocessor/error)
+- [pragma](https://zh.cppreference.com/w/cpp/preprocessor/impl)
+- [defined](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [__has_include](https://zh.cppreference.com/w/cpp/feature_test)
+- [__has_cpp_attribute](https://zh.cppreference.com/w/cpp/feature_test)
+- [export](https://zh.cppreference.com/w/cpp/keyword/export)
+- [import](https://zh.cppreference.com/mwiki/index.php?title=cpp/keyword/import&amp;action=edit&amp;redlink=1)
+- [module](https://zh.cppreference.com/mwiki/index.php?title=cpp/keyword/module&amp;action=edit&amp;redlink=1)
+<!--rehype:className=style-none cols-2-->
+
+### Includes
+
+```cpp
+#include "iostream"
+#include <iostream>
+```
+
+### Defines
+
+```cpp
+#define FOO
+#define FOO "hello"
+#undef FOO
+```
+
+### If
+<!--rehype:wrap-class=row-span-2-->
+
+```cpp
+#ifdef DEBUG
+  console.log('hi');
+#elif defined VERBOSE
+  ...
+#else
+  ...
+#endif
+```
+
+### Error
+
+```cpp
+#if VERSION == 2.0
+  #error Unsupported
+  #warning Not really supported
+#endif
+```
+
+### 宏
+
+```cpp
+#define DEG(x) ((x) * 57.29)
+```
+
+### 令牌连接
+
+```cpp
+#define DST(name) name##_s name##_t
+DST(object);   #=> object_s object_t;
+```
+
+### 字符串化
+
+```cpp
+#define STR(name) #name
+char * a = STR(object);   #=> char * a = "object";
+```
+<!--rehype:className=wrap-text-->
+
+### 文件和行
+
+```cpp
+#define LOG(msg) console.log(__FILE__, __LINE__, msg)
+#=> console.log("file.txt", 3, "hey")
+```
+<!--rehype:className=wrap-text-->
+
+各种各样的
+-------------
+
+### 转义序列
+
+转义序列 | 说明
+:--|--
+`\b`             | 退格键
+`\f`             | 换页
+`\n`             | 换行
+`\r`             | 返回
+`\t`             | 水平制表符
+`\v`             | 垂直制表符
+`\\`             | 反斜杠
+`\'`             | 单引号
+`\"`             | 双引号
+`\?`             | 问号
+`\0`             | 空字符
+
+### 关键字
+<!--rehype:wrap-class=row-span-2 col-span-2-->
+
+- [alignas](https://zh.cppreference.com/w/cpp/keyword/alignas)
+- [alignof](https://zh.cppreference.com/w/cpp/keyword/alignof)
+- [and](https://zh.cppreference.com/w/cpp/keyword/and)
+- [and_eq](https://zh.cppreference.com/w/cpp/keyword/and_eq)
+- [asm](https://zh.cppreference.com/w/cpp/keyword/asm)
+- [atomic_cancel](https://zh.cppreference.com/w/cpp/keyword/atomic_cancel)
+- [atomic_commit](https://zh.cppreference.com/w/cpp/keyword/atomic_commit)
+- [atomic_noexcept](https://zh.cppreference.com/w/cpp/keyword/atomic_noexcept)
+- [auto](https://zh.cppreference.com/w/cpp/keyword/auto)
+- [bitand](https://zh.cppreference.com/w/cpp/keyword/bitand)
+- [bitor](https://zh.cppreference.com/w/cpp/keyword/bitor)
+- [bool](https://zh.cppreference.com/w/cpp/keyword/bool)
+- [break](https://zh.cppreference.com/w/cpp/keyword/break)
+- [case](https://zh.cppreference.com/w/cpp/keyword/case)
+- [catch](https://zh.cppreference.com/w/cpp/keyword/catch)
+- [char](https://zh.cppreference.com/w/cpp/keyword/char)
+- [char8_t](https://zh.cppreference.com/w/cpp/keyword/char8_t)
+- [char16_t](https://zh.cppreference.com/w/cpp/keyword/char16_t)
+- [char32_t](https://zh.cppreference.com/w/cpp/keyword/char32_t)
+- [class](https://zh.cppreference.com/w/cpp/keyword/class)
+- [compl](https://zh.cppreference.com/w/cpp/keyword/compl)
+- [concept](https://zh.cppreference.com/w/cpp/keyword/concept)
+- [const](https://zh.cppreference.com/w/cpp/keyword/const)
+- [consteval](https://zh.cppreference.com/w/cpp/keyword/consteval)
+- [constexpr](https://zh.cppreference.com/w/cpp/keyword/constexpr)
+- [constinit](https://zh.cppreference.com/w/cpp/keyword/constinit)
+- [const_cast](https://zh.cppreference.com/w/cpp/keyword/const_cast)
+- [continue](https://zh.cppreference.com/w/cpp/keyword/continue)
+- [co_await](https://zh.cppreference.com/w/cpp/keyword/co_await)
+- [co_return](https://zh.cppreference.com/w/cpp/keyword/co_return)
+- [co_yield](https://zh.cppreference.com/w/cpp/keyword/co_yield)
+- [decltype](https://zh.cppreference.com/w/cpp/keyword/decltype)
+- [default](https://zh.cppreference.com/w/cpp/keyword/default)
+- [delete](https://zh.cppreference.com/w/cpp/keyword/delete)
+- [do](https://zh.cppreference.com/w/cpp/keyword/do)
+- [double](https://zh.cppreference.com/w/cpp/keyword/double)
+- [dynamic_cast](https://zh.cppreference.com/w/cpp/keyword/dynamic_cast)
+- [else](https://zh.cppreference.com/w/cpp/keyword/else)
+- [enum](https://zh.cppreference.com/w/cpp/keyword/enum)
+- [explicit](https://zh.cppreference.com/w/cpp/keyword/explicit)
+- [export](https://zh.cppreference.com/w/cpp/keyword/export)
+- [extern](https://zh.cppreference.com/w/cpp/keyword/extern)
+- [false](https://zh.cppreference.com/w/cpp/keyword/false)
+- [float](https://zh.cppreference.com/w/cpp/keyword/float)
+- [for](https://zh.cppreference.com/w/cpp/keyword/for)
+- [friend](https://zh.cppreference.com/w/cpp/keyword/friend)
+- [goto](https://zh.cppreference.com/w/cpp/keyword/goto)
+- [if](https://zh.cppreference.com/w/cpp/keyword/if)
+- [inline](https://zh.cppreference.com/w/cpp/keyword/inline)
+- [int](https://zh.cppreference.com/w/cpp/keyword/int)
+- [long](https://zh.cppreference.com/w/cpp/keyword/long)
+- [mutable](https://zh.cppreference.com/w/cpp/keyword/mutable)
+- [namespace](https://zh.cppreference.com/w/cpp/keyword/namespace)
+- [new](https://zh.cppreference.com/w/cpp/keyword/new)
+- [noexcept](https://zh.cppreference.com/w/cpp/keyword/noexcept)
+- [not](https://zh.cppreference.com/w/cpp/keyword/not)
+- [not_eq](https://zh.cppreference.com/w/cpp/keyword/not_eq)
+- [nullptr](https://zh.cppreference.com/w/cpp/keyword/nullptr)
+- [operator](https://zh.cppreference.com/w/cpp/keyword/operator)
+- [or](https://zh.cppreference.com/w/cpp/keyword/or)
+- [or_eq](https://zh.cppreference.com/w/cpp/keyword/or_eq)
+- [private](https://zh.cppreference.com/w/cpp/keyword/private)
+- [protected](https://zh.cppreference.com/w/cpp/keyword/protected)
+- [public](https://zh.cppreference.com/w/cpp/keyword/public)
+- [reflexpr](https://zh.cppreference.com/w/cpp/keyword/reflexpr)
+- [register](https://zh.cppreference.com/w/cpp/keyword/register)
+- [reinterpret_cast](https://zh.cppreference.com/w/cpp/keyword/reinterpret_cast)
+- [requires](https://zh.cppreference.com/w/cpp/keyword/requires)
+- [return](https://zh.cppreference.com/w/cpp/language/return)
+- [short](https://zh.cppreference.com/w/cpp/keyword/short)
+- [signed](https://zh.cppreference.com/w/cpp/keyword/signed)
+- [sizeof](https://zh.cppreference.com/w/cpp/keyword/sizeof)
+- [static](https://zh.cppreference.com/w/cpp/keyword/static)
+- [static_assert](https://zh.cppreference.com/w/cpp/keyword/static_assert)
+- [static_cast](https://zh.cppreference.com/w/cpp/keyword/static_cast)
+- [struct](https://zh.cppreference.com/w/cpp/keyword/struct)
+- [switch](https://zh.cppreference.com/w/cpp/keyword/switch)
+- [synchronized](https://zh.cppreference.com/w/cpp/keyword/synchronized)
+- [template](https://zh.cppreference.com/w/cpp/keyword/template)
+- [this](https://zh.cppreference.com/w/cpp/keyword/this)
+- [thread_local](https://zh.cppreference.com/w/cpp/keyword/thread_local)
+- [throw](https://zh.cppreference.com/w/cpp/keyword/throw)
+- [true](https://zh.cppreference.com/w/cpp/keyword/true)
+- [try](https://zh.cppreference.com/w/cpp/keyword/try)
+- [typedef](https://zh.cppreference.com/w/cpp/keyword/typedef)
+- [typeid](https://zh.cppreference.com/w/cpp/keyword/typeid)
+- [typename](https://zh.cppreference.com/w/cpp/keyword/typename)
+- [union](https://zh.cppreference.com/w/cpp/keyword/union)
+- [unsigned](https://zh.cppreference.com/w/cpp/keyword/unsigned)
+- [using](https://zh.cppreference.com/w/cpp/keyword/using)
+- [virtual](https://zh.cppreference.com/w/cpp/keyword/virtual)
+- [void](https://zh.cppreference.com/w/cpp/keyword/void)
+- [volatile](https://zh.cppreference.com/w/cpp/keyword/volatile)
+- [wchar_t](https://zh.cppreference.com/w/cpp/keyword/wchar_t)
+- [while](https://zh.cppreference.com/w/cpp/keyword/while)
+- [xor](https://zh.cppreference.com/w/cpp/keyword/xor)
+- [xor_eq](https://zh.cppreference.com/w/cpp/keyword/xor_eq)
+- [final](https://zh.cppreference.com/w/cpp/language/final)
+- [override](https://zh.cppreference.com/w/cpp/language/override)
+- [transaction_safe](https://zh.cppreference.com/w/cpp/language/transactional_memory)
+- [transaction_safe_dynamic](https://zh.cppreference.com/w/cpp/language/transactional_memory)
+<!--rehype:className=style-none cols-5-->
+
+### 预处理器
+
+- [if](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [elif](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [else](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [endif](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [ifdef](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [ifndef](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [define](https://zh.cppreference.com/w/cpp/preprocessor/replace)
+- [undef](https://zh.cppreference.com/w/cpp/preprocessor/replace)
+- [include](https://zh.cppreference.com/w/cpp/preprocessor/include)
+- [line](https://zh.cppreference.com/w/cpp/preprocessor/line)
+- [error](https://zh.cppreference.com/w/cpp/preprocessor/error)
+- [pragma](https://zh.cppreference.com/w/cpp/preprocessor/impl)
+- [defined](https://zh.cppreference.com/w/cpp/preprocessor/conditional)
+- [__has_include](https://zh.cppreference.com/w/cpp/feature_test)
+- [__has_cpp_attribute](https://zh.cppreference.com/w/cpp/feature_test)
+- [export](https://zh.cppreference.com/w/cpp/keyword/export)
+- [import](https://zh.cppreference.com/mwiki/index.php?title=cpp/keyword/import&amp;action=edit&amp;redlink=1)
+- [module](https://zh.cppreference.com/mwiki/index.php?title=cpp/keyword/module&amp;action=edit&amp;redlink=1)
+<!--rehype:className=style-none cols-2-->
+
+另见
+----
+
+- [C++ Infographics & Cheat Sheets](https://hackingcpp.com/cpp/cheat_sheets.html) _(hackingcpp.com)_
+- [C++ reference](https://zh.cppreference.com/w/) _(cppreference.com)_
+- [C++ Language Tutorials](http://www.cplusplus.com/doc/tutorial/) _(cplusplus.com)_

docs/cs.md

@@ -36,7 +36,7 @@ double doubleNum = 99.999;
 decimal decimalNum = 99.9999M;
 char letter = 'D';
 bool @bool = true;
-string site = "quickref.me";
+string site = "jaywcjlove.github.io";
 var num = 999;
 var str = "999";
 var bo = false;
@@ -68,7 +68,7 @@ var bo = false;
     用于文档 **/
 ```
 
-### Strings
+### 字符串
 
 ```cs
 string first = "John";
@@ -78,11 +78,11 @@ string name = first + " " + last;
 Console.WriteLine(name); // => John Doe
 ```
 
-查看: [Strings](#c-字符串)
+查看: [C#字符串](#c-字符串)
 
-### User Input
+### 用户输入
 
-```cs
+```cs showLineNumbers
 Console.WriteLine("Enter number:");
 if(int.TryParse(Console.ReadLine(),out int input))
 {
@@ -90,9 +90,8 @@ if(int.TryParse(Console.ReadLine(),out int input))
   Console.WriteLine($"You entered {input}");
 }
 ```
-<!--rehype:className=wrap-text-->
 
-### 条件句
+### 条件判断
 
 ```cs
 int j = 10;
@@ -170,7 +169,7 @@ Console.WriteLine(name); // => John Doe
 
 ### 逐字字符串
 
-```cs
+```cs showLineNumbers
 string longString = @"I can type any characters in here !#@$%^&*()__+ '' \n \t except double quotes and I will be taken literally. I even work with multiple lines.";
 ```
 <!--rehype:className=wrap-text-->
@@ -185,16 +184,45 @@ lengthOfString.Length           // => 9
 lengthOfString.Contains("How"); // => true
 ```
 
+### 频繁字符串拼接
+
+```cs
+var sb = new StringBuilder();
+for (int i = 0; i < 100; i++)
+{
+    sb.Append(i.ToString());
+}
+Console.WriteLine(sb.ToString());
+// => 123456789....
+```
+
+对于频繁拼接字符串的场景（如：成百上千次循环），使用 `System.Text.StringBuilder` 提升性能
+
+### 原始字符串文本
+<!--rehype:wrap-class=col-span-2-->
+
+```cs
+// C#11 语法, 至少3个双引号(""")开头和结尾，内容可以输入任何原始字符
+// 单行: 左引号，右引号，内容 三者同行
+string singleLine = """Content begin "Hello World!" end.""";
+
+// 多行：左引号，右引号各一行，内容需与右引号缩进对齐
+string multiLine = """
+    Content begin "Hello World!" /\n<>"" end.
+    """;
+Console.WriteLine(multiLine); // => Content begin "Hello World!" /\n<>"" end.
+```
+
 杂项
 -----------
 
-### 一般 .NET 条款
-<!--rehype:wrap-class=col-span-2-->
+### 常用 .NET 概念
+<!--rehype:wrap-class=col-span-3-->
 
-条款 | 定义
-:- | -
-Runtime | 执行给定的已编译代码单元所需的服务集合
-Common Language Runtime (CLR) | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
-Managed code | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
-Unmanaged code | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
-<!--rehype:className=show-header-->
+概念 | 中文名 | 定义
+:- | -|--
+Runtime | 运行时 | 执行给定的已编译代码单元所需的服务集合
+Common Language Runtime (CLR) | 通用语言运行库 | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
+Managed code | 托管代码 | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
+Unmanaged code | 非托管代码 | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
+<!--rehype:className=show-header-->

docs/css.md

@@ -11,7 +11,9 @@ CSS 备忘清单
 
 CSS 功能丰富，不仅仅是布局页面
 
-#### 外部样式表
+#### 外部样式表 `<link>`
+
+`
 
 ```html
 <link
@@ -22,7 +24,7 @@ CSS 功能丰富，不仅仅是布局页面
 ```
 <!--rehype:className=wrap-text -->
 
-#### 内部样式表
+#### 内部样式表 `<style>`
 
 ```html
 <style>
@@ -32,7 +34,7 @@ CSS 功能丰富，不仅仅是布局页面
 </style>
 ```
 
-#### 内联样式
+#### 内联样式 `style`
 
 ```html
 <h2 style="text-align: center;">
@@ -1258,9 +1260,206 @@ li::before {
 }
 ```
 
-Css 3 技巧
+CSS 函数
+-----------
+
+### calc()
+
+```css
+width: calc(100% - 80px);
+```
+
+声明 CSS 属性值时执行一些计算
+
+### clamp()
+
+```css
+font-size: clamp(1rem, 10vw, 2rem);
+```
+
+设置随窗口大小改变的字体大小
+
+### attr()
+
+```css
+p:before {
+  content: attr(data-foo) " ";
+}
+```
+
+获取选择到的元素的某一 HTML 属性值
+
+### counter()
+<!--rehype:wrap-class=row-span-2-->
+
+返回一个代表计数器的当前值的字符串
+
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
+
+```css
+ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+    counter(listCounter, upper-roman) "]";
+}
+```
+
+显示
+
+```
+1. [1]==[I]
+2. [2]==[II]
+3. [3]==[III]
+```
+
+### counters()
+
+```css
+ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+```
+
+嵌套计数器，返回表示指定计数器当前值的连接字符串
+
+### env()
+
+```html
+<meta name="viewport" content="... viewport-fit=cover">
+```
+<!--rehype:className=wrap-text-->
+
+---
+
+```css
+body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+```
+
+用户代理定义的环境变量值插入你的 CSS 中
+
+### fit-content()
+
+```css
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+```
+
+将给定大小夹紧为可用大小
+
+### max()
+
+从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
+
+```css
+width: max(10vw, 4em, 80px);
+```
+
+例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽
+
+### min()
+
+```css
+width: min(1vw, 4em, 80px);
+```
+
+从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
+
+### minmax()
+
+```css
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+```
+
+### repeat() 轨道列表的重复片段
+
+```css
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+```
+
+定义了一个长宽范围的闭区间
+
+### url()
+
+```css
+background: url("topbanner.png") #00D no-repeat fixed;
+list-style: square url(http://www.example.com/redball.png)
+```
+<!--rehype:className=wrap-text-->
+
+### var()
+
+```css
+:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+```
+<!--rehype:className=wrap-text-->
+
+代替元素中任何属性中的值的任何部分
+
+CSS 技巧
 ------------
 
+### 强制不换行
+
+```css
+p {
+  white-space:nowrap;
+}
+```
+
+### 强制换行
+
+```css
+p {
+  word-break:break-all; /* 英文 */
+  white-space:pre-wrap; /* 中文 */
+}
+```
+
 ### 滚动条平滑
 
 ```css
@@ -1423,6 +1622,16 @@ div {
 
 通过样式来控制一个元素 `div` 是否可以编辑
 
+### 定义容器的长宽比
+
+```
+div {
+  aspect-ratio: 1/1 
+}
+```
+
+属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比
+
 另见
 ---------
 

docs/dart.md

@@ -464,6 +464,161 @@ class SmartPhone extends Phone {
 }
 ```
 
+枚举
+-----
+
+### 定义枚举
+
+```dart
+enum Color { red, green, blue }
+```
+
+使用枚举，像访问任何其他静态变量一样访问枚举值：
+
+```dart
+final favoriteColor = Color.blue;
+if (favoriteColor == Color.blue) {
+  print('Your favorite color is blue!');
+}
+```
+
+枚举中的每个值都有一个索引获取器，它返回枚举声明中值从零开始的位置。 例如，第一个值的索引为 0，第二个值的索引为 1
+
+```dart
+assert(Color.red.index == 0);
+assert(Color.green.index == 1);
+assert(Color.blue.index == 2);
+```
+
+要获取所有枚举值的列表，请使用枚举的值常量
+
+```dart
+List<Color> colors = Color.values;
+assert(colors[2] == Color.blue);
+```
+
+您可以在 switch 语句中使用枚举，如果您没有处理枚举的所有值，您将收到警告：
+
+```dart
+var aColor = Color.blue;
+
+switch (aColor) {
+  case Color.red:
+    print('Red as roses!');
+    break;
+  case Color.green:
+    print('Green as grass!');
+    break;
+  default: // 没有这个，你会看到一个警告
+    print(aColor); // 'Color.blue'
+}
+```
+
+如果您需要访问枚举值的名称，例如 `Color.blue` 中的“blue”，请使用 `.name` 属性：
+
+```dart
+print(Color.blue.name); // 'blue'
+```
+
+### 枚举示例
+<!--rehype:wrap-class=col-span-2-->
+
+声明了一个具有多个实例、实例变量、一个 `getter` 和一个已实现接口的增强型枚举
+
+```dart
+// 简单定义一个枚举类型
+enum PlanetType { terrestrial, gas, ice }
+
+// 定义一个行星复杂的枚举类型
+enum Planet {
+  mercury(planetType: PlanetType.terrestrial, moons: 0, hasRings: false),
+  venus(planetType: PlanetType.terrestrial, moons: 0, hasRings: false),
+  
+  uranus(planetType: PlanetType.ice, moons: 27, hasRings: true),
+  neptune(planetType: PlanetType.ice, moons: 14, hasRings: true);
+
+  // 定义一个构造函数
+  const Planet({required this.planetType, required this.moons, required this.hasRings});
+
+  // 声明枚举类型中的变量
+  final PlanetType planetType;
+  final int moons;
+  final bool hasRings;
+
+  // 实现枚举类型中的get 方法
+  bool get isGiant =>
+    planetType == PlanetType.gas || planetType == PlanetType.ice;
+}
+
+// 使用枚举类型
+void main()
+{
+  final yourPlanet = Planet.mercury;
+
+  if (!yourPlanet.isGiant) {
+    print('Your planet is not a "giant planet".');
+  }
+}
+```
+
+Mixin
+-----
+
+### 定义Mixin
+<!--rehype:wrap-class=col-span-2-->
+`Dart`中类只能单继承，使用`Mixin`可以实现多个继承，复用多个类中代码的方法。
+
+```dart
+// 定义Mixin
+mixin Piloted {
+  int astronauts = 1;
+
+  void describeCrew() {
+    print('Number of astronauts: $astronauts');
+  }
+}
+```
+
+使用`with`关键字并在其后跟上`Mixin类`的名字来使用
+
+```dart
+// 使用with将Piloted混入
+class PilotedCraft extends Spacecraft with Piloted {
+  // ···
+}
+```
+
+支持混入多个Mixin，如果出现相同的方法后混入的Mixin会覆盖前面的
+
+```dart
+class Musician extends Performer with Musical {
+  // ···
+}
+
+// 混入多个Mixin
+class Maestro extends Person with Musical, Aggressive, Demented {
+  Maestro(String maestroName) {
+    name = maestroName;
+    canConduct = true;
+  }
+}
+```
+
+使用关键字`on`来指定哪些类可以使用该Mixin，比如有Mixin类`MusicalPerformer`，但是`MusicalPerformer`只能被`Musician`类使用，则可以这样定义`MusicalPerformer`：
+
+```dart
+class Musician {
+  // ...
+}
+// 现在MusicalPerformer 只能在 Musican及其子类中使用
+mixin MusicalPerformer on Musician {
+  // ...
+}
+class SingerDancer extends Musician with MusicalPerformer {
+  // ...
+}
+```
+
 异常
 -----
 

docs/dockerfile.md

@@ -207,8 +207,11 @@ temp?
 `EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
 <!--rehype:class=auto-wrap-->
 
+Dockerfile 示例
+----
+<!--rehype:body-class=cols-2-->
+
 ### 服务静态网站的最小 Docker 镜像
-<!--rehype:wrap-class=col-span-2-->
 
 ```dockerfile
 FROM lipanski/docker-static-website:latest
@@ -223,11 +226,31 @@ COPY ./ .
 FROM lipanski/docker-static-website:latest
 COPY . .
 
-CMD ["/busybox", "httpd", "-f", "-v", "-p", "3000", "-c", "httpd.conf"]
+CMD ["/busybox","httpd","-f","-v","-p","3000","-c","httpd.conf"]
 ```
 
 缩小镜像过程[查看原文](https://lipanski.com/posts/smallest-docker-image-static-website)，镜像 [Dockerfile 源码](https://github.com/lipanski/docker-static-website)。
 
+### Docker 镜像多阶段构建
+
+```dockerfile
+FROM golang:alpine as builder
+RUN apk --no-cache add git
+WORKDIR /go/src/github.com/go/helloworld/
+RUN go get -d -v github.com/go-sql-driver/mysql
+COPY app.go .
+RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o app .
+
+FROM alpine:latest as prod
+RUN apk --no-cache add ca-certificates
+WORKDIR /root/
+COPY --from=builder /go/src/github.com/go/helloworld/app .
+CMD ["./app"]
+```
+<!--rehype:className=wrap-text -->
+
+使用多阶段构建能将构建依赖留在 builder 镜像中，只将编译完成后的二进制文件拷贝到运行环境中，大大减少镜像体积。
+
 ## 也可以看看
 
 - [Dockerfile reference](https://docs.docker.com/engine/reference/builder/) _(docker.com)_

docs/find.md

@@ -196,11 +196,11 @@ $ find /home -user tecmint -iname "*.txt"
 ### 多个文件名
 
 ```shell
-$ find . -type f \( -name "*.sh" -o -name "*.txt" \)
+$ find . -type f \( -name "*.sh" -or -name "*.txt" \)
 ```
 <!--rehype:className=wrap-text -->
 
-查找带有 `.sh` 和 `.txt` 扩展名的文件
+查找带有 `.sh` 或 `.txt` 扩展名的文件
 
 ### 多个目录
 
@@ -388,3 +388,11 @@ $ find / -type d -perm 777 -print -exec chmod 755 {} \;
 $ find . -type f -name "*.java" | xargs tar cvf myfile.tar
 $ find . -type f -name "*.java" | xargs tar rvf myfile.tar
 ```
+
+### 查找并排除目录
+
+查找当前目录及子目录中的所有`js`文件，但是排除掉`node_modules`目录中的
+
+```shell
+$ find . -type f -name "*.js" -not -path "./node_modules/*"
+```

docs/flutter.md

@@ -0,0 +1,421 @@
+Flutter 备忘清单
+===
+
+包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考
+
+入门
+---
+
+### macOS 操作系统上安装和配置
+
+```bash
+$ sudo softwareupdate --install-rosetta --agree-to-license
+```
+<!--rehype:className=wrap-text-->
+
+在 [Apple 芯片的 Mac 电脑](https://support.apple.com/zh-cn/HT211814) 上，还需要安装 [Rosetta 2](https://github.com/flutter/website/pull/7119#issuecomment-1124537969) 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装
+
+#### 获取 Flutter SDK
+
+- 安装包来获取最新的 stable Flutter SDK：
+  - Intel [`flutter_macos_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip)
+  - Apple 芯片 [`flutter_macos_arm64_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip)  
+
+    想要获取到其他版本的安装包，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将文件解压到目标路径, 比如:
+
+    ```bash
+    $ cd ~/development
+    $ unzip ~/Downloads/flutter_macos_3.3.8-stable.zip
+    ```
+    <!--rehype:className=wrap-text-->
+- 配置 `flutter` 的 PATH 环境变量：
+
+    ```bash
+    $ export PATH="$PATH:`pwd`/flutter/bin"
+    ```
+
+- 运行 `flutter doctor` 命令
+<!--rehype:className=style-timeline-->
+
+### Windows 操作系统上安装和配置
+
+- 点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
+  - [flutter_windows_3.3.8-stable.zip](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip)
+  - 要查看其他发行通道和以往的版本，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将压缩包解压，然后把其中的 `flutter` 目录整个放在你想放置 `Flutter SDK` 的路径中（例如 `C:\src\flutter`）
+- 更新 `path` 环境变量，在开始菜单的搜索功能键入`「env」`，然后选择 `编辑系统环境变量`。在 **`用户变量`** 一栏中，检查是否有 **`Path`** 这个条目：
+  - 如果存在这个条目，以 `;` 分隔已有的内容，加入 `flutter\bin` 目录的完整路径。
+  - 如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 `flutter\bin` 所在的完整路径作为新变量的值
+<!--rehype:className=style-timeline-->
+
+如果你不想安装指定版本的安装包。可以忽略步骤 `1` 和 `2`。从 `GitHub` 上的 `Flutter repo` 获取源代码，并根据需要，切换到指定的分支或标签
+
+```bash
+C:\src>git clone https://github.com/flutter/flutter.git -b stable
+```
+<!--rehype:className=wrap-text-->
+
+基础组件
+---
+
+### Text 样式文本
+
+```dart
+Text("Hello world",
+  textAlign: TextAlign.left,
+);
+
+Text("Hello world! I'm Jack. "*4,
+  maxLines: 1,
+  overflow: TextOverflow.ellipsis,
+);
+
+Text("Hello world",
+  textScaleFactor: 1.5,
+);
+```
+
+### TextStyle 指定文本显示的样式
+
+```dart
+Text("Hello world",
+  style: TextStyle(
+    color: Colors.blue,
+    fontSize: 18.0,
+    height: 1.2,  
+    fontFamily: "Courier",
+    background: Paint()..color=Colors.yellow,
+    decoration:TextDecoration.underline,
+    decorationStyle: TextDecorationStyle.dashed
+  ),
+);
+```
+<!--rehype:className=wrap-text-->
+
+### TextSpan 文本的一个“片段”
+
+```dart
+Text.rich(TextSpan(
+    children: [
+     TextSpan(
+       text: "Home: "
+     ),
+     TextSpan(
+       text: "https://flutter.dev",
+       style: TextStyle(
+         color: Colors.blue
+       ),  
+       recognizer: _tapRecognizer
+     ),
+    ]
+))
+```
+
+### DefaultTextStyle 文本默认样式  
+<!--rehype:wrap-class=row-span-4-->
+
+```dart
+DefaultTextStyle(
+  // 1.设置文本默认样式  
+  style: TextStyle(
+    color:Colors.red,
+    fontSize: 20.0,
+  ),
+  textAlign: TextAlign.start,
+  child: Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: <Widget>[
+      Text("hello world"),
+      Text("I am Jack"),
+      Text("I am Jack",
+        style: TextStyle(
+          inherit: false, //2.不继承默认样式
+          color: Colors.grey
+        ),
+      ),
+    ],
+  ),
+);
+```
+<!--rehype:className=wrap-text-->
+
+### 字体设置加载
+<!--rehype:wrap-class=row-span-4-->
+
+- 在 asset 中声明，要先在 `pubspec.yaml` 中声明它
+
+    ```yaml
+    flutter:
+      fonts:
+        - family: Raleway
+          fonts:
+            - asset: assets/fonts/Raleway-Regular.ttf
+            - asset: assets/fonts/Raleway-Medium.ttf
+              weight: 500
+            - asset: assets/fonts/Raleway-SemiBold.ttf
+              weight: 600
+        - family: AbrilFatface
+          fonts:
+            - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
+    ```
+
+- 将字体文件复制到在 `pubspec.yaml` 中指定的位置
+- 使用字体
+
+    ```dart
+    // 声明文本样式
+    const textStyle = const TextStyle(
+      fontFamily: 'Raleway',
+    );
+    // 使用文本样式
+    var buttonText = const Text(
+      "Use the font for this text",
+      style: textStyle,
+    );
+    ```
+<!--rehype:className=style-timeline-->
+
+### ElevatedButton "漂浮"按钮
+
+```dart
+ElevatedButton(
+  child: Text("normal"),
+  onPressed: () {},
+);
+```
+
+### TextButton 文本按钮
+
+```dart
+TextButton(
+  child: Text("normal"),
+  onPressed: () {},
+)
+```
+
+### OutlineButton 边框阴影且背景透明按钮
+
+```dart
+OutlineButton(
+  child: Text("normal"),
+  onPressed: () {},
+)
+```
+
+### IconButton 可点击的图标按钮
+
+```dart
+IconButton(
+  icon: Icon(Icons.thumb_up),
+  onPressed: () {},
+)
+```
+
+### 带图标的按钮
+
+```dart
+ElevatedButton.icon(
+  icon: Icon(Icons.send),
+  label: Text("发送"),
+  onPressed: _onPressed,
+),
+OutlineButton.icon(
+  icon: Icon(Icons.add),
+  label: Text("添加"),
+  onPressed: _onPressed,
+),
+TextButton.icon(
+  icon: Icon(Icons.info),
+  label: Text("详情"),
+  onPressed: _onPressed,
+),
+```
+
+### 从 asset 中加载图片
+
+- 在工程根目录下创建一个`images目录`，并将图片 `aaa.png` 拷贝到该目录。
+- 在 `pubspec.yaml` 中的 `flutter` 部分添加如下内容：
+
+    ```yaml
+    assets:
+      - images/aaa.png
+    ```
+
+    注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
+
+- 加载该图片
+
+    ```dart
+    Image(
+      image: AssetImage("images/aaa.png"),
+      width: 100.0
+    );
+    ```
+
+    Image 也提供了一个快捷的构造函数 `Image.asset` 用于从 `asset` 中加载、显示图片：
+
+    ```dart
+    Image.asset("images/aaa.png",
+      width: 100.0,
+    )
+    ```
+<!--rehype:className=style-timeline-->
+
+### 从网络加载图片
+
+```dart
+Image(
+  image: NetworkImage(
+      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
+  width: 100.0,
+)
+```
+<!--rehype:className=wrap-text-->
+
+Image 也提供了一个快捷的构造函数 `Image.network` 用于从网络加载、显示图片：
+
+```dart
+Image.network(
+  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
+  width: 100.0,
+)
+```
+<!--rehype:className=wrap-text-->
+
+### Image 参数
+<!--rehype:wrap-class=row-span-2-->
+
+```dart
+const Image({
+  ...
+  this.width, // 图片的宽
+  this.height, // 图片高度
+  this.color, // 图片的混合色值
+  this.colorBlendMode, // 混合模式
+  this.fit,// 缩放模式
+  // 对齐方式
+  this.alignment = Alignment.center,
+  // 重复方式
+  this.repeat = ImageRepeat.noRepeat,
+  ...
+})
+```
+
+### Switch 单选开关
+
+```dart
+Switch(
+  value: true,//当前状态
+  onChanged:(value){
+    // 重新构建页面  
+  },
+),
+```
+
+### Checkbox 复选框
+<!--rehype:wrap-class=row-span-2-->
+
+```dart
+Checkbox(
+  value: true,
+  // 选中时的颜色
+  activeColor: Colors.red,
+  onChanged:(value){
+    // ...
+  },
+)
+```
+
+### TextField 文本输入框
+
+```dart
+TextField(
+    autofocus: true,
+    onChanged: (v) {
+      print("onChange: $v");
+    }
+)
+```
+
+### LinearProgressIndicator 线性、条状的进度条
+
+模糊进度条(会执行一个动画)
+
+```dart
+LinearProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+),
+```
+<!--rehype:className=wrap-text-->
+
+进度条显示 `50%`
+
+```dart
+LinearProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+  value: .5, 
+)
+```
+<!--rehype:className=wrap-text-->
+
+### CircularProgressIndicator 圆形进度条
+
+模糊进度条(会执行一个旋转动画)
+
+```dart
+CircularProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+),
+```
+<!--rehype:className=wrap-text-->
+
+进度条显示 `50%`，会显示一个半圆
+
+```dart
+CircularProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+  value: .5,
+),
+```
+<!--rehype:className=wrap-text-->
+
+### 自定义尺寸
+
+线性进度条高度指定为 `3`
+
+```dart
+SizedBox(
+  height: 3,
+  child: LinearProgressIndicator(
+    backgroundColor: Colors.grey[200],
+    valueColor: AlwaysStoppedAnimation(Colors.blue),
+    value: .5,
+  ),
+),
+```
+
+圆形进度条直径指定为 `100`
+
+```dart
+SizedBox(
+  height: 100,
+  width: 100,
+  child: CircularProgressIndicator(
+    backgroundColor: Colors.grey[200],
+    valueColor: AlwaysStoppedAnimation(Colors.blue),
+    value: .7,
+  ),
+),
+```
+
+另见
+---
+
+- [Dart 备忘清单](./dart.md) _(jaywcjlove.github.io)_
+- [flutter 官网](https://flutter.dev) _(flutter.dev)_
+- [flutter 中文开发者社区](https://flutterchina.club/) _(flutterchina.club)_

docs/git.md

@@ -185,6 +185,7 @@ $ git tag my_tag
 ```shell
 $ git checkout -b <branch-name> origin/<branch-name>
 ```
+<!--rehype:className=wrap-text-->
 
 ### 临时提交
 
@@ -236,6 +237,55 @@ $ git diff branchB...branchA
 $ git show [SHA]
 ```
 
+### 忽略文件
+<!--rehype:wrap-class=row-span-4-->
+
+文件 `.gitignore` 指定了 `Git` 应该忽略的 **未跟踪的** 文件
+
+:- | :-
+:- | :-
+行首 `#` | 全行注释，不支持行尾类注释 _(转义 `\#`)_
+行首 **`!`** | 否定模式 _(转义 `\!`)_
+`**` | 匹配任意路径
+`*` | 匹配任意多个字符
+`?` | 匹配任意一个字符
+`doc/**` | 匹配 `doc` 文件夹下的全部内容
+`doc/**/a` | 匹配任意深度路径下的 `a` 文件或文件夹
+`/` | 表示路径分隔符，不区分操作系统
+`/` 结尾 | 仅会匹配文件夹，否则会匹配文件和文件夹
+空行 | 不匹配任何文件
+行尾空格 | 默认被忽略，可使用`\`进行转义
+行首空格 | 被正常处理，不会被忽略
+
+当前 `.gitignore` 文件定义规则的优先级高于上级路径 `.gitignore` 定义规则的优先级；后定义的规则优先级高于前面定义规则的优先级
+
+```gitignore showLineNumbers
+# 忽略当前目录logs文件夹下的全部内容
+/logs/
+/logs/*
+/logs/**
+# 上述几条规则等效
+
+# 忽略 Mac 系统文件，包括任意子路径下的同名文件（夹）
+.DS_store
+
+# 忽略 node_modules 文件夹，包括任意子路径下的同名文件夹
+node_modules/
+
+# 忽略任意子路径下build、target文件夹，
+# 但不忽略src/main、src/test下的build、target文件夹
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+target/
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+# 使用 ! 重新包含指定文件（夹）
+!logs/.gitkeep
+```
+<!--rehype:className=wrap-text-->
+
 ### 重构文件名
 
 ```bash
@@ -339,23 +389,8 @@ $ git mv [existing-path] [new-path]
 $ git log --stat -M
 ```
 
-### 忽略文件
-
-```gitignore showLineNumbers
-/logs/*
-# “！” 意思是不要忽视
-!logs/.gitkeep
-# 忽略 Mac 系统文件
-.DS_store
-# 忽略 node_modules 文件夹
-node_modules
-# 忽略 SASS 配置文件
-.sass-cache
-```
-
-`.gitignore` 文件指定了 Git 应该忽略的未跟踪的文件
-
 ### git 配置 ssh 代理
+<!--rehype:wrap-class=col-span-2-->
 
 ```bash
 $ cat ~/.ssh/config
@@ -679,6 +714,7 @@ $ git blame <file-name>
 ```bash
 $ git commit --amend --author='Author Name <email@address.com>'
 ```
+<!--rehype:className=wrap-text-->
 
 ### 修改远程仓库的 url
 
@@ -758,6 +794,7 @@ $ git rebase --autostash
 ```bash
 $ git fetch origin pull/<id>/head:<branch-name>
 ```
+<!--rehype:className=wrap-text-->
 
 ### 详细展示一行中的修改
 
@@ -891,7 +928,59 @@ Host github.com
 ```
 <!--rehype:className=wrap-text-->
 
+Conventional Commmits
+----
+
+### 格式
+<!--rehype:wrap-class=col-span-3-->
+
+```text
+<type>(<scope>): <short summary>
+  │       │             │
+  │       │             └─⫸ 紧凑简短的描述，无需大写，也不需要用句号结尾
+  │       │
+  │       └─⫸ Commit 范围: animations|bazel|benchpress|common|compiler|compiler-cli|core|
+  │                          elements|forms|http|language-service|localize|platform-browser|
+  │                          platform-browser-dynamic|platform-server|router|service-worker|
+  │                          upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve|
+  │                          devtools....
+  │
+  └─⫸ Commit 类型: build|ci|doc|docs|feat|fix|perf|refactor|test
+                    website|chore|style|type|revert
+```
+
+### 常用
+<!--rehype:wrap-class=row-span-1-->
+
+|   类型   |  描述 |
+| ----------|------------ |
+| `feat:`   | 新特性     |
+| `fix(scope):`   | 修复 scope 中的 Bug |
+| `feat!:` / `feat(scope)!:` | breaking change /  重构 API |
+| `chore(deps):` | 更新依赖 |
+<!--rehype:className=left-align-->
+
+### Commit 类型
+<!--rehype:wrap-class=col-span-2-->
+
+|   类型   |  描述 |
+| ----------|------------ |
+| `build:` | 变更影响的是**构建系统**或者**外部依赖** (如: gulp, npm) |
+| `ci:` | 修改了 CI 配置文件或脚本 (如: Github Action, Travis) |
+| `chore:` | **【重要】** 变更不影响源代码或测试（如更新了辅助工具、库等) |
+| `docs:` | 只修改了文档 |
+| `feat:` | **【重要】** 一个新特性 |
+| `fix:` | **【重要】** 修复了一个 Bug |
+| `perf:` | 增强性能的代码变更 |
+| `refactor:` | 并非修复 Bug 或添加新特性的代码变更 |
+| `revert:` | 回退代码 |
+| `style:` | 变更不影响一些有意义的代码 (如: 删除空格、格式化代码、添加分号等) |
+| `test:` | 添加测试代码或修正已有的测试 |
+<!--rehype:className=left-align-->
+
 另见
 ---
 
 - [最常用的 git 提示和技巧](https://github.com/git-tips/tips)
+- [Conventional Commits 官方网站](https://www.conventionalcommits.org/zh-hans/v1.0.0/) _(conventionalcommits.org)_
+- [Conventional Commits Cheatsheet](https://gist.github.com/Zekfad/f51cb06ac76e2457f11c80ed705c95a3) _(gist.github.com)_

docs/golang.md

@@ -401,7 +401,7 @@ for _, num := range nums {
 fmt.Println("sum:", sum)
 ```
 
-### While 循环
+### For 循环
 
 ```go
 i := 1
@@ -701,22 +701,22 @@ Golang 并发
 ```go
 package main
 import (
-        "fmt"
-        "time"
+    "fmt"
+    "time"
 )
 func f(from string) {
-        for i := 0; i < 3; i++ {
-                fmt.Println(from, ":", i)
-        }
+    for i := 0; i < 3; i++ {
+            fmt.Println(from, ":", i)
+    }
 }
 func main() {
-        f("direct")
-        go f("goroutine")
-        go func(msg string) {
-                fmt.Println(msg)
-        }("going")
-        time.Sleep(time.Second)
-        fmt.Println("done")
+    f("direct")
+    go f("goroutine")
+    go func(msg string) {
+            fmt.Println(msg)
+    }("going")
+    time.Sleep(time.Second)
+    fmt.Println("done")
 }
 ```
 
@@ -728,23 +728,23 @@ func main() {
 ```go
 package main
 import (
-        "fmt"
-        "sync"
-        "time"
+    "fmt"
+    "sync"
+    "time"
 )
 func w(id int, wg *sync.WaitGroup) {
-        defer wg.Done()
-        fmt.Printf("%d starting\n", id)
-        time.Sleep(time.Second)
-        fmt.Printf("%d done\n", id)
+    defer wg.Done()
+    fmt.Printf("%d starting\n", id)
+    time.Sleep(time.Second)
+    fmt.Printf("%d done\n", id)
 }
 func main() {
-        var wg sync.WaitGroup
-        for i := 1; i <= 5; i++ {
-                wg.Add(1)
-                go w(i, &wg)
-        }
-        wg.Wait()
+    var wg sync.WaitGroup
+    for i := 1; i <= 5; i++ {
+            wg.Add(1)
+            go w(i, &wg)
+    }
+    wg.Wait()
 }
 ```
 

docs/homebrew.md

@@ -77,7 +77,7 @@ Cask 命令用于与图形应用程序交互
 `brew upgrade`  | 升级所有软件包
 `brew list`     | 已安装列表
 `brew outdated` | 升级需要什么？
-`brew doctor`   | 诊断冲泡问题
+`brew doctor`   | 诊断 brew 问题
 `brew pin <formula>` | 防止指定软件包升级
 `brew unpin <formula>` | 允许升级指定的软件包
 
@@ -86,11 +86,14 @@ Cask 命令用于与图形应用程序交互
 ```bash
 $ brew cleanup # 删除旧版本的已安装软件包
 $ brew cleanup <formula> # 删除旧版本指定软件包
+$ brew cleanup -s # 删除未安装的软件包
+$ brew cleanup --prune=all # 删除所有 Homebrew 缓存
+$ rm -rf $(brew --cache) # 直接删除 Homebrew 的缓存目录
 # 显示所有将被删除的软件包(试运行)
-$ brew cleanup -n 
+$ brew cleanup -n
 ```
 
-### brew 源码仓库
+### Brew 源码仓库
 
 ```bash
 # 列出所有当前点击的源码仓库（点击）
@@ -111,7 +114,7 @@ $ brew untap <user/repo>
 $ brew list
 # 显示所有本地可用的 brew 配方
 $ brew search
-# 对用于 brew 的软件包名称执行子字符串搜索
+# 搜索包含指定字符的 brew 配方
 $ brew search <text>
 # 显示有关软件包的信息
 $ brew info <formula>

docs/html.md

@@ -855,7 +855,7 @@ meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他
 <meta property="og:type" content="website">
 <meta property="og:locale" content="en_CA">
 <meta property="og:title" content="HTML cheatsheet">
-<meta property="og:url" content="https://quickref.me/html">
+<meta property="og:url" content="https://jaywcjlove.github.io/">
 <meta property="og:image" content="https://xxx.com/image.jpg">
 <meta property="og:site_name" content="Name of your website">
 <meta property="og:description" content="Description of this page">
@@ -869,7 +869,7 @@ Facebook、Instagram、Pinterest、LinkedIn 等使用。
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@QuickRef_ME">
 <meta name="twitter:title" content="HTML cheatsheet">
-<meta name="twitter:url" content="https://quickref.me/html">
+<meta name="twitter:url" content="https://jaywcjlove.github.io/">
 <meta name="twitter:description" content="Description of this page">
 <meta name="twitter:image" content="https://xxx.com/image.jpg">
 ```

docs/java.md

@@ -35,7 +35,7 @@ int num = 5;
 float floatNum = 5.99f;
 char letter = 'D';
 boolean bool = true;
-String site = "quickref.me";
+String site = "jaywcjlove.github.io";
 ```
 
 ### 原始数据类型
@@ -301,7 +301,7 @@ System.out.println(concat);
 Java 数组
 -------
 
-### 申明 Declare
+### 声明 Declare
 
 ```java
 int[] a1;
@@ -783,6 +783,26 @@ try {
 }
 ```
 
+### 反射
+
+```java
+/**
+* 利用反射动态加载依赖库
+* java9及以上版本可用
+* @param jar jar文件
+*/
+Method method = URLClassLoader.class.getDeclaredMethod("addURL", URL.class);
+method.setAccessible(true);
+MethodHandle addURL = lookup.unreflect(method);
+URL url = jar.toURI().toURL();
+URLClassLoader urlClassLoader = new URLClassLoader(new URL[] {url});
+addURL.invoke(urlClassLoader, url);
+//java8
+Method method = URLClassLoader.class.getDeclaredMethod("addURL", URL.class);
+method.setAccessible(true);
+method.invoke(classLoader, url);
+```
+
 ### util工具类
 
 - `ArrayDeque` 提供 resizable-array 并实现 Deque 接
@@ -793,7 +813,7 @@ try {
 - `EnumMap` 一个专门用于枚举键的 Map 实现
 - `EnumSet` 一个专门用于枚举键的 Set 实现
 - `Formatter` 提供对布局对齐和对齐、数字、字符串和日期/时间数据的常用格式以及特定于语言环境的输出的支持
-- `Random` 实例用于生成伪随机数流
+- `SecureRandom` 实例用于生成安全的伪随机数流
 - `UUID` 表示一个不可变的通用唯一标识符
 - `Vector` 实现了一个可增长的对象数组
 

docs/javascript.md

@@ -42,6 +42,7 @@ function potentiallyBuggyCode() {
 let amount = 6;
 let price = 4.99;
 let home = 1e2;
+let num = 1_000_000; // 位数过多可以用 _ 分割
 let m = 0644;   // 八进制数字 420
 ```
 
@@ -142,13 +143,24 @@ abc.concat(" ", str2);           // abc + " " + str2
 abc.charAt(2);                   // 索引处的字符：“c”
 abc[2];                          // 不安全，abc[2] = "C" 不起作用
 // 索引处的字符代码：“c”-> 99
-abc.charCodeAt(2);            
+abc.charCodeAt(2);
 // 用逗号分割字符串给出一个数组
-abc.split(",");               
+abc.split(",");
 // 分割字符
-abc.split("");                
+abc.split("");
+// 匹配开头字符串,如果忽略第二个参数，则从索引 0 开始匹配
+abc.startsWith("bc", 1);
+// 匹配结尾的字符串,如果忽略第二个参数，则默认是原字符串长度
+abc.endsWith("wxy", abc.length - 1);
+// padEnd 和 padStart 都用于填充长度，默认填充对象是空格
+"200".padEnd(5); // "200  "
+"200".padEnd(5, "."); // "200.."
+// 重复字符
+"abc".repeat(2); // "abcabc"
+// trim、trimEnd 和 trimStart 用于去除首尾空格
+" ab c ".trim(); // "ab c"
 // 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)
-128.toString(16);             
+(128).toString(16);
 ```
 
 ### 数字
@@ -1178,6 +1190,100 @@ console.log(myCat.name);
 myCat.name = 'Yankee';
 ```
 
+JavaScript this 绑定
+----
+
+### 隐式绑定
+
+```js
+function foo() {
+  console.log(this)
+}
+let obj1 = {
+  name: "obj1",
+  foo: foo
+}
+let obj2 = {
+  name: "obj2",
+  obj1: obj1
+}
+obj2.obj1.foo() // [Object obj1]
+```
+
+#### 隐式丢失
+
+```js
+let a = obj2.obj1.foo()
+a() // Window
+```
+
+- 指定隐式绑定：必须在调用的对象内部有一个对函数的引用（比如一个属性）
+- 将以上调用赋值给一个变量，结果最终会是 Window
+- 在 a 被调用的位置没有进行过任何显示绑定，最终全局对象 window 会调用它（`Window.a`）
+<!--rehype:className=style-round-->
+
+### 显示绑定
+
+```js
+function getName(a1, a2) {
+  console.log("此人" + this.name, "岁数" + (a1 + a2))
+}
+let person = {
+  name: "zhangsan"
+}
+```
+
+#### call
+
+call 第一个参数接受 this 作用域，剩余参数传递给其调用的函数
+
+```js
+getName.call(person, 18, 12)
+```
+
+#### apply
+
+apply 第一个参数与 call 相同，第二个参数是其调用函数的参数数组
+
+```js
+getName.apply(person, [18, 12])
+```
+
+#### bind
+
+bind 函数会返回一个新函数
+
+```js
+getName.bind(person,18,12)()
+//或者可以这样
+getName.bind(person)(18, 12)
+//或者这样
+getName.bind(person).bind(null, 18)(12)
+```
+
+### 内置函数中的 this
+
+数组中的一些方法，类似于 map、forEach 等，可以自己设置绑定 this
+
+```js
+const obj = {
+  name: "zhangsan"
+}
+const array = [1, 2, 3];
+array.map(function(value){
+  console.log(this.name)
+}, obj)
+// zhangsan x3 
+```
+
+其中一些全局对象，如 setTimeout 等，它们和未显示绑定 this 的部分数组方法一样，都会指向全局对象（`Window`）
+
+```js
+setTimeout(function(){ 
+  console.log(this)
+}, 1000) // Window
+```
+
 JavaScript Classes
 ----
 

docs/jq.md

@@ -229,6 +229,25 @@ $ echo '42' | jq '"The input was \(.), which is one less than \(.+1)"'
 ```
 <!--rehype:className=wrap-text -->
 
+### 字符串转 JSON 数组
+
+```bash
+$ echo 'a b c d' | jq -R 'split(" ")'
+```
+<!--rehype:className=wrap-text -->
+
+输出结果
+
+```json
+[
+  "a",
+  "b",
+  "c",
+  "d"
+]
+```
+<!--rehype:className=wrap-text -->
+
 另见
 ----
 

docs/json.md

@@ -64,8 +64,8 @@ JSON 备忘清单
 
 ```json
 {
-  "url": "https://quickref.me",
-  "msg" : "Hi,\n\"QuickRef.ME\"",
+  "url": "https://jaywcjlove.github.io",
+  "msg" : "Hi,\n\"Quick Reference\"",
   "intro": "Share quick reference and cheat sheet for developers."
 }
 ```

docs/kotlin.md

@@ -0,0 +1,718 @@
+Kotlin 备忘清单
+===
+
+Kotlin 备忘清单是 [Kotlin](https://kotlinlang.org) 编程语言的单页参考表
+
+Kotlin 简介
+----
+
+### main() 函数
+
+```kotlin
+fun main() {
+  // Code goes here
+}
+```
+
+main() 函数是每个 Kotlin 程序的起点，在执行之前必须包含在代码中
+
+### 打印声明
+
+```kotlin
+println("Greetings, earthling!")
+print("Take me to ")
+print("your leader.")
+
+/* 
+打印:
+Greetings, earthling!
+Take me to your leader.
+*/
+```
+
+### 注释
+
+```kotlin
+// 这是单行注释
+
+/*
+这个
+注释
+用于
+多
+行
+*/
+```
+
+### 执行顺序
+
+```kotlin
+fun main() {
+  println("I will be printed first.")
+  println("I will be printed second.")
+  println("I will be printed third.")
+}
+```
+
+数据类型和变量
+---
+
+### 可变变量
+
+```kotlin
+var age = 25
+age = 26  
+```
+
+### 不可变变量
+
+```kotlin
+val goldenRatio = 1.618
+```
+
+### 类型推断
+
+```kotlin
+// 以下变量在双引号内分配了一个文本值
+// 因此推断的类型是 String
+
+var color = "Purple" 
+```
+
+### 字符串连接
+
+```kotlin
+var streetAddress = "123 Main St."
+var cityState = "Brooklyn, NY" 
+
+println(streetAddress + " " + cityState) 
+// 打印: 123 Main St. Brooklyn, NY 
+```
+
+### 字符串模板
+
+```kotlin
+var address = "123 Main St."
+println("The address is $address") 
+// 打印: The address is 123 Main St.
+```
+
+### 内置属性和函数
+
+```kotlin
+var monument = "the Statue of Liberty"
+
+println(monument.capitalize())
+// 打印: The Statue of Liberty
+println(monument.length)
+// 打印: 21
+```
+
+### 字符转义序列
+<!--rehype:wrap-class=row-span-2-->
+
+```kotlin
+print("\"Excellent!\" I cried. \"Elementary,\" said he.") 
+
+// 打印: "Excellent!" I cried. "Elementary," said he.  
+```
+<!--rehype:className=wrap-text-->
+
+- `\n` 插入新行
+- `\t` 插入标签
+- `\r` 插入回车
+- `\'` 插入单引号
+- `\"` 插入双引号
+- `\\` 插入反斜杠
+- `\$` 插入美元符号
+
+### 算术运算符
+
+```kotlin
+5 + 7  // 12
+9 - 2  // 7
+8 * 4  // 32
+25 / 5 // 5 
+31 % 2 // 1 
+```
+
+`+` 加法、`-` 减法、`*` 乘法、`/` 除法和 `%` 模数
+
+### 操作顺序
+
+```kotlin
+5 + 8 * 2 / 4 - 3 // 6 
+3 + (4 + 4) / 2   // 7
+4 * 2 + 1 * 7     // 15
+3 + 18 / 2 * 1    // 12  
+6 - 3 % 2 + 2     // 7   
+```
+
+### 增强赋值运算符
+
+```kotlin
+var batteryPercentage = 80
+
+// 长语法
+batteryPercentage = batteryPercantage + 10 
+
+// 带有增广赋值运算符的短句法
+batteryPercentage += 10 
+```
+
+### 递增和递减运算符
+
+```kotlin
+var year = 2019 
+year++ // 2020
+year-- // 2019 
+```
+
+### 数学库
+
+```kotlin
+Math.pow(2.0, 3.0)  // 8.0
+Math.min(6, 9)      // 6 
+Math.max(10, 12)    // 12
+Math.round(13.7)    // 14
+```
+
+条件表达式
+----
+
+### if 表达式
+
+```kotlin
+var morning = true
+
+if (morning) {
+  println("Rise and shine!")
+}
+// 打印: Rise and shine!
+```
+
+### else 表达式
+
+```kotlin
+var rained = false
+
+if (rained) {
+  println("今天不需要给植物浇水。")
+} else {
+  println("植物需要浇水！")
+}
+// 打印: 植物需要浇水！
+```
+
+### Else-If 表达式
+
+```kotlin
+var age = 65
+
+if (age < 18 ) {
+  println("您被视为未成年人")
+} else if (age < 60) {
+  println("您被视为成年人")
+} else {
+  println("你被认为是高级")
+}
+
+// 打印: 你被认为是高级
+```
+
+### 比较运算符
+
+```kotlin
+var myAge = 19
+var sisterAge = 11
+var cousinAge = 11
+
+myAge > sisterAge  // true
+myAge < cousinAge  // false
+myAge >= cousinAge // true
+myAge <= sisterAge // false
+```
+
+### 逻辑运算符
+
+```kotlin
+var humid = true
+var raining = true
+var jacket = false
+
+println(!humid)
+// 打印: false
+println(jacket && raining)
+// 打印: true
+println(humid || raining)
+// 打印: true
+```
+
+### AND 运算符： &&
+
+```kotlin
+var humid = true
+var raining = true
+var shorts = false
+var sunny = false
+
+// true AND true
+println(humid && raining) //  true
+// true AND false
+println(humid && shorts)  //  false
+// false AND true
+println(sunny && raining) //  false
+// false AND false
+println(shorts && sunny)  // false
+```
+
+### 或运算符：||
+
+```kotlin
+var late = true
+var skipBreakfast = true
+var underslept = false
+var checkEmails = false
+
+// true OR true
+println(skipBreakfast || late) //  true
+// true OR false
+println(late || checkEmails) //  true
+// false OR true
+println(underslept || late) //  true
+// false OR false
+println(checkEmails || underslept) // false
+```
+
+### NOT 运算符
+
+```kotlin
+var hungry = true
+var full = false
+
+println(!hungry) //  false
+println(!full) //  true
+```
+
+### 评估顺序
+
+```kotlin
+!true && (false || true) // false
+/*
+(false || true) 被评估首先返回 true。
+然后，评估 !true && true 并返回最终结果 false
+*/
+
+!false && true || false // true
+/*
+!false 被评估首先返回 true。 
+然后评估 true && true，返回 true。
+那么，真|| 评估 false 最终返回 true
+*/
+```
+
+### 嵌套条件
+
+```kotlin
+var studied = true
+var wellRested = true
+
+if (wellRested) {
+  println("祝你今天好运！")
+  if (studied) {
+    println("你应该为考试做好准备！")
+  } else {
+    println("考试前花几个小时学习！")
+  }
+}
+
+// 打印: 祝你今天好运！
+// 打印: 你应该为考试做好准备！
+```
+
+### 当表达式
+
+```kotlin
+var grade = "A"
+
+when(grade) {
+  "A" -> println("很棒的工作！")
+  "B" -> println("做得太好了！")
+  "C" -> println("你通过了！")
+  else -> println("关！下次一定要多准备！")
+}
+// 打印: 很棒的工作！
+```
+
+### 范围运算符
+
+```kotlin
+var height = 46 // inches
+
+if (height in 1..53) {
+  println("抱歉，您必须至少 54 英寸才能乘坐过山车"）
+}
+// Prints: 抱歉，您必须至少 54 英寸才能乘坐过山车
+```
+<!--rehype:className=wrap-text-->
+
+### 等式运算符
+
+```kotlin
+var myAge = 22
+var sisterAge = 21
+
+myAge == sisterAge // false
+myAge !== sisterAge // true
+```
+
+Collections
+---
+
+### 不可变列表
+
+```kotlin
+var programmingLanguages = listOf("C#", "Java", "Kotlin", "Ruby") 
+```
+<!--rehype:className=wrap-text-->
+
+### 可变列表
+
+```kotlin
+var fruits = mutableListOf("Orange", "Apple", "Banana", "Mango") 
+```
+<!--rehype:className=wrap-text-->
+
+### 访问列表元素
+
+```kotlin
+var cars = listOf("BMW", "Ferrari", "Volvo", "Tesla")
+
+println(cars[2]) // Prints: Volvo
+```
+<!--rehype:className=wrap-text-->
+
+### 大小属性
+
+```kotlin
+var worldContinents = listOf("Asia", "Africa", "North America", "South America", "Antarctica", "Europe", "Australia")
+
+println(worldContinents.size) // Prints: 7
+```
+<!--rehype:className=wrap-text-->
+
+### 列表操作
+<!--rehype:wrap-class=row-span-2-->
+
+```kotlin
+var seas = listOf("Black Sea", "Caribbean Sea", "North Sea") 
+println(seas.contains("North Sea")) // Prints: true
+
+// contains() 函数对任何列表执行读取操作并确定元素是否存在
+seas.add("Baltic Sea") // 错误：无法对不可变列表执行写操作
+// add() 函数只能在可变列表上调用，因此上面的代码会引发错误
+```
+<!--rehype:className=wrap-text-->
+
+### 不可变集
+
+```kotlin
+var primaryColors = setOf("Red", "Blue", "Yellow")
+```
+<!--rehype:className=wrap-text-->
+
+### 可变集
+
+```kotlin
+var womenInTech = mutableSetOf("Ada Lovelace",  "Grace Hopper",  "Radia Perlman",  "Sister Mary Kenneth Keller")
+```
+<!--rehype:className=wrap-text-->
+
+### 访问集合元素
+<!--rehype:wrap-class=row-span-2-->
+
+```kotlin
+var companies = setOf("Facebook", "Apple", "Netflix", "Google")
+
+println(companies.elementAt(3))
+// Prints: Google
+println(companies.elementAt(4))
+// Returns and Error
+println(companies.elementAtOrNull(4))
+// Prints: null
+```
+<!--rehype:className=wrap-text-->
+
+### 不可变映射
+
+```kotlin
+var averageTemp = mapOf("winter" to 35,  "spring" to 60,  "summer" to 85, "fall" to 55)
+```
+<!--rehype:className=wrap-text-->
+
+### 可变映射
+
+```kotlin
+var europeanDomains = mutableMapOf("Germany" to "de", "Slovakia" to "sk", "Hungary" to "hu", "Norway" to "no")
+```
+<!--rehype:className=wrap-text-->
+
+### 检索映射键和值
+
+```kotlin
+var oscarWinners = mutableMapOf("Parasite" to "Bong Joon-ho", "Green Book" to "Jim Burke", "The Shape Of Water" to "Guillermo del Toro")
+
+println(oscarWinners.keys)
+// Prints: [Parasite, Green Book, The Shape Of Water]
+
+println(oscarWinners.values)
+// Prints: [Bong Joon-ho, Jim Burke, Guillermo del Toro]
+
+println(oscarWinners["Parasite"])
+// Prints: Bong Joon-ho
+```
+<!--rehype:className=wrap-text-->
+
+### 添加和删除地图条目
+
+```kotlin
+var worldCapitals = mutableMapOf("United States" to "Washington D.C.", "Germany" to "Berlin", "Mexico" to "Mexico City", "France" to "Paris")
+
+worldCapitals.put("Brazil", "Brasilia")
+println(worldCapitals)
+// Prints: {United States=Washington D.C., Germany=Berlin, Mexico=Mexico City, France=Paris, Brazil=Brasilia}
+
+worldCapitals.remove("Germany")
+println(worldCapitals)
+// Prints: {United States=Washington D.C., Mexico=Mexico City, France=Paris, Brazil=Brasilia}
+```
+<!--rehype:className=wrap-text-->
+
+函数
+---
+
+### 函数
+
+```kotlin
+fun greet() {
+  println("Hey there!")
+}
+
+fun main() {
+  // Function call
+  greet() // Prints: Hey there!
+}
+```
+
+### 函数参数
+
+```kotlin
+fun birthday(name: String, age: Int) {
+   println("Happy birthday $name! You turn $age today!")
+}
+
+fun main() {
+  birthday("Oscar", 26) 
+  // Prints: Happy birthday Oscar! You turn 25 today!
+  birthday("Amarah", 30) 
+  // Prints: Happy birthday Amarah! You turn 30 today!
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 默认参数
+
+```kotlin
+fun favoriteLanguage(name, language = "Kotlin") {
+  println("Hello, $name. Your favorite programming language is $language")  
+}
+
+fun main() {
+  favoriteLanguage("Manon") 
+  // Prints: Hello, Manon. Your favorite programming language is Kotlin
+  
+  favoriteLanguage("Lee", "Java") 
+  // Prints: Hello, Lee. Your favorite programming language is Java
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 命名参数
+
+```kotlin
+fun findMyAge(currentYear: Int, birthYear: Int) {
+   var myAge = currentYear - birthYear
+   println("I am $myAge years old.")
+}
+
+fun main() {
+  findMyAge(currentYear = 2020, birthYear = 1995)
+  // Prints: I am 25 years old.
+  findMyAge(birthYear = 1920, currentYear = 2020)
+  // Prints: I am 100 years old.
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 返回声明
+
+```kotlin
+// Return type is declared outside the parentheses
+fun getArea(length: Int, width: Int): Int {
+  var area = length * width
+
+  // return statement
+  return area
+}
+
+fun main() {
+  var myArea = getArea(10, 8)
+  println("The area is $myArea.")
+  // Prints: The area is 80.
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 单表达式函数
+
+```kotlin
+fun fullName(firstName: String, lastName: String) = "$firstName $lastName"
+
+fun main() {
+  println(fullName("Ariana", "Ortega")) 
+  // Prints: Ariana Ortega
+  println(fullName("Kai", "Gittens")) 
+  // Prints: Kai Gittens
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 函数字面量
+
+```kotlin
+fun main() {
+  // Anonymous Function:
+  var getProduct = fun(num1: Int, num2: Int): Int {
+     return num1 * num2
+  }
+  println(getProduct(8, 3)) 
+  // Prints: 24
+
+  // Lambda Expression
+  var getDifference = { num1: Int, num2: Int -> num1 - num2 }
+  println(getDifference(10, 3))
+  // Prints: 7
+}
+```
+<!--rehype:className=wrap-text-->
+
+类
+---
+
+### 类示例
+
+```kotlin
+// 具有包含默认值的属性的类
+class Student {
+  var name = "Lucia"
+  var semester = "Fall"
+  var gpa = 3.95
+}
+
+// 没有类体的简写语法
+class Student 
+```
+
+### 类实例
+
+```kotlin
+// Class
+class Student {
+  var name = "Lucia"
+  var semester = "Fall"
+  var gpa = 3.95
+}
+
+fun main() {
+  var student = Student()   
+  // Instance
+  println(student.name)     
+  // Prints: Lucia
+  println(student.semester) 
+  // Prints: Fall
+  println(student.gpa)      
+  // Prints: 3.95  
+} 
+```
+
+### 主构造函数
+
+```kotlin
+class Student(val name: String, val gpa: Double, val semester: String, val estimatedGraduationYear: Int) 
+
+fun main() {
+  var student = Student("Lucia", 3.95, "Fall", 2022) 
+  println(student.name)     
+  // Prints: Lucia
+  println(student.gpa)      
+  // Prints: 3.95
+  println(student.semester) 
+  // Prints: Fall
+  println(student.estimatedGraduationYear) 
+  // Prints: 2022
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 初始化块
+
+```kotlin
+class Student(val name: String, val gpa: Double, val semester: String, val estimatedGraduationYear: Int) {
+  init {
+    println("$name has ${estimatedGraduationYear - 2020} years left in college.")
+  }
+}
+
+fun main() {
+  var student = Student("Lucia", 3.95, "Fall", 2022)
+  // Prints: Lucia has 2 years left in college. 
+}
+```
+<!--rehype:className=wrap-text-->
+
+### 成员函数
+<!--rehype:wrap-class=col-span-2-->
+
+```kotlin
+class Student(val name: String, val gpa: Double, val semester: String, val estimatedGraduationYear: Int) {
+
+  init {
+    println("$name has ${estimatedGraduationYear - 2020} years left in college.")
+  }
+
+  // 成员函数
+  fun calculateLetterGrade(): String {
+    return when {
+      gpa >= 3.0 -> "A"
+      gpa >= 2.7 -> "B"
+      gpa >= 1.7 -> "C"
+      gpa >= 1.0 -> "D"
+      else -> "E"
+    }
+  }
+}
+
+// 创建实例并调用函数时，将执行 when 表达式并返回字母等级
+fun main() {
+  var student = Student("Lucia", 3.95, "Fall", 2022) 
+  // Prints: Lucia has 2 years left in college. 
+  println("${student.name}'s letter grade is ${student.calculateLetterGrade()}.") 
+  // Prints: Lucia's letter grade is A. 
+}
+```
+<!--rehype:className=wrap-text-->
+
+另见
+---
+
+- [Kotlin 语言官方文档](https://kotlinlang.org/) _(kotlinlang.org)_

docs/latex.md

@@ -88,7 +88,120 @@ Supported Functions
 `\left`   | `\big`  | `\bigl`  | `\bigm`  | `\bigr`
 `\middle` | `\Big`  | `\Bigl`  | `\Bigm`  | `\Bigr`
 `\right`  | `\bigg` | `\biggl` | `\biggm` | `\biggr`
-`` | `\Bigg` | `\Biggl` | `\Biggm` | `\Biggr`
+`\` | `\Bigg` | `\Biggl` | `\Biggm` | `\Biggr`
+
+### 希腊和希伯来字母 Greek and Hebrew letters
+<!--rehype:wrap-class=col-span-3-->
+
+预览 | 方法 | 预览 | 方法 | 预览 | 方法 | 预览| 方法 | 预览 | 方法 | 预览 | 方法
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+| `KaTex:\alpha`     | <pur>`\alpha`</pur>      | `KaTex:\kappa`    | <pur>`\kappa`</pur>       | `KaTex:\psi`      | <pur>`\psi`</pur>         | `KaTex:\digamma`      | <pur>`\digamma`</pur>         | `KaTex:\Delta`    | <pur>`\Delta`</pur>       |  `KaTex:\Theta`   | <pur>`\Theta`</pur>   |
+| `KaTex:\beta`      | <pur>`\beta`</pur>       | `KaTex:\lambda`   | <pur>`\lambda`</pur>      | `KaTex:\rho`      | <pur>`\rho`</pur>         | `KaTex:\varepsilon`   | <pur>`\varepsilon`</pur>      | `KaTex:\Gamma`    | <pur>`\Gamma`</pur>       |  `KaTex:\Upsilon` | <pur>`\Upsilon`</pur> |
+| `KaTex:\chi`       | <pur>`\chi`</pur>        | `KaTex:\mu`       | <pur>`\mu`</pur>          | `KaTex:\sigma`    | <pur>`\sigma`</pur>       | `KaTex:\varkappa`     | <pur>`\varkappa`</pur>        | `KaTex:\Lambda`   | <pur>`\Lambda`</pur>      |  `KaTex:\Xi`      | <pur>`\Xi`</pur>      |
+| `KaTex:\delta`     | <pur>`\delta`</pur>      | `KaTex:\nu`       | <pur>`\nu`</pur>          | `KaTex:\tau`      | <pur>`\tau`</pur>         | `KaTex:\varphi`       | <pur>`\varphi`</pur>          | `KaTex:\Omega`    | <pur>`\Omega`</pur>       |  |
+| `KaTex:\epsilon`   | <pur>`\epsilon`</pur>    | `KaTex:o`         | <pur>`o`</pur>            | `KaTex:\theta`    | <pur>`\theta`</pur>       | `KaTex:\varpi`        | <pur>`\varpi`</pur>           | `KaTex:\Phi`      | <pur>`\Phi`</pur>         |  `KaTex:\aleph`   | <pur>`\aleph`</pur>   |
+| `KaTex:\eta`       | <pur>`\eta`</pur>        | `KaTex:\omega`    | <pur>`\omega`</pur>       | `KaTex:\upsilon`  | <pur>`\upsilon`</pur>     | `KaTex:\varrho`       | <pur>`\varrho`</pur>          | `KaTex:\Pi`       | <pur>`\Pi`</pur>          |  `KaTex:\beth`    | <pur>`\beth`</pur>    |
+| `KaTex:\gamma`     | <pur>`\gamma`</pur>      | `KaTex:\phi`      | <pur>`\phi`</pur>         | `KaTex:\xi`       | <pur>`\xi`</pur>          | `KaTex:\varsigma`     | <pur>`\varsigma`</pur>        | `KaTex:\Psi`      | <pur>`\Psi`</pur>         |  `KaTex:\daleth`  | <pur>`\daleth`</pur>  |
+| `KaTex:\iota`      | <pur>`\iota`</pur>       | `KaTex:\pi`       | <pur>`\pi`</pur>          | `KaTex:\zeta`     | <pur>`\zeta`</pur>        | `KaTex:\vartheta`     | <pur>`\vartheta`</pur>        | `KaTex:\Sigma`    | <pur>`\Sigma`</pur>       |  `KaTex:\gimel`   | <pur>`\gimel`</pur>   |
+<!--rehype:className=left-align-->
+
+其它字母
+
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:\imath` | <pur>`\imath`</pur> | `KaTex:\nabla` | <pur>`\nabla`</pur> | `KaTex:\Im` | <pur>`\Im`</pur> | `KaTex:\Reals` | <pur>`\Reals`</pur> | `KaTex:\text{\OE}` | <pur>`\text{\OE}`</pur> |
+`KaTex:\jmath` | <pur>`\jmath`</pur> | `KaTex:\partial` | <pur>`\partial`</pur> | `KaTex:\image` | <pur>`\image`</pur> | `KaTex:\wp` | <pur>`\wp`</pur> | `KaTex:\text{\o}` | <pur>`\text{\o}`</pur> |
+`KaTex:\aleph` | <pur>`\aleph`</pur> | `KaTex:\Game` | <pur>`\Game`</pur> | `KaTex:\Bbbk` | <pur>`\Bbbk`</pur> | `KaTex:\weierp` | <pur>`\weierp`</pur> | `KaTex:\text{\O}` | <pur>`\text{\O}`</pur> |
+`KaTex:\alef` | <pur>`\alef`</pur> | `KaTex:\Finv` | <pur>`\Finv`</pur> | `KaTex:\N` | <pur>`\N`</pur> | `KaTex:\Z` | <pur>`\Z`</pur> | `KaTex:\text{\ss}` | <pur>`\text{\ss}`</pur> |
+`KaTex:\alefsym` | <pur>`\alefsym`</pur> | `KaTex:\cnums` | <pur>`\cnums`</pur> | `KaTex:\natnums` | <pur>`\natnums`</pur> | `KaTex:\text{\aa}` | <pur>`\text{\aa}`</pur> | `KaTex:\text{\i}` | <pur>`\text{\i}`</pur> |
+`KaTex:\beth` | <pur>`\beth`</pur> | `KaTex:\Complex` | <pur>`\Complex`</pur> | `KaTex:\R` | <pur>`\R`</pur> | `KaTex:\text{\AA}` | <pur>`\text{\AA}`</pur> | `KaTex:\text{\j}` | <pur>`\text{\j}`</pur> |
+`KaTex:\gimel` | <pur>`\gimel`</pur> | `KaTex:\ell` | <pur>`\ell`</pur> | `KaTex:\Re` | <pur>`\Re`</pur> | `KaTex:\text{\ae}` | <pur>`\text{\ae}`</pur> |
+`KaTex:\daleth` | <pur>`\daleth`</pur> | `KaTex:\hbar` | <pur>`\hbar`</pur> | `KaTex:\real` | <pur>`\real`</pur> | `KaTex:\text{\AE}` | <pur>`\text{\AE}`</pur> |
+`KaTex:\eth` | <pur>`\eth`</pur> | `KaTex:\hslash` | <pur>`\hslash`</pur> | `KaTex:\reals` | <pur>`\reals`</pur> | `KaTex:\text{\oe}` | <pur>`\text{\oe}`</pur> |
+<!--rehype:className=left-align-->
+
+### 字母和 Unicode
+<!--rehype:wrap-class=col-span-3-->
+
+预览 | 方法 | 预览 | 方法 | 预览 | 方法 | 预览 | 方法
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:\Alpha` | <pur>`\Alpha`</pur> | `KaTex:\Beta` | <pur>`\Beta`</pur> | `KaTex:\Gamma` | <pur>`\Gamma`</pur> | `KaTex:\Delta` | <pur>`\Delta`</pur>
+`KaTex:\Epsilon` | <pur>`\Epsilon`</pur> | `KaTex:\Zeta` | <pur>`\Zeta`</pur> | `KaTex:\Eta` | <pur>`\Eta`</pur> | `KaTex:\Theta` | <pur>`\Theta`</pur>
+`KaTex:\Iota` | <pur>`\Iota`</pur> | `KaTex:\Kappa` | <pur>`\Kappa`</pur> | `KaTex:\Lambda` | <pur>`\Lambda`</pur> | `KaTex:\Mu` | <pur>`\Mu`</pur>
+`KaTex:\Nu` | <pur>`\Nu`</pur> | `KaTex:\Xi` | <pur>`\Xi`</pur> | `KaTex:\Omicron` | <pur>`\Omicron`</pur> | `KaTex:\Pi` | <pur>`\Pi`</pur>
+`KaTex:\Rho` | <pur>`\Rho`</pur> | `KaTex:\Sigma` | <pur>`\Sigma`</pur> | `KaTex:\Tau` | <pur>`\Tau`</pur> | `KaTex:\Upsilon` | <pur>`\Upsilon`</pur>
+`KaTex:\Phi` | <pur>`\Phi`</pur> | `KaTex:\Chi` | <pur>`\Chi`</pur> | `KaTex:\Psi` | <pur>`\Psi`</pur> | `KaTex:\Omega` | <pur>`\Omega`</pur>
+`KaTex:\varGamma` | <pur>`\varGamma`</pur> | `KaTex:\varDelta` | <pur>`\varDelta`</pur> | `KaTex:\varTheta` | <pur>`\varTheta`</pur> | `KaTex:\varLambda` | <pur>`\varLambda`</pur>
+`KaTex:\varXi` | <pur>`\varXi`</pur> | `KaTex:\varPi` | <pur>`\varPi`</pur> | `KaTex:\varSigma` | <pur>`\varSigma`</pur> | `KaTex:\varUpsilon` | <pur>`\varUpsilon`</pur>
+`KaTex:\varPhi` | <pur>`\varPhi`</pur> | `KaTex:\varPsi` | <pur>`\varPsi`</pur> | `KaTex:\varOmega` | <pur>`\varOmega`</pur> |
+`KaTex:\alpha` | <pur>`\alpha`</pur> | `KaTex:\beta` | <pur>`\beta`</pur> | `KaTex:\gamma` | <pur>`\gamma`</pur> | `KaTex:\delta` | <pur>`\delta`</pur>
+`KaTex:\epsilon` | <pur>`\epsilon`</pur> | `KaTex:\zeta` | <pur>`\zeta`</pur> | `KaTex:\eta` | <pur>`\eta`</pur> | `KaTex:\theta` | <pur>`\theta`</pur>
+`KaTex:\iota` | <pur>`\iota`</pur> | `KaTex:\kappa` | <pur>`\kappa`</pur> | `KaTex:\lambda` | <pur>`\lambda`</pur> | `KaTex:\mu` | <pur>`\mu`</pur>
+`KaTex:\nu` | <pur>`\nu`</pur> | `KaTex:\xi` | <pur>`\xi`</pur> | `KaTex:\omicron` | <pur>`\omicron`</pur> | `KaTex:\pi` | <pur>`\pi`</pur>
+`KaTex:\rho` | <pur>`\rho`</pur> | `KaTex:\sigma` | <pur>`\sigma`</pur> | `KaTex:\tau` | <pur>`\tau`</pur> | `KaTex:\upsilon` | <pur>`\upsilon`</pur>
+`KaTex:\phi` | <pur>`\phi`</pur> | `KaTex:\chi` | <pur>`\chi`</pur> | `KaTex:\psi` | <pur>`\psi`</pur> | `KaTex:\omega` | <pur>`\omega`</pur>
+`KaTex:\varepsilon` | <pur>`\varepsilon`</pur> | `KaTex:\varkappa` | <pur>`\varkappa`</pur> | `KaTex:\vartheta` | <pur>`\vartheta`</pur> | `KaTex:\thetasym` | <pur>`\thetasym`</pur>
+`KaTex:\varpi` | <pur>`\varpi`</pur> | `KaTex:\varrho` | <pur>`\varrho`</pur> | `KaTex:\varsigma` | <pur>`\varsigma`</pur> | `KaTex:\varphi` | <pur>`\varphi`</pur>
+`KaTex:\digamma` | <pur>`\digamma`</pur>
+<!--rehype:className=show-header left-align-->
+
+### 注解
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :-
+:- | :- | :- | :- | :-
+`KaTex:\cancel{5}` | <pur>`\cancel{5}`</pur> | `KaTex:\overbrace{a+b+c}^{\text{note}}` | <pur>`\overbrace{a+b+c}^{\text{note}}`</pur>
+`KaTex:\bcancel{5}` | <pur>`\bcancel{5}`</pur> | `KaTex:\underbrace{a+b+c}_{\text{note}}` | <pur>`\underbrace{a+b+c}_{\text{note}}`</pur>
+`KaTex:\xcancel{ABC}` | <pur>`\xcancel{ABC}`</pur> | `KaTex:\not =` | <pur>`\not =`</pur>
+`KaTex:\sout{abc}` | <pur>`\sout{abc}`</pur> | `KaTex:\boxed{\pi=\frac c d}` | <pur>`\boxed{\pi=\frac c d}`</pur>
+`KaTex:\$a_{\angl n}` _<red>MD语法冲突</red>_ | <pur>`$a_{\angl n}`</pur> | `KaTex:a_\angln` | <pur>`a_\angln`</pur>
+`KaTex:\phase{-78^\circ}` | <pur>`\phase{-78^\circ}`</pur>
+
+<pur>\tag{hi} x+y^{2x}</pur>
+
+```KaTex
+\tag{hi} x+y^{2x}
+```
+
+<pur>\tag*{hi} x+y^{2x}</pur>
+
+```KaTex
+\tag*{hi} x+y^{2x}
+```
+
+### 垂直布局
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTex:x_n` | <pur>`x_n`</pur> | `KaTex:\stackrel{!}{=}` | <pur>`\stackrel{!}{=}`</pur> | `KaTex:a \atop b` | `a \atop b`
+`KaTex:e^x` | <pur>`e^x`</pur> | `KaTex:\overset{!}{=}` | <pur>`\overset{!}{=}`</pur> | `KaTex:a\raisebox{0.25em}{$b$}c` | `a\raisebox{0.25em}{$b$}c`
+`KaTex:_u^o` | <pur>`_u^o`</pur> | `KaTex:\underset{!}{=}` | <pur>`\underset{!}{=}`</pur> | `KaTex:a+\left(\vcenter{\hbox{$\frac{\frac a b}c$}}\right)` | `a+\left(\vcenter{\hbox{$\frac{\frac a b}c$}}\right)`
+`KaTex:\sum_{\substack{0<i<m\\0<j<n}}` | <pur>`\sum_{\substack{0<i<m\\0<j<n}}`</pur>
+
+### 重叠和间距
+<!--rehype:wrap-class=col-span-3-->
+
+ :- | :- | :- | :-
+ :- | :- | :- | :-
+`KaTex:{=}\mathllap{/\,}` <pur>{=}\mathllap{/\,}</pur> | `KaTex:\left(x^{\smash{2}}\right)` | <pur>\left(x^{\smash{2}}\right)</pur>
+`KaTex:\mathrlap{\,/}{=}` <pur>\mathrlap{\,/}{=}</pur> | `KaTex:\sqrt{\smash[b]{y}}` | <pur>\sqrt{\smash[b]{y}}</pur>
+
+`\sum_{\mathclap{1\le i\le j\le n}} x_{ij}`
+
+```KaTex
+\sum_{\mathclap{1\le i\le j\le n}} x_{ij}
+```
+
+### `KaTex:\LaTeX` math constructs
+<!--rehype:wrap-class=col-span-3-->
+
+预览 | 方法 | 预览 | 方法 | 预览 | 方法
+:- | :- | :- | :- | :- | :-
+| `KaTex:\frac{abc}{xyz}`   | <pur>`\frac{abc}{xyz}`</pur>      | `KaTex:\overline{abc}`     | <pur>`\overline{abc}`</pur>      | `KaTex:\overrightarrow{abc}`     | <pur>`\overrightarrow{abc}`</pur>      |
+| `KaTex:f'`                | <pur>`f'`</pur>                   | `KaTex:\underline{abc}`    | <pur>`\underline{abc}`</pur>     | `KaTex:\overleftarrow{abc}`      | <pur>`\overleftarrow{abc}`</pur>       |
+| `KaTex:\sqrt{abc}`        | <pur>`\sqrt{abc}`</pur>           | `KaTex:\widehat{abc}`      | <pur>`\widehat{abc}`</pur>       | `KaTex:\overbrace{abc}`          | <pur>`\overbrace{abc}`</pur>           |
+| `KaTex:\sqrt[n]{abc}`     | <pur>`\sqrt[n]{abc}`</pur>        | `KaTex:\widetilde{abc}`    | <pur>`\widetilde{abc}`</pur>     | `KaTex:\underbrace{abc}`         | <pur>`\underbrace{abc}`</pur>          |
 
 ### 分隔符 Delimiters
 <!--rehype:wrap-class=col-span-3-->
@@ -105,6 +218,335 @@ Supported Functions
 | `KaTeX:\lang` `KaTeX:\rang` | <pur>`\lang` `\rang`<pur>   | `KaTeX:\lt \gt` | <pur>`\lt \gt`</pur>                 | `KaTex:⟦ ⟧` | <pur>`⟦ ⟧`</pur>  | `KaTex:\llbracket \rrbracket` | <pur>`\llbracket` `\rrbracket`</pur> | `KaTex:\lBrace \rBrace` | <pur>`\lBrace \rBrace`</pur> |
 <!--rehype:className=show-header left-align-->
 
+可以使用一对表达式 `\left` `KaTeX:s_1` 和 `\right` `KaTeX:s_2` 来将分隔符 `KaTeX:s_1` 和 `KaTeX:s_2` 的高度与其内容的高度进行匹配，例如:
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+| `KaTeX:\left\|` | `KaTeX:expr` | `KaTeX:\right\|` | | `KaTeX:\left\{` |`KaTeX:expr` | `KaTeX:\right\}` | | `KaTeX:\left\Vert`| `KaTeX:expr` | `KaTeX:\right.` |
+
+### 可变大小的符号
+<!--rehype:wrap-class=col-span-3-->
+
+预览 | 方法 | 预览 | 方法 | 预览 | 方法 | 预览| 方法 | 预览 | 方法
+:- | :- | :- | :- | :- | :- | :- | :- | :- | :-
+| `KaTeX:\sum`      | <pur>`\sum`</pur>         | `KaTeX:\int`  | <pur>`\int`</pur>         |  `KaTeX:\biguplus`    | <pur>`\biguplus`</pur>        | `KaTeX:\bigoplus`     | <pur>`\bigoplus`</pur>        |  `KaTeX:\bigvee`      | <pur>`\bigvee`</pur>          |
+| `KaTeX:\prod`     | <pur>`\prod`</pur>        | `KaTeX:\oint` | <pur>`\oint`</pur>        |  `KaTeX:\bigcap`      | <pur>`\bigcap`</pur>          | `KaTeX:\bigotimes`    | <pur>`\bigotimes`</pur>       |  `KaTeX:\bigwedge`    | <pur>`\bigwedge`</pur>        |
+| `KaTeX:\coprod`   | <pur>`\coprod`</pur>      | `KaTeX:\iint` | <pur>`\iint`</pur>        |  `KaTeX:\bigcup`      | <pur>`\bigcup`</pur>          | `KaTeX:\bigodot`      | <pur>`\bigodot`</pur>         |  `KaTeX:\bigodot`     | <pur>`\bigodot`</pur>         |
+<!--rehype:className=show-header left-align-->
+
+### 标准函数名称
+<!--rehype:wrap-class=col-span-3-->
+
+预览 | 方法 | 预览 | 方法 | 预览 | 方法 | 预览| 方法
+:- | :- | :- | :- | :- | :- | :- | :-
+| `KaTeX:\arccos`   | <pur>`\arccos`</pur>  | `KaTeX:\arcsin`   | <pur>`\arcsin`</pur>  | `KaTeX:\arcsin`   | <pur>`\arcsin`</pur>  | `KaTeX:\arg`      | <pur>`\arg`</pur>     |
+| `KaTeX:\cos`      | <pur>`\cos`</pur>     | `KaTeX:\cosh`     | <pur>`\cosh`</pur>    | `KaTeX:\cot`      | <pur>`\cot`</pur>     | `KaTeX:\coth`     | <pur>`\coth`</pur>    |
+| `KaTeX:\csc`      | <pur>`\csc`</pur>     | `KaTeX:\deg`      | <pur>`\deg`</pur>     | `KaTeX:\det`      | <pur>`\det`</pur>     | `KaTeX:\dim`      | <pur>`\dim`</pur>     |
+| `KaTeX:\exp`      | <pur>`\exp`</pur>     | `KaTeX:\gcd`      | <pur>`\gcd`</pur>     | `KaTeX:\hom`      | <pur>`\hom`</pur>     | `KaTeX:\inf`      | <pur>`\inf`</pur>     |
+| `KaTeX:\ker`      | <pur>`\ker`</pur>     | `KaTeX:\lg`       | <pur>`\lg`</pur>      | `KaTeX:\lim`      | <pur>`\lim`</pur>     | `KaTeX:\liminf`   | <pur>`\liminf`</pur>  |
+| `KaTeX:\limsup`   | <pur>`\limsup`</pur>  | `KaTeX:\ln`       | <pur>`\ln`</pur>      | `KaTeX:\log`      | <pur>`\log`</pur>     | `KaTeX:\max`      | <pur>`\max`</pur>     |
+| `KaTeX:\min`      | <pur>`\min`</pur>     | `KaTeX:\Pr`       | <pur>`\Pr`</pur>      | `KaTeX:\sec`      | <pur>`\sec`</pur>     | `KaTeX:\sin`      | <pur>`\sin`</pur>     |
+| `KaTeX:\sinh`     | <pur>`\sinh`</pur>    | `KaTeX:\sup`      | <pur>`\sup`</pur>     | `KaTeX:\tan`      | <pur>`\tan`</pur>     | `KaTeX:\tanh`     | <pur>`\tanh`</pur>    |
+<!--rehype:className=show-header left-align-->
+
+函数名应该用罗马字体，而不是斜体，例如:
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+| Correct: |  <pur>`\tan(at-n\pi)`</pur> | `KaTeX:\rightarrow` | `KaTeX:\tan(at-n\pi)`|
+| Incorrect: | <pur>`tan(at-n\pi)`</pur> | `katex:\rightarrow` | `KaTeX:tan(at-n\pi)` |
+<!--rehype:className=left-align-->
+
+### 逻辑与集合论
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTeX:\forall`  | <pur>`\forall`</pur> | `KaTeX:\complement` | <pur>`\complement`</pur> | `KaTeX:\therefore` | <pur>`\therefore`</pur> | `KaTeX:\emptyset` | <pur>`\emptyset`</pur>
+`KaTeX:\exists`  | <pur>`\exists`</pur> | `KaTeX:\subset` | <pur>`\subset`</pur> | `KaTeX:\because` | <pur>`\because`</pur> | `KaTeX:\empty` | <pur>`\empty`</pur>
+`KaTeX:\exist`   | <pur>`\exist`</pur> | `KaTeX:\supset` | <pur>`\supset`</pur> | `KaTeX:\mapsto` | <pur>`\mapsto`</pur> | `KaTeX:\varnothing` | <pur>`\varnothing`</pur>
+`KaTeX:\nexists` | <pur>`\nexists`</pur> | `KaTeX:\mid` | <pur>`\mid`</pur> | `KaTeX:\to` | <pur>`\to`</pur> | `KaTeX:\implies` | <pur>`\implies`</pur>
+`KaTeX:\in`      | <pur>`\in`</pur> | `KaTeX:\land` | <pur>`\land`</pur> | `KaTeX:\gets` | <pur>`\gets`</pur> | `KaTeX:\impliedby` | <pur>`\impliedby`</pur>
+`KaTeX:\isin`    | <pur>`\isin`</pur> | `KaTeX:\lor` | <pur>`\lor`</pur> | `KaTeX:\leftrightarrow` | <pur>`\leftrightarrow`</pur> | `KaTeX:\iff` | <pur>`\iff`</pur>
+`KaTeX:\notin`   | <pur>`\notin`</pur> | `KaTeX:\ni` | <pur>`\ni`</pur> | `KaTeX:\notni` | <pur>`\notni`</pur> | `KaTeX:\neg` `KaTeX:\lnot` | <pur>`\neg`</pur> 或 <pur>`\lnot`</pur>
+<!--rehype:className=left-align-->
+
+---
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTeX:\Set{ x \| x<\frac 1 2 }` | <pur>\Set{ x \| x<\frac 1 2 }</pur> | `KaTeX:\set{x\|x<5}` | <pur>\set{x\|x<5}</pur>
+
+### 宏指令
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTeX:\def\foo{x^2} \foo + \foo` | <pur>\def\foo{x^2} \foo + \foo</pur> | `KaTeX:\gdef\bar#1{#1^2} \bar{y} + \bar{y}` | <pur>\gdef\bar#1{#1^2} \bar{y} + \bar{y}</pur>
+<!--rehype:className=left-align-->
+
+### 特殊符号
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTeX:\bra{\phi}` | <pur>\bra{\phi}</pur> | `KaTeX:\ket{\psi}` | <pur>\ket{\psi}</pur> | `KaTeX:\braket{\phi\|\psi}` | <pur>`\braket{\phi\|\psi}`</pur>
+`KaTeX:\Bra{\phi}` | <pur>\Bra{\phi}</pur> | `KaTeX:\Ket{\psi}` | <pur>\Ket{\psi}</pur> | `KaTeX:\Braket{ ϕ \| \frac{∂^2}{∂ t^2} \| ψ }` | <pur>`\Braket{ ϕ \| \frac{∂^2}{∂ t^2} \| ψ }`</pur>
+<!--rehype:className=left-align-->
+
+运算符
+---
+
+### 数学运算符
+<!--rehype:wrap-class=col-span-3 row-span-2-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:\arcsin` | <pur>`\arcsin`</pur> | `KaTex:\cosec` | <pur>`\cosec`</pur> | `KaTex:\deg` | <pur>`\deg`</pur> | `KaTex:\sec` | <pur>`\sec`</pur>
+`KaTex:\arccos` | <pur>`\arccos`</pur> | `KaTex:\cosh` | <pur>`\cosh`</pur> | `KaTex:\dim` | <pur>`\dim`</pur> | `KaTex:\sin` | <pur>`\sin`</pur>
+`KaTex:\arctan` | <pur>`\arctan`</pur> | `KaTex:\cot` | <pur>`\cot`</pur> | `KaTex:\exp` | <pur>`\exp`</pur> | `KaTex:\sinh` | <pur>`\sinh`</pur>
+`KaTex:\arctg` | <pur>`\arctg`</pur> | `KaTex:\cotg` | <pur>`\cotg`</pur> | `KaTex:\hom` | <pur>`\hom`</pur> | `KaTex:\sh` | <pur>`\sh`</pur>
+`KaTex:\arcctg` | <pur>`\arcctg`</pur> | `KaTex:\coth` | <pur>`\coth`</pur> | `KaTex:\ker` | <pur>`\ker`</pur> | `KaTex:\tan` | <pur>`\tan`</pur>
+`KaTex:\arg` | <pur>`\arg`</pur> | `KaTex:\csc` | <pur>`\csc`</pur> | `KaTex:\lg` | <pur>`\lg`</pur> | `KaTex:\tanh` | <pur>`\tanh`</pur>
+`KaTex:\ch` | <pur>`\ch`</pur> | `KaTex:\ctg` | <pur>`\ctg`</pur> | `KaTex:\ln` | <pur>`\ln`</pur> | `KaTex:\tg` | <pur>`\tg`</pur>
+`KaTex:\cos` | <pur>`\cos`</pur> | `KaTex:\cth` | <pur>`\cth`</pur> | `KaTex:\log` | <pur>`\log`</pur> | `KaTex:\th` | <pur>`\th`</pur>
+`KaTex:\operatorname{f}` | <pur>`\operatorname{f}`</pur> |
+`KaTex:\argmax` | <pur>`\argmax`</pur> | `KaTex:\injlim` | <pur>`\injlim`</pur> | `KaTex:\min` | <pur>`\min`</pur> | `KaTex:\varinjlim` | <pur>`\varinjlim`</pur>
+`KaTex:\argmin` | <pur>`\argmin`</pur> | `KaTex:\lim` | <pur>`\lim`</pur> | `KaTex:\plim` | <pur>`\plim`</pur> | `KaTex:\varliminf` | <pur>`\varliminf`</pur>
+`KaTex:\det` | <pur>`\det`</pur> | `KaTex:\liminf` | <pur>`\liminf`</pur> | `KaTex:\Pr` | <pur>`\Pr`</pur> | `KaTex:\varlimsup` | <pur>`\varlimsup`</pur>
+`KaTex:\gcd` | <pur>`\gcd`</pur> | `KaTex:\limsup` | <pur>`\limsup`</pur> | `KaTex:\projlim` | <pur>`\projlim`</pur> | `KaTex:\varprojlim` | <pur>`\varprojlim`</pur>
+`KaTex:\inf` | <pur>`\inf`</pur> | `KaTex:\max` | <pur>`\max`</pur> | `KaTex:\sup` | <pur>`\sup`</pur> | `KaTex:\operatorname*{f}` | <pur>`\operatorname*{f}`</pur>
+`KaTex:\operatornamewithlimits{f}` | <pur>`\operatornamewithlimits{f}`</pur> |
+<!--rehype:className=left-align-->
+
+### 大运算符
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:\sum` | <pur>`\sum`</pur> | `KaTex:\prod` | <pur>`\prod`</pur> | `KaTex:\bigotimes` | <pur>`\bigotimes`</pur> | `KaTex:\bigvee` | <pur>`\bigvee`</pur>
+`KaTex:\int` | <pur>`\int`</pur> | `KaTex:\coprod` | <pur>`\coprod`</pur> | `KaTex:\bigoplus` | <pur>`\bigoplus`</pur> | `KaTex:\bigwedge` | <pur>`\bigwedge`</pur>
+`KaTex:\iint` | <pur>`\iint`</pur> | `KaTex:\intop` | <pur>`\intop`</pur> | `KaTex:\bigodot` | <pur>`\bigodot`</pur> | `KaTex:\bigcap` | <pur>`\bigcap`</pur>
+`KaTex:\iiint` | <pur>`\iiint`</pur> | `KaTex:\smallint` | <pur>`\smallint`</pur> | `KaTex:\biguplus` | <pur>`\biguplus`</pur> | `KaTex:\bigcup` | <pur>`\bigcup`</pur>
+`KaTex:\oint` | <pur>`\oint`</pur> | `KaTex:\oiint` | <pur>`\oiint`</pur> | `KaTex:\oiiint` | <pur>`\oiiint`</pur> | `KaTex:\bigsqcup` | <pur>`\bigsqcup`</pur>
+<!--rehype:className=left-align-->
+
+### 分数和二项式
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTex:\frac{a}{b}` | <pur>`\frac{a}{b}`</pur> | `KaTex:\tfrac{a}{b}` | <pur>`\tfrac{a}{b}`</pur>
+`KaTex:{a \over b}` | <pur>`{a \over b}`</pur> | `KaTex:\dfrac{a}{b}` | <pur>`\dfrac{a}{b}`</pur>
+`KaTex:\genfrac ( ] {2pt}{1}a{a+1}` | <pur>`\genfrac ( ] {2pt}{1}a{a+1}`</pur> | `KaTex:{a \above{2pt} b+1}` | <pur>`{a \above{2pt} b+1}`</pur>
+`KaTex:a/b` | <pur>`a/b`</pur> | `KaTex:\cfrac{a}{1 + \cfrac{1}{b}}` | <pur>`\cfrac{a}{1 + \cfrac{1}{b}}`</pur>
+<!--rehype:className=left-align-->
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTex:\binom{n}{k}` | <pur>`\binom{n}{k}`</pur> | `KaTex:\dbinom{n}{k}` | <pur>`\dbinom{n}{k}`</pur>
+`KaTex:{n\brace k}` | <pur>`{n\brace k}`</pur> | `KaTex:{n \choose k}` | <pur>`{n \choose k}`</pur>
+`KaTex:\tbinom{n}{k}` | <pur>`\tbinom{n}{k}`</pur> | `KaTex:{n\brack k}` | <pur>`{n\brack k}`</pur>
+<!--rehype:className=left-align-->
+
+### \sqrt
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTex:\sqrt{x}` | <pur>`\sqrt{x}`</pur> | `KaTex:\sqrt[3]{x}` | <pur>`\sqrt[3]{x}`</pur>
+<!--rehype:className=left-align-->
+
+### 二元运算符
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:+` | <pur>`+`</pur> | `KaTex:\cdot` | <pur>`\cdot`</pur> | `KaTex:\gtrdot` | <pur>`\gtrdot`</pur> | `KaTex:x \pmod a` | <pur>`x \pmod a`</pur>
+`KaTex:-` | <pur>`-`</pur> | `KaTex:\cdotp` | <pur>`\cdotp`</pur> | `KaTex:\intercal` | <pur>`\intercal`</pur> | `KaTex:x \pod a` | <pur>`x \pod a`</pur>
+`KaTex:/` | <pur>`/`</pur> | `KaTex:\centerdot` | <pur>`\centerdot`</pur> | `KaTex:\land` | <pur>`\land`</pur> | `KaTex:\rhd` | <pur>`\rhd`</pur>
+`KaTex:*` | <pur>`*`</pur> | `KaTex:\circ` | <pur>`\circ`</pur> | `KaTex:\leftthreetimes` | <pur>`\leftthreetimes`</pur> | `KaTex:\rightthreetimes` | <pur>`\rightthreetimes`</pur>
+`KaTex:\amalg` | <pur>`\amalg`</pur> | `KaTex:\circledast` | <pur>`\circledast`</pur> | `KaTex:\ldotp` | <pur>`\ldotp`</pur> | `KaTex:\rtimes` | <pur>`\rtimes`</pur>
+`KaTex:\And` | <pur>`\And`</pur> | `KaTex:\circledcirc` | <pur>`\circledcirc`</pur> | `KaTex:\lor` | <pur>`\lor`</pur> | `KaTex:\setminus` | <pur>`\setminus`</pur>
+`KaTex:\ast` | <pur>`\ast`</pur> | `KaTex:\circleddash` | <pur>`\circleddash`</pur> | `KaTex:\lessdot` | <pur>`\lessdot`</pur> | `KaTex:\smallsetminus` | <pur>`\smallsetminus`</pur>
+`KaTex:\barwedge` | <pur>`\barwedge`</pur> | `KaTex:\Cup` | <pur>`\Cup`</pur> | `KaTex:\lhd` | <pur>`\lhd`</pur> | `KaTex:\sqcap` | <pur>`\sqcap`</pur>
+`KaTex:\bigcirc` | <pur>`\bigcirc`</pur> | `KaTex:\cup` | <pur>`\cup`</pur> | `KaTex:\ltimes` | <pur>`\ltimes`</pur> | `KaTex:\sqcup` | <pur>`\sqcup`</pur>
+`KaTex:\bmod` | <pur>`\bmod`</pur> | `KaTex:\curlyvee` | <pur>`\curlyvee`</pur> | `KaTex:x\mod a` | <pur>`x\mod a`</pur> | `KaTex:\times` | <pur>`\times`</pur>
+`KaTex:\boxdot` | <pur>`\boxdot`</pur> | `KaTex:\curlywedge` | <pur>`\curlywedge`</pur> | `KaTex:\mp` | <pur>`\mp`</pur> | `KaTex:\unlhd` | <pur>`\unlhd`</pur> |
+`KaTex:\boxminus` | <pur>`\boxminus`</pur> | `KaTex:\div` | <pur>`\div`</pur> | `KaTex:\odot` | <pur>`\odot`</pur> | `KaTex:\unrhd` | <pur>`\unrhd`</pur>
+`KaTex:\boxplus` | <pur>`\boxplus`</pur> | `KaTex:\divideontimes` | <pur>`\divideontimes`</pur> | `KaTex:\ominus` | <pur>`\ominus`</pur> | `KaTex:\uplus` | <pur>`\uplus`</pur>
+`KaTex:\boxtimes` | <pur>`\boxtimes`</pur> | `KaTex:\dotplus` | <pur>`\dotplus`</pur> | `KaTex:\oplus` | <pur>`\oplus`</pur> | `KaTex:\vee` | <pur>`\vee`</pur>
+`KaTex:\bullet` | <pur>`\bullet`</pur> | `KaTex:\doublebarwedge` | <pur>`\doublebarwedge`</pur> | `KaTex:\otimes` | <pur>`\otimes`</pur> | `KaTex:\veebar` | <pur>`\veebar`</pur>
+`KaTex:\Cap` | <pur>`\Cap`</pur> | `KaTex:\doublecap` | <pur>`\doublecap`</pur> | `KaTex:\oslash` | <pur>`\oslash`</pur> | `KaTex:\wedge` | <pur>`\wedge`</pur>
+`KaTex:\cap` | <pur>`\cap`</pur> | `KaTex:\doublecup` | <pur>`\doublecup`</pur> | `KaTex:\pm` | <pur>`\pm`</pur> | `KaTex:\plusmn` | <pur>`\plusmn`</pur>
+`KaTex:\wr` | <pur>`\wr`</pur>` |
+<!--rehype:className=left-align-->
+
+关系
+---
+
+### 关系
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:=` | <pur>`=`</pur> | `KaTex:\doteqdot` | <pur>`\doteqdot`</pur> | `KaTex:\lessapprox` | <pur>`\lessapprox`</pur> | `KaTex:\smile` | <pur>`\smile`</pur>
+`KaTex:<` | <pur>`<`</pur> | `KaTex:\eqcirc` | <pur>`\eqcirc`</pur> | `KaTex:\lesseqgtr` | <pur>`\lesseqgtr`</pur> | `KaTex:\sqsubset` | <pur>`\sqsubset`</pur>
+`KaTex:>` | <pur>`>`</pur> | `KaTex:\eqcolon` | <pur>`\eqcolon`</pur> 或 <pur>`\minuscolon`</pur> | `KaTex:\lesseqqgtr` | <pur>`\lesseqqgtr`</pur> | `KaTex:\sqsubseteq` | <pur>`\sqsubseteq`</pur>
+`KaTex::` | <pur>`:`</pur> | `KaTex:\Eqcolon` | <pur>`\Eqcolon`</pur> 或 <pur>`\minuscoloncolon`</pur> | `KaTex:\lessgtr` | <pur>`\lessgtr`</pur> | `KaTex:\sqsupset` | <pur>`\sqsupset`</pur>
+`KaTex:\approx` | <pur>`\approx`</pur> | `KaTex:\eqqcolon` | <pur>`\eqqcolon`</pur> 或 <pur>`\equalscolon`</pur> | `KaTex:\lesssim` | <pur>`\lesssim`</pur> | `KaTex:\sqsupseteq` | <pur>`\sqsupseteq`</pur>
+`KaTex:\approxcolon` | <pur>`\approxcolon`</pur> | `KaTex:\Eqqcolon` | <pur>`\Eqqcolon`</pur> 或 <pur>`\equalscoloncolon`</pur> | `KaTex:\ll` | <pur>`\ll`</pur> | `KaTex:\Subset` | <pur>`\Subset`</pur>
+`KaTex:\approxcoloncolon` | <pur>`\approxcoloncolon`</pur> | `KaTex:\eqsim` | <pur>`\eqsim`</pur> | `KaTex:\lll` | <pur>`\lll`</pur> | `KaTex:\subset` | <pur>`\subset`</pur> 或 <pur>`\sub`</pur>
+`KaTex:\approxeq` | <pur>`\approxeq`</pur> | `KaTex:\eqslantgtr` | <pur>`\eqslantgtr`</pur> | `KaTex:\llless` | <pur>`\llless`</pur> | `KaTex:\subseteq` | <pur>`\subseteq`</pur> 或 <pur>`\sube`</pur>
+`KaTex:\asymp` | <pur>`\asymp`</pur> | `KaTex:\eqslantless` | <pur>`\eqslantless`</pur> | `KaTex:\lt` | <pur>`\lt`</pur> | `KaTex:\subseteqq` | <pur>`\subseteqq`</pur>
+`KaTex:\backepsilon` | <pur>`\backepsilon`</pur> | `KaTex:\equiv` | <pur>`\equiv`</pur> | `KaTex:\mid` | <pur>`\mid`</pur> | `KaTex:\succ` | <pur>`\succ`</pur>
+`KaTex:\backsim` | <pur>`\backsim`</pur> | `KaTex:\fallingdotseq` | <pur>`\fallingdotseq`</pur> | `KaTex:\models` | <pur>`\models`</pur> | `KaTex:\succapprox` | <pur>`\succapprox`</pur>
+`KaTex:\backsimeq` | <pur>`\backsimeq`</pur> | `KaTex:\frown` | <pur>`\frown`</pur> | `KaTex:\multimap` | <pur>`\multimap`</pur> | `KaTex:\succcurlyeq` | <pur>`\succcurlyeq`</pur>
+`KaTex:\between` | <pur>`\between`</pur> | `KaTex:\ge` | <pur>`\ge`</pur> | `KaTex:\origof` | <pur>`\origof`</pur> | `KaTex:\succeq` | <pur>`\succeq`</pur>
+`KaTex:\bowtie` | <pur>`\bowtie`</pur> | `KaTex:\geq` | <pur>`\geq`</pur> | `KaTex:\owns` | <pur>`\owns`</pur> | `KaTex:\succsim` | <pur>`\succsim`</pur>
+`KaTex:\bumpeq` | <pur>`\bumpeq`</pur> | `KaTex:\geqq` | <pur>`\geqq`</pur> | `KaTex:\parallel` | <pur>`\parallel`</pur> | `KaTex:\Supset` | <pur>`\Supset`</pur>
+`KaTex:\Bumpeq` | <pur>`\Bumpeq`</pur> | `KaTex:\geqslant` | <pur>`\geqslant`</pur> | `KaTex:\perp` | <pur>`\perp`</pur> | `KaTex:\supset` | <pur>`\supset`</pur>
+`KaTex:\circeq` | <pur>`\circeq`</pur> | `KaTex:\gg` | <pur>`\gg`</pur> | `KaTex:\pitchfork` | <pur>`\pitchfork`</pur> | `KaTex:\supseteq` | <pur>`\supseteq`</pur> 或 <pur>`\supe`</pur>
+`KaTex:\colonapprox` | <pur>`\colonapprox`</pur> | `KaTex:\ggg` | <pur>`\ggg`</pur> | `KaTex:\prec` | <pur>`\prec`</pur> | `KaTex:\supseteqq` | <pur>`\supseteqq`</pur>
+`KaTex:\Colonapprox` | <pur>`\Colonapprox`</pur> 或 <pur>`\coloncolonapprox`</pur> | `KaTex:\gggtr` | <pur>`\gggtr`</pur> | `KaTex:\precapprox` | <pur>`\precapprox`</pur> | `KaTex:\thickapprox` | <pur>`\thickapprox`</pur>
+`KaTex:\coloneq` | <pur>`\coloneq`</pur> 或 <pur>`\colonminus`</pur> | `KaTex:\gt` | <pur>`\gt`</pur> | `KaTex:\preccurlyeq` | <pur>`\preccurlyeq`</pur> | `KaTex:\thicksim` | <pur>`\thicksim`</pur>
+`KaTex:\Coloneq` | <pur>`\Coloneq`</pur> 或 <pur>`\coloncolonminus`</pur> | `KaTex:\gtrapprox` | <pur>`\gtrapprox`</pur> | `KaTex:\preceq` | <pur>`\preceq`</pur> | `KaTex:\trianglelefteq` | <pur>`\trianglelefteq`</pur>
+`KaTex:\coloneqq` | <pur>`\coloneqq`</pur> 或 <pur>`\colonequals`</pur> | `KaTex:\gtreqless` | <pur>`\gtreqless`</pur> | `KaTex:\precsim` | <pur>`\precsim`</pur> | `KaTex:\triangleq` | <pur>`\triangleq`</pur>
+`KaTex:\Coloneqq` | <pur>`\Coloneqq`</pur> 或 <pur>`\coloncolonequals`</pur> | `KaTex:\gtreqqless` | <pur>`\gtreqqless`</pur> | `KaTex:\propto` | <pur>`\propto`</pur> | `KaTex:\trianglerighteq` | <pur>`\trianglerighteq`</pur>
+`KaTex:\colonsim` | <pur>`\colonsim`</pur> | `KaTex:\gtrless` | <pur>`\gtrless`</pur> | `KaTex:\risingdotseq` | <pur>`\risingdotseq`</pur> | `KaTex:\varpropto` | <pur>`\varpropto`</pur>
+`KaTex:\Colonsim` | <pur>`\Colonsim`</pur> 或 <pur>`\coloncolonsim`</pur> | `KaTex:\gtrsim` | <pur>`\gtrsim`</pur> | `KaTex:\shortmid` | <pur>`\shortmid`</pur> | `KaTex:\vartriangle` | <pur>`\vartriangle`</pur>
+`KaTex:\cong` | <pur>`\cong`</pur> | `KaTex:\imageof` | <pur>`\imageof`</pur> | `KaTex:\shortparallel` | <pur>`\shortparallel`</pur> | `KaTex:\vartriangleleft` | <pur>`\vartriangleleft`</pur>
+`KaTex:\curlyeqprec` | <pur>`\curlyeqprec`</pur> | `KaTex:\in` | <pur>`\in`</pur> 或 <pur>`\isin`</pur> | `KaTex:\sim` | <pur>`\sim`</pur> | `KaTex:\vartriangleright` | <pur>`\vartriangleright`</pur>
+`KaTex:\curlyeqsucc` | <pur>`\curlyeqsucc`</pur> | `KaTex:\Join` | <pur>`\Join`</pur> | `KaTex:\simcolon` | <pur>`\simcolon`</pur> | `KaTex:\vcentcolon` | <pur>`\vcentcolon`</pur> 或 <pur>`\ratio`</pur>
+`KaTex:\dashv` | <pur>`\dashv`</pur> | `KaTex:\le` | <pur>`\le`</pur> | `KaTex:\simcoloncolon` | <pur>`\simcoloncolon`</pur> | `KaTex:\vdash` | <pur>`\vdash`</pur>
+`KaTex:\dblcolon` | <pur>`\dblcolon`</pur> 或 <pur>`\coloncolon`</pur> | `KaTex:\leq` | <pur>`\leq`</pur> | `KaTex:\simeq` | <pur>`\simeq`</pur> | `KaTex:\vDash` | <pur>`\vDash`</pur>
+`KaTex:\doteq` | <pur>`\doteq`</pur> | `KaTex:\leqq` | <pur>`\leqq`</pur> | `KaTex:\smallfrown` | <pur>`\smallfrown`</pur> | `KaTex:\Vdash` | <pur>`\Vdash`</pur>
+`KaTex:\Doteq` | <pur>`\Doteq`</pur> | `KaTex:\leqslant` | <pur>`\leqslant`</pur> | `KaTex:\smallsmile` | <pur>`\smallsmile`</pur> | `KaTex:\Vvdash` | <pur>`\Vvdash`</pur>
+<!--rehype:className=left-align-->
+
+### 否定关系
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :- | :- | :-
+`KaTex:\gnapprox` | <pur>`\gnapprox`</pur> | `KaTex:\ngeqslant` | <pur>`\ngeqslant`</pur> | `KaTex:\nsubseteq` | <pur>`\nsubseteq`</pur> | `KaTex:\precneqq` | <pur>`\precneqq`</pur>
+`KaTex:\gneq` | <pur>`\gneq`</pur> | `KaTex:\ngtr` | <pur>`\ngtr`</pur> | `KaTex:\nsubseteqq` | <pur>`\nsubseteqq`</pur> | `KaTex:\precnsim` | <pur>`\precnsim`</pur>
+`KaTex:\gneqq` | <pur>`\gneqq`</pur> | `KaTex:\nleq` | <pur>`\nleq`</pur> | `KaTex:\nsucc` | <pur>`\nsucc`</pur> | `KaTex:\subsetneq` | <pur>`\subsetneq`</pur>
+`KaTex:\gnsim` | <pur>`\gnsim`</pur> | `KaTex:\nleqq` | <pur>`\nleqq`</pur> | `KaTex:\nsucceq` | <pur>`\nsucceq`</pur> | `KaTex:\subsetneqq` | <pur>`\subsetneqq`</pur>
+`KaTex:\gvertneqq` | <pur>`\gvertneqq`</pur> | `KaTex:\nleqslant` | <pur>`\nleqslant`</pur> | `KaTex:\nsupseteq` | <pur>`\nsupseteq`</pur> | `KaTex:\succnapprox` | <pur>`\succnapprox`</pur>
+`KaTex:\lnapprox` | <pur>`\lnapprox`</pur> | `KaTex:\nless` | <pur>`\nless`</pur> | `KaTex:\nsupseteqq` | <pur>`\nsupseteqq`</pur> | `KaTex:\succneqq` | <pur>`\succneqq`</pur>
+`KaTex:\lneq` | <pur>`\lneq`</pur> | `KaTex:\nmid` | <pur>`\nmid`</pur> | `KaTex:\ntriangleleft` | <pur>`\ntriangleleft`</pur> | `KaTex:\succnsim` | <pur>`\succnsim`</pur>
+`KaTex:\lneqq` | <pur>`\lneqq`</pur> | `KaTex:\notin` | <pur>`\notin`</pur> | `KaTex:\ntrianglelefteq` | <pur>`\ntrianglelefteq`</pur> | `KaTex:\supsetneq` | <pur>`\supsetneq`</pur>
+`KaTex:\lnsim` | <pur>`\lnsim`</pur> | `KaTex:\notni` | <pur>`\notni`</pur> | `KaTex:\ntriangleright` | <pur>`\ntriangleright`</pur> | `KaTex:\supsetneqq` | <pur>`\supsetneqq`</pur>
+`KaTex:\lvertneqq` | <pur>`\lvertneqq`</pur> | `KaTex:\nparallel` | <pur>`\nparallel`</pur> | `KaTex:\ntrianglerighteq` | <pur>`\ntrianglerighteq`</pur> | `KaTex:\varsubsetneq` | <pur>`\varsubsetneq`</pur>
+`KaTex:\ncong` | <pur>`\ncong`</pur> | `KaTex:\nprec` | <pur>`\nprec`</pur> | `KaTex:\nvdash` | <pur>`\nvdash`</pur> | `KaTex:\varsubsetneqq` | <pur>`\varsubsetneqq`</pur>
+`KaTex:\ne` | <pur>`\ne`</pur> | `KaTex:\npreceq` | <pur>`\npreceq`</pur> | `KaTex:\nvDash` | <pur>`\nvDash`</pur> | `KaTex:\varsupsetneq` | <pur>`\varsupsetneq`</pur>
+`KaTex:\neq` | <pur>`\neq`</pur> | `KaTex:\nshortmid` | <pur>`\nshortmid`</pur> | `KaTex:\nVDash` | <pur>`\nVDash`</pur> | `KaTex:\varsupsetneqq` | <pur>`\varsupsetneqq`</pur>
+`KaTex:\ngeq` | <pur>`\ngeq`</pur> | `KaTex:\nshortparallel` | <pur>`\nshortparallel`</pur> | `KaTex:\nVdash` | <pur>`\nVdash`</pur>
+`KaTex:\ngeqq` | <pur>`\ngeqq`</pur> | `KaTex:\nsim` | <pur>`\nsim`</pur> | `KaTex:\precnapprox` | <pur>`\precnapprox`</pur>
+
+`KaTex:\not =` <pur>`\not =`</pur>
+
+### 箭头
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTex:\circlearrowleft` | <pur>`\circlearrowleft`</pur> | `KaTex:\leftharpoonup` | <pur>`\leftharpoonup`</pur> | `KaTex:\rArr` | <pur>`\rArr`</pur>
+`KaTex:\circlearrowright` | <pur>`\circlearrowright`</pur> | `KaTex:\leftleftarrows` | <pur>`\leftleftarrows`</pur> | `KaTex:\rarr` | <pur>`\rarr`</pur>
+`KaTex:\curvearrowleft` | <pur>`\curvearrowleft`</pur> | `KaTex:\leftrightarrow` | <pur>`\leftrightarrow`</pur> | `KaTex:\restriction` | <pur>`\restriction`</pur>
+`KaTex:\curvearrowright` | <pur>`\curvearrowright`</pur> | `KaTex:\Leftrightarrow` | <pur>`\Leftrightarrow`</pur> | `KaTex:\rightarrow` | <pur>`\rightarrow`</pur>
+`KaTex:\Darr` | <pur>`\Darr`</pur> | `KaTex:\leftrightarrows` | <pur>`\leftrightarrows`</pur> | `KaTex:\Rightarrow` | <pur>`\Rightarrow`</pur>
+`KaTex:\dArr` | <pur>`\dArr`</pur> | `KaTex:\leftrightharpoons` | <pur>`\leftrightharpoons`</pur> | `KaTex:\rightarrowtail` | <pur>`\rightarrowtail`</pur>
+`KaTex:\darr` | <pur>`\darr`</pur> | `KaTex:\leftrightsquigarrow` | <pur>`\leftrightsquigarrow`</pur> | `KaTex:\rightharpoondown` | <pur>`\rightharpoondown`</pur>
+`KaTex:\dashleftarrow` | <pur>`\dashleftarrow`</pur> | `KaTex:\Lleftarrow` | <pur>`\Lleftarrow`</pur> | `KaTex:\rightharpoonup` | <pur>`\rightharpoonup`</pur>
+`KaTex:\dashrightarrow` | <pur>`\dashrightarrow`</pur> | `KaTex:\longleftarrow` | <pur>`\longleftarrow`</pur> | `KaTex:\rightleftarrows` | <pur>`\rightleftarrows`</pur>
+`KaTex:\downarrow` | <pur>`\downarrow`</pur> | `KaTex:\Longleftarrow` | <pur>`\Longleftarrow`</pur> | `KaTex:\rightleftharpoons` | <pur>`\rightleftharpoons`</pur>
+`KaTex:\Downarrow` | <pur>`\Downarrow`</pur> | `KaTex:\longleftrightarrow` | <pur>`\longleftrightarrow`</pur> | `KaTex:\rightrightarrows` | <pur>`\rightrightarrows`</pur>
+`KaTex:\downdownarrows` | <pur>`\downdownarrows`</pur> | `KaTex:\Longleftrightarrow` | <pur>`\Longleftrightarrow`</pur> | `KaTex:\rightsquigarrow` | <pur>`\rightsquigarrow`</pur>
+`KaTex:\downharpoonleft` | <pur>`\downharpoonleft`</pur> | `KaTex:\longmapsto` | <pur>`\longmapsto`</pur> | `KaTex:\Rrightarrow` | <pur>`\Rrightarrow`</pur>
+`KaTex:\downharpoonright` | <pur>`\downharpoonright`</pur> | `KaTex:\longrightarrow` | <pur>`\longrightarrow`</pur> | `KaTex:\Rsh` | <pur>`\Rsh`</pur>
+`KaTex:\gets` | <pur>`\gets`</pur> | `KaTex:\Longrightarrow` | <pur>`\Longrightarrow`</pur> | `KaTex:\searrow` | <pur>`\searrow`</pur>
+`KaTex:\Harr` | <pur>`\Harr`</pur> | `KaTex:\looparrowleft` | <pur>`\looparrowleft`</pur> | `KaTex:\swarrow` | <pur>`\swarrow`</pur>
+`KaTex:\hArr` | <pur>`\hArr`</pur> | `KaTex:\looparrowright` | <pur>`\looparrowright`</pur> | `KaTex:\to` | <pur>`\to`</pur>
+`KaTex:\harr` | <pur>`\harr`</pur> | `KaTex:\Lrarr` | <pur>`\Lrarr`</pur> | `KaTex:\twoheadleftarrow` | <pur>`\twoheadleftarrow`</pur>
+`KaTex:\hookleftarrow` | <pur>`\hookleftarrow`</pur> | `KaTex:\lrArr` | <pur>`\lrArr`</pur> | `KaTex:\twoheadrightarrow` | <pur>`\twoheadrightarrow`</pur>
+`KaTex:\hookrightarrow` | <pur>`\hookrightarrow`</pur> | `KaTex:\lrarr` | <pur>`\lrarr`</pur> | `KaTex:\Uarr` | <pur>`\Uarr`</pur>
+`KaTex:\iff` | <pur>`\iff`</pur> | `KaTex:\Lsh` | <pur>`\Lsh`</pur> | `KaTex:\uArr` | <pur>`\uArr`</pur>
+`KaTex:\impliedby` | <pur>`\impliedby`</pur> | `KaTex:\mapsto` | <pur>`\mapsto`</pur> | `KaTex:\uarr` | <pur>`\uarr`</pur>
+`KaTex:\implies` | <pur>`\implies`</pur> | `KaTex:\nearrow` | <pur>`\nearrow`</pur> | `KaTex:\uparrow` | <pur>`\uparrow`</pur>
+`KaTex:\Larr` | <pur>`\Larr`</pur> | `KaTex:\nleftarrow` | <pur>`\nleftarrow`</pur> | `KaTex:\Uparrow` | <pur>`\Uparrow`</pur>
+`KaTex:\lArr` | <pur>`\lArr`</pur> | `KaTex:\nLeftarrow` | <pur>`\nLeftarrow`</pur> | `KaTex:\updownarrow` | <pur>`\updownarrow`</pur>
+`KaTex:\larr` | <pur>`\larr`</pur> | `KaTex:\nleftrightarrow` | <pur>`\nleftrightarrow`</pur> | `KaTex:\Updownarrow` | <pur>`\Updownarrow`</pur>
+`KaTex:\leadsto` | <pur>`\leadsto`</pur> | `KaTex:\nLeftrightarrow` | <pur>`\nLeftrightarrow`</pur> | `KaTex:\upharpoonleft` | <pur>`\upharpoonleft`</pur>
+`KaTex:\leftarrow` | <pur>`\leftarrow`</pur> | `KaTex:\nrightarrow` | <pur>`\nrightarrow`</pur> | `KaTex:\upharpoonright` | <pur>`\upharpoonright`</pur>
+`KaTex:\Leftarrow` | <pur>`\Leftarrow`</pur> | `KaTex:\nRightarrow` | <pur>`\nRightarrow`</pur> | `KaTex:\upuparrows` | <pur>`\upuparrows`</pur>
+`KaTex:\leftarrowtail` | <pur>`\leftarrowtail`</pur> | `KaTex:\nwarrow` | <pur>`\nwarrow`</pur>
+`KaTex:\leftharpoondown` | <pur>`\leftharpoondown`</pur> | `KaTex:\Rarr` | <pur>`\Rarr`</pur>
+<!--rehype:className=left-align-->
+
+### 可扩展箭头
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTex:\xleftarrow{abc}` | <pur>`\xleftarrow{abc}`</pur> | `KaTex:\xrightarrow[under]{over}` | <pur>`\xrightarrow[under]{over}`</pur> |
+`KaTex:\xLeftarrow{abc}` | <pur>`\xLeftarrow{abc}`</pur> | `KaTex:\xRightarrow{abc}` | <pur>`\xRightarrow{abc}`</pur> |
+`KaTex:\xleftrightarrow{abc}` | <pur>`\xleftrightarrow{abc}`</pur> | `KaTex:\xLeftrightarrow{abc}` | <pur>`\xLeftrightarrow{abc}`</pur> |
+`KaTex:\xhookleftarrow{abc}` | <pur>`\xhookleftarrow{abc}`</pur> | `KaTex:\xhookrightarrow{abc}` | <pur>`\xhookrightarrow{abc}`</pur> |
+`KaTex:\xtwoheadleftarrow{abc}` | <pur>`\xtwoheadleftarrow{abc}`</pur> | `KaTex:\xtwoheadrightarrow{abc}` | <pur>`\xtwoheadrightarrow{abc}`</pur> |
+`KaTex:\xleftharpoonup{abc}` | <pur>`\xleftharpoonup{abc}`</pur> | `KaTex:\xrightharpoonup{abc}` | <pur>`\xrightharpoonup{abc}`</pur> |
+`KaTex:\xleftharpoondown{abc}` | <pur>`\xleftharpoondown{abc}`</pur> | `KaTex:\xrightharpoondown{abc}` | <pur>`\xrightharpoondown{abc}`</pur> |
+`KaTex:\xleftrightharpoons{abc}` | <pur>`\xleftrightharpoons{abc}`</pur> | `KaTex:\xrightleftharpoons{abc}` | <pur>`\xrightleftharpoons{abc}`</pur> |
+`KaTex:\xtofrom{abc}` | <pur>`\xtofrom{abc}`</pur> | `KaTex:\xmapsto{abc}` | <pur>`\xmapsto{abc}`</pur> |
+`KaTex:\xlongequal{abc}` | <pur>`\xlongequal{abc}`</pur> |
+
+符号和标点符号
+---
+
+### 符号和标点符号
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTex:% comment` | <pur>`% comment`</pur> | `KaTex:\dots` | <pur>`\dots`</pur> | `KaTex:\KaTeX` | <pur>`\KaTeX`</pur> |
+`KaTex:\%` | <pur>`\%`</pur> | `KaTex:\cdots` | <pur>`\cdots`</pur> | `KaTex:\LaTeX` | <pur>`\LaTeX`</pur> |
+`KaTex:\#` | <pur>`\#`</pur> | `KaTex:\ddots` | <pur>`\ddots`</pur> | `KaTex:\TeX` | <pur>`\TeX`</pur> |
+`KaTex:\&` | <pur>`\&`</pur> | `KaTex:\ldots` | <pur>`\ldots`</pur> | `KaTex:\nabla` | <pur>`\nabla`</pur> |
+`KaTex:\_` | <pur>`\_`</pur> | `KaTex:\vdots` | <pur>`\vdots`</pur> | `KaTex:\infty` | <pur>`\infty`</pur> |
+`KaTex:\text{\textunderscore}` | <pur>`\text{\textunderscore}`</pur> | `KaTex:\dotsb` | <pur>`\dotsb`</pur> | `KaTex:\infin` | <pur>`\infin`</pur> |
+`KaTex:\text{--}` | <pur>`\text{--}`</pur> | `KaTex:\dotsc` | <pur>`\dotsc`</pur> | `KaTex:\checkmark` | <pur>`\checkmark`</pur> |
+`KaTex:\text{\textendash}` | <pur>`\text{\textendash}`</pur> | `KaTex:\dotsi` | <pur>`\dotsi`</pur> | `KaTex:\dag` | <pur>`\dag`</pur> |
+`KaTex:\text{---}` | <pur>`\text{---}`</pur> | `KaTex:\dotsm` | <pur>`\dotsm`</pur> | `KaTex:\dagger` | <pur>`\dagger`</pur> |
+`KaTex:\text{\textemdash}` | <pur>`\text{\textemdash}`</pur> | `KaTex:\dotso` | <pur>`\dotso`</pur> | `KaTex:\text{\textdagger}` | <pur>`\text{\textdagger}`</pur> |
+`KaTex:\text{\textasciitilde}` | <pur>`\text{\textasciitilde}`</pur> | `KaTex:\sdot` | <pur>`\sdot`</pur> | `KaTex:\ddag` | <pur>`\ddag`</pur> |
+`KaTex:\text{\textasciicircum}` | <pur>`\text{\textasciicircum}`</pur> | `KaTex:\mathellipsis` | <pur>`\mathellipsis`</pur> | `KaTex:\ddagger` | <pur>`\ddagger`</pur> |
+| <code>KaTex:\`</code> | <pur>\`</pur> | `KaTex:\text{\textellipsis}` | <pur>`\text{\textellipsis}`</pur> | `KaTex:\text{\textdaggerdbl}` | <pur>`\text{\textdaggerdbl}`</pur> |
+`KaTex:\text{\textquoteleft}` | <pur>`text{\textquoteleft}`</pur> | `KaTex:\Box` | <pur>`\Box`</pur> | `KaTex:\Dagger` | <pur>`\Dagger`</pur> |
+`KaTex:\lq` | <pur>`\lq`</pur> | `KaTex:\square` | <pur>`\square`</pur> | `KaTex:\angle` | <pur>`\angle`</pur> |
+`KaTex:\text{\textquoteright}` | <pur>`\text{\textquoteright}`</pur> | `KaTex:\blacksquare` | <pur>`\blacksquare`</pur> | `KaTex:\measuredangle` | <pur>`\measuredangle`</pur> |
+`KaTex:\rq` | <pur>`\rq`</pur> | `KaTex:\triangle` | <pur>`\triangle`</pur> | `KaTex:\sphericalangle` | <pur>`\sphericalangle`</pur> |
+`KaTex:\text{\textquotedblleft}` | <pur>`\text{\textquotedblleft}`</pur> | `KaTex:\triangledown` | <pur>`\triangledown`</pur> | `KaTex:\top` | <pur>`\top`</pur> |
+`KaTex:"` | <pur>`"`</pur> | `KaTex:\triangleleft` | <pur>`\triangleleft`</pur> | `KaTex:\bot` | <pur>`\bot`</pur> |
+`KaTex:\text{\textquotedblright}` | <pur>`\text{\textquotedblright}`</pur> | `KaTex:\triangleright` | <pur>`\triangleright`</pur> | `KaTex:\$` | <pur>`\$`</pur> |
+`KaTex:\colon` | <pur>`\colon`</pur> | `KaTex:\bigtriangledown` | <pur>`\bigtriangledown`</pur> | `KaTex:\text{\textdollar}` | <pur>`\text{\textdollar}`</pur> |
+`KaTex:\backprime` | <pur>`\backprime`</pur> | `KaTex:\bigtriangleup` | <pur>`\bigtriangleup`</pur> | `KaTex:\pounds` | <pur>`\pounds`</pur> |
+`KaTex:\prime` | <pur>`\prime`</pur> | `KaTex:\blacktriangle` | <pur>`\blacktriangle`</pur> | `KaTex:\mathsterling` | <pur>`\mathsterling`</pur> |
+`KaTex:\text{\textless}` | <pur>`\text{\textless}`</pur> | `KaTex:\blacktriangledown` | <pur>`\blacktriangledown`</pur> | `KaTex:\text{\textsterling}` | <pur>`\text{\textsterling}`</pur> |
+`KaTex:\text{\textgreater}` | <pur>`\text{\textgreater}`</pur> | `KaTex:\blacktriangleleft` | <pur>`\blacktriangleleft`</pur> | `KaTex:\yen` | <pur>`\yen`</pur> |
+`KaTex:\text{\textbar}` | <pur>`\text{\textbar}`</pur> | `KaTex:\blacktriangleright` | <pur>`\blacktriangleright`</pur> | `KaTex:\surd` | <pur>`\surd`</pur> |
+`KaTex:\text{\textbardbl}` | <pur>`\text{\textbardbl}`</pur> | `KaTex:\diamond` | <pur>`\diamond`</pur> | `KaTex:\degree` | <pur>`\degree`</pur> |
+`KaTex:\text{\textbraceleft}` | <pur>`\text{\textbraceleft}`</pur> | `KaTex:\Diamond` | <pur>`\Diamond`</pur> | `KaTex:\text{\textdegree}` | <pur>`\text{\textdegree}`</pur> |
+`KaTex:\text{\textbraceright}` | <pur>`\text{\textbraceright}`</pur> | `KaTex:\lozenge` | <pur>`\lozenge`</pur> | `KaTex:\mho` | <pur>`\mho`</pur> |
+`KaTex:\text{\textbackslash}` | <pur>`\text{\textbackslash}`</pur> | `KaTex:\blacklozenge` | <pur>`\blacklozenge`</pur> | `KaTex:\diagdown` | <pur>`\diagdown`</pur> |
+`KaTex:\text{\P}` | <pur>`\text{\P}`</pur> 或 <pur>`\P`</pur> | `KaTex:\star` | <pur>`\star`</pur> | `KaTex:\diagup` | <pur>`\diagup`</pur> |
+`KaTex:\text{\S}` | <pur>`\text{\S}`</pur> 或 <pur>`\S`</pur> | `KaTex:\bigstar` | <pur>`\bigstar`</pur> | `KaTex:\flat` | <pur>`\flat`</pur> |
+`KaTex:\text{\sect}` | <pur>`\text{\sect}`</pur> | `KaTex:\clubsuit` | <pur>`\clubsuit`</pur> | `KaTex:\natural` | <pur>`\natural`</pur> |
+`KaTex:\copyright` | <pur>`\copyright`</pur> | `KaTex:\clubs` | <pur>`\clubs`</pur> | `KaTex:\sharp` | <pur>`\sharp`</pur> |
+`KaTex:\circledR` | <pur>`\circledR`</pur> | `KaTex:\diamondsuit` | <pur>`\diamondsuit`</pur> | `KaTex:\heartsuit` | <pur>`\heartsuit`</pur> |
+`KaTex:\text{\textregistered}` | <pur>`\text{\textregistered}`</pur> | `KaTex:\diamonds` | <pur>`\diamonds`</pur> | `KaTex:\hearts` | <pur>`\hearts`</pur> |
+`KaTex:\circledS` | <pur>`\circledS`</pur> | `KaTex:\spadesuit` | <pur>`\spadesuit`</pur> | `KaTex:\spades` | <pur>`\spades`</pur> |
+`KaTex:\text{\textcircled a}` | <pur>`\text{\textcircled a}`</pur> | `KaTex:\maltese` | <pur>`\maltese`</pur> | `KaTex:\minuso` | <pur>`\minuso`</pur> |
+
 Environments
 ---
 
@@ -426,8 +868,43 @@ x = \begin{cases}
 \end{CD}
 ```
 
+样式、颜色、大小和字体
+---
+
+### Color 颜色
+
+:- | :-
+:- | :-
+`KaTex:\color{blue} F=ma` | <pur>`\color{blue} F=ma`</pur>
+`KaTex:\textcolor{blue}{F=ma}` | <pur>`\textcolor{blue}{F=ma}`</pur>
+`KaTex:\textcolor{#228B22}{F=ma}` | <pur>`\textcolor{#228B22}{F=ma}`</pur>
+`KaTex:\colorbox{aqua}{$F=ma$}` | <pur>`\colorbox{aqua}{$F=ma$}`</pur>
+`KaTex:\fcolorbox{red}{aqua}{$F=ma$}` | <pur>`\fcolorbox{red}{aqua}{$F=ma$}`</pur>
+
+### Font 字体
+<!--rehype:wrap-class=col-span-2-->
+
+:- | :- | :- | :- | :- | :-
+:- | :- | :- | :- | :- | :-
+`KaTex:\Huge AB` | <pur>`\Huge AB`</pur> | `KaTex:\normalsize AB` | <pur>`\normalsize AB`</pur> | `KaTex:\normalsize AB` | <pur>\normalsize AB</pur>
+`KaTex:\huge AB` | <pur>`\huge AB`</pur> | `KaTex:\huge AB` | <pur>`\huge AB`</pur> | `KaTex:\small AB` | <pur>\small AB</pur>
+`KaTex:\LARGE AB` | <pur>`\LARGE AB`</pur> | `KaTex:\LARGE AB` | <pur>`\LARGE AB`</pur> | `KaTex:\footnotesize AB` | <pur>\footnotesize AB</pur>
+`KaTex:\Large AB` | <pur>`\Large AB`</pur> | `KaTex:\Large AB` | <pur>`\Large AB`</pur> | `KaTex:\scriptsize AB` | <pur>\scriptsize AB</pur>
+`KaTex:\large AB` | <pur>`\large AB`</pur> | `KaTex:\large AB` | <pur>`\large AB`</pur> | `KaTex:\tiny AB` | <pur>\tiny AB</pur>
+
+### Style 样式
+<!--rehype:wrap-class=col-span-3-->
+
+:- | :- | :- | :-
+:- | :- | :- | :-
+`KaTex:\displaystyle\sum_{i=1}^n` | <pur>\displaystyle\sum_{i=1}^n</pur> | `KaTex:\textstyle\sum_{i=1}^n` | <pur>\textstyle\sum_{i=1}^n</pur>
+`KaTex:\scriptstyle x` | <pur>\scriptstyle x</pur> | `KaTex:\scriptscriptstyle x` | <pur>\scriptscriptstyle x</pur>
+`KaTex:\lim\limits_x` | <pur>\lim\limits_x</pur> | `KaTex:\lim\nolimits_x` | <pur>\lim\nolimits_x</pur>
+`KaTex:\verb!x^2!` | <pur>\verb!x^2!</pur>
+
 另见
 ----
 
 - [LaTeX 官网](https://www.latex-project.org/) _(latex-project.org)_
 - [KaTeX 官网](https://katex.org/) _(katex.org)_
+- [symbols.pdf](https://www.cmor-faculty.rice.edu/~heinken/latex/symbols.pdf) _(cmor-faculty.rice.edu)_

docs/lua.md

@@ -0,0 +1,870 @@
+Lua 备忘清单
+===
+
+包含最重要概念、函数、方法等的 [Lua](http://www.lua.org) 备忘单。 初学者的完整快速参考。
+
+入门
+---
+
+### 下载
+
+macos 使用 homebrew 下载
+
+```bash
+$ brew install lua
+```
+
+#### 其它下载方式
+
+* [下载地址](https://luabinaries.sourceforge.net/download.html) _(sourceforge.net)_
+
+```bash
+# 查看 lua 是否安装成功
+$ lua -v
+```
+
+### hello world
+
+```lua
+#!/usr/bin/env lua
+
+print("Hello World!")
+```
+
+#### 运行
+
+```bash
+$ lua ./hello.lua
+# 或者也可以像 bash 脚本一样
+$ chmod +x hello.lua
+./hello.lua
+```
+
+### 注释
+
+#### 单行注释
+
+```lua
+-- 以两个减号开始
+```
+
+#### 多行注释
+
+多行注释以 `--[[` 开头, 以 `]]` 结尾
+
+```lua
+--[[
+
+]]
+```
+<!--rehype:className=wrap-text -->
+
+### type() 函数
+
+使用 `type()` 函数可以判断变量或者值的类型
+
+```lua
+print(type(true)) -- boolean
+print(type(nil)) -- nil
+```
+
+### number
+
+Lua 默认只有一种 number 类型 double (双精度) 类型
+
+```lua
+print(10)
+print(0.3)
+print(2e + 10)
+```
+
+### string
+<!--rehype:wrap-class=row-span-2-->
+
+```lua
+-- 使用 ''
+local str1 = 'str1'
+-- 使用 ""
+local str2 = "str2"
+```
+
+#### `[[]]`
+
+使用 `[[]]` 跨行表示多个字符串
+
+```lua
+local html = [[
+<html>
+<head></head>
+<body>
+    <a href="https://www.twle.cn/">简单编程</a>
+</body>
+</html>
+]]
+print(html)
+```
+
+#### 字符串连接(`..`)
+
+```lua
+print("a" .. 'b')
+-- ab
+print(157 .. 428)
+-- 157428
+```
+
+#### 字符串长度(`#`)
+
+```lua
+print(#"string") -- 6
+```
+
+### table
+
+```lua
+local table = {}
+```
+
+#### 迭代 table
+
+默认的初始索引会从 1 开始
+
+```lua
+local array = { "apple", "pear", "orange", "grape" }
+
+print(array[1]) -- apple
+
+for k, v in pairs(array) do
+  print(k .. " : " .. v)
+end
+-- 1 : apple
+-- 2 : pear
+-- 3 : orange
+-- 4 : grape
+```
+
+#### 指定键
+
+```lua
+local array = {}
+array.one = "apple"
+array["two"] = "peach"
+
+print(array.one) -- apple
+print(array.two) -- peach
+```
+
+### 变量
+
+#### 默认值
+
+变量的默认值均是 nil
+
+```lua
+#!/usr/bin/env lua
+print(b) -- nil
+```
+
+#### 全局和局部变量
+
+Lua 中的变量全是全局变量，那怕是语句块或是函数里，除非用 local 显式声明为局部变量
+
+```lua
+#!/usr/bin/env lua
+function main()
+  local b = 12
+  a = 23
+end
+
+main()
+print(a) -- 23
+print(b) -- nil
+```
+
+<!--rehype:className=wrap-text -->
+
+### 赋值
+<!--rehype:wrap-class=row-span-2-->
+
+```lua
+a = "hello " .. "world" -- 改变 变量
+t.n = t.n + 1  -- 改变 table
+```
+
+---
+
+```lua
+-- 给多个变量赋值
+a, b = 10, 2*a  --> a=10; b=20
+```
+
+#### 交换变量
+
+```lua
+local x, y = 1, 3
+x, y = y, x
+
+print(x, y) -- 3, 1
+```
+
+---
+
+```lua
+local tab = {}
+tab.one = 2
+tab.two = 1
+
+tab["one"], tab["two"] = tab.two, tab.one
+
+print(tab.one, tab.two) -- 1    2
+```
+
+#### 赋值个数不一致
+
+* 如果变量个数**大于**值的个数，按变量个数补足 nil
+
+   ```lua
+   a, b, c = 1, 3
+   print(a,b,c)      --> 1   3   nil
+   ```
+
+* 如果变量个数**小于**值的个数，多余的值会被忽略
+
+   ```lua
+   a = 1
+   local a, b = a, a + 1, a + 2
+   print(a, b) --> 1   2
+   ```
+
+<!--rehype:className=style-round-->
+<!--rehype:className=wrap-text -->
+
+### 运算符
+
+:-   | :-
+:-   | :-
+\+   | 加法
+\-   | 减法
+\*   | 乘法
+\/   | 除法
+\%   | 取余，求出除法的余数
+\^   | 乘幂，计算次方
+\-   | 负号，取负值
+
+```lua
+local a, b = 4, 3
+
+print(a + b) -- 7
+print(a - b) -- 1
+print(a / b) -- 1.3333333333333
+print(a * b) -- 12
+print(a % b) -- 1
+print(a ^ b) -- 64.0
+```
+
+### 类型转换
+
+* 在算术运算中，string 类型会尝试自动转换为 number 时
+
+   ```lua
+   local a, b, c = "str", "1", "2"
+
+   -- print(a + b) -- error
+   print(b + c) -- 3
+   ```
+
+* number 类型使用 `..` 会自动转换为 string
+
+   ```lua
+   local a, b = 1, 2
+   print(type(a .. b))
+   ```
+
+* 其它方式的转换
+
+   ```lua
+   print(type(tostring(12))) -- string
+   print(type(tonumber("12"))) -- number
+   ```
+<!--rehype:className=style-round-->
+<!--rehype:className=wrap-text -->
+
+条件语句
+---
+
+### 运算符
+<!--rehype:wrap-class=row-span-2-->
+
+#### 关系运算符
+
+符号 | 含义
+:-  | :-
+`==`  | 等于
+`~=`  | 不等于
+`>`  | 大于
+`<`  | 小于
+`>=` | 大于等于
+`<=` | 小于等于
+<!--rehype:className=show-header-->
+
+```lua
+local a, b = 4, 3
+
+print(a < b) -- false
+print(a <= b) -- false
+print(a == b) -- false
+print(a ~= b) -- true
+print(a > b) -- true
+print(a >= b)-- true
+```
+
+#### 逻辑运算符
+
+符号 | 含义
+:-  | :-
+`and` | 逻辑与
+`or` | 逻辑或操作符
+`not` | 逻辑非操作符
+<!--rehype:className=show-header-->
+
+```lua
+local a, b = true, false
+print(a and b) -- false
+print(a and not b) -- true
+print(a or b) -- true
+```
+
+### while 循环
+
+```lua
+local num = 1
+while (num < 5) do
+  print("num 的值为:", num)
+  num = num + 1
+end
+```
+
+### if 语句
+<!--rehype:wrap-class=row-span-2-->
+
+```lua
+if(0)
+then
+    print("0 为 true")
+end
+```
+
+#### if .. elseif() .. else
+
+```lua
+local age = 27;
+
+if (age < 18)
+then
+  print("age 小于 18")
+elseif (age < 25)
+then
+  print("age 小于 25")
+elseif (age < 30)
+then
+  print("age 小于 30")
+else
+  print("age 大于 30")
+end
+
+print("age 的值为 :", age)
+```
+
+<red>注意: </red>`Lua` 中 `0` 为 `true`，但是 `Lua` 中的 `nil` 可以当作 `false`
+
+### for 循环
+
+```lua
+for i = 10, 1, -1 do
+  print(i)
+end
+```
+
+* lua 中的 for 循环从参数 1 变化到参数 2，每次变化以参数 3 为步长递增 i，并执行一次表达式
+* 参数三，是可选的，如果不指定，默认是 1
+* 参数二只会在一开始求值，其后不会再进行运算
+
+```lua
+local f = function(x)
+  print("in f(x) ")
+  return x * 2
+end
+
+for i = 1, f(5) do
+  print(i)
+end
+```
+<!--rehype:className=style-round wrap-text-->
+
+### repeat...until 循环
+
+```lua
+local num = 11
+repeat
+  print("num 的值为: ", num)
+  num = num + 1
+until (num > 10)
+-- num 的值为：11
+```
+
+`repeat...until` 循环的条件语句在当前循环结束后判断
+
+### break
+
+```lua
+local num = 11
+repeat
+  print("num 的值为: ", num)
+  num = num + 1
+  if (num > 15) then
+    break
+  end
+until (num > 20)
+```
+
+函数
+---
+
+### 初始化
+
+像变量一样，如果加上 `local` 那么就是局部函数
+
+```lua
+local function main()
+  print("这是一个局部函数")
+end
+```
+
+---
+
+你也可以将函数赋值给一个变量
+
+```lua
+local main = function()
+  print("这是一个局部函数")
+end
+```
+
+### 返回值
+
+```lua
+local function min(a, b)
+  if (a < b) then
+    return a
+  else
+    return b
+  end
+end
+
+print(min(1, 2))
+```
+
+### 参数
+
+```lua
+local p = function(res)
+  print("打印自己的风格", res)
+end
+
+local function main(a, b, p)
+  p(a + b)
+end
+
+main(1, 2, p)
+```
+
+### 多个返回值
+
+```lua
+local function min(a)
+  local sum = 0
+  local factorial = 1
+  for i, v in pairs(a) do
+    sum = sum + v
+    factorial = factorial * v
+  end
+  return sum, factorial
+end
+
+local a, b = min({ 1, 2, 3, 4 })
+
+print(a, b)
+```
+
+### 可变参数(`...`)
+
+```lua
+local function average(...)
+  local result = 0
+  local arg = { ... }
+  for i, v in ipairs(arg) do
+    result = result + v
+  end
+  return result / #arg
+end
+
+print("平均值为", average(1, 3, 5, 7, 9, 11))
+```
+
+字符串
+---
+
+### 字符串方法
+<!--rehype:wrap-class=col-span-2-->
+
+```lua
+-- 全部转换为大写
+string.upper("str") -- STR
+
+-- 全部转换为小写
+string.lower("STR") -- str
+
+-- 指定替换的字符串个数, 最后一个参数可选，默认是全部替换
+string.gsub("aaaa", "a", "b", 3) -- bbba  3
+string.gsub("Today is 29/01/2019", "%d%d/%d%d/%d%d%d%d", "good day.")
+-- Today is a good day. 1
+
+-- 查找第一个匹配的字符串，第三个参数可以提供开始查找的位置，默认从 1 开始
+-- 如果未找到，则返回 nil
+string.find("referference", "fer") -- 3   5
+string.find("Today is 29/01/2021", "%d%d/%d%d/%d%d%d%d") -- 10      19
+
+-- 字符串反转
+string.reverse("fw") -- wf
+
+-- 格式化字符串
+string.format("value:%c", 1) -- value:a
+
+-- 转换字符并拼接
+string.char(97,98,99,100) -- abcd
+
+-- 将字符转化为整数值。 int 用来指定某个字符，默认第一个字符
+string.byte("ABCD",4) -- 68
+
+-- 计算字符串长度
+string.len("abc") -- 3
+
+-- 返回字符串的 n 个拷贝
+string.rep("fw", n) -- fwfw
+
+-- 剪切字符串，第三个参数可选，默认是字符串长度
+string.sub("referference", 5, 6) -- rf
+```
+
+### 正则匹配
+
+:-   | :-
+:-   | :-
+`%a` | 与任何字母配对
+`%c` | 与任何控制符配对(例如\n)
+`%d` | 与任何数字配对
+`%l` | 与任何小写字母配对
+`%p` | 与任何标点(punctuation)配对
+`%s` | 与空白字符配对
+`%u` | 与任何大写字母配对
+`%w` | 与任何字母/数字配对
+`%x` | 与任何十六进制数配对
+`%z` | 与任何代表0的字符配对
+<!--rehype:className=left-align-->
+
+#### match
+
+第三个参数可选，默认从 1 开始。如果没有捕获组返回整个字符串，匹配失败返回 nil
+
+```lua
+string.match(
+  "I have 2 questions for you.", 
+  "(%d+) (%a+) "
+)  -- 2       questions
+```
+
+#### gmatch
+
+返回一个迭代器函数，每次调用迭代器函数，如果参数 pattern 描述的字符串没有找到，迭代函数返回nil
+
+```lua
+for world in string.gmatch("I have 2 questions for you.", "%a+") do
+  print(world)
+end
+-- I
+-- have
+-- questions
+-- for
+-- you
+```
+
+<!--rehype:className=style-round wrap-text-->
+
+数学方法
+---
+
+### 常用方法
+
+```lua
+-- 一个比任何数字都大的浮点数
+math.huge
+
+-- 最小值的整数
+math.mininteger
+
+local a = math.abs(-1) -- 1
+
+-- 返回不小于该数到最小整数
+local b = math.ceil(1.2) -- 2
+
+-- 返回不大于该数到最大整数
+local c = math.floor(1.2) -- 1
+
+-- 取余
+local d = math.fmod(9.9, 9) -- 0.9
+
+-- 返回最大值
+local g = math.max(1, 2, 3) -- 3
+-- 返回最小值
+local h = math.min(1, 2, 3) -- 1
+
+-- 返回参数的平方根
+local r = math.sqrt(3) -- 9
+```
+
+### 工具方法
+
+```lua
+-- 返回数字的类型，
+local l = math.type(1.2) -- float
+local m = math.type(3) -- integer
+local n = math.type("") -- nil
+
+-- 返回以指定底底对数
+local e = math.log(4, 2) -- 2
+
+-- 返回以 e 为底的自然对数
+local f = math.exp(2) -- 7.3890560989307
+
+-- 返回 [0,1) 区间内一致分布的浮点伪随机数
+math.random()
+-- 返回 [1, n] 区间内一致分布的整数伪随机数
+math.random(10)
+-- 返回 [n, m] 区间内一致分布的整数伪随机数
+math.random(10, 100)
+
+-- 无符号整数比较，参数一 小于 参数二 则返回 true，否则返回 false
+local o = math.ult(1, 10)
+
+-- 如果参数可以转换为一个整数，则返回该整数，否则返回 nil
+local p = math.tointeger("3") -- 3
+local q = math.tointeger(0.32) -- nil
+
+-- 返回整数和小数部分
+local i, j = math.modf(3.14) -- 3   0.14
+```
+
+### 其它方法
+
+```lua
+-- 圆周率
+math.pi -- 3.1415926535898
+
+-- 正弦方法（以下皆是以弧度表示）
+math.sin(math.pi / 2) -- 1.0
+-- 余弦方法
+math.cos(math.pi) -- -1.0
+-- 正切方法
+math.tan(math.pi / 4) -- 1.0
+
+-- 反正弦方法（以下皆是以弧度表示）
+math.acos(1.0) -- 0.0
+-- 反余弦方法
+math.acos(1.0) -- 1.5707963267949
+-- 反正弦方法
+math.atan(1.0) -- 0.78539816339745
+
+-- 角度转换为弧度
+math.rad(90) -- 1.5707963267949
+-- 弧度转换为角度
+math.deg(math.pi) -- 180.0
+```
+
+table
+---
+
+### 初始化数组
+
+初始化一个空数组
+
+```lua
+local array = {} 
+```
+
+---
+
+默认的数组索引从 1 开始
+
+```lua
+local array = { "a", "b", "c", "d" }
+array[5] = "e"
+
+for i = 1, 5 do
+  print(array[i])
+end
+```
+
+### 多维数组
+
+```lua
+local array = {
+  { "a", "b", "c" },
+  { "d", "e", "f" }
+}
+
+for i = 1, #array do
+  for j = 1, #array[i] do
+    print(array[i][j])
+  end
+end
+```
+
+### 初始化 table
+
+```lua
+local table = {}
+
+table.name = "fw"
+table.age = "18"
+table["sex"] = "boy"
+
+-- 获取 table 的长度
+
+print(#table) -- 3
+
+-- 如果想要删除一个 table，那么可以使用 nil 赋值
+table = nil
+print(table)
+```
+
+### table 方法
+<!--rehype:wrap-class=col-span-2-->
+
+```lua
+-- 用于连接 table 中指定的元素
+-- table.concat(table [, sep [, start [, end]]])
+local a = { "apple", "orange", "peach" }
+print(table.concat(a, "->", 2, 3)) -- orange->peach
+
+-- 用于向指定闻之插入元素。默认数组末尾
+-- table.insert(table, [pos,] value)
+local a = { "apple", "orange", "peach" }
+table.insert(a, 1, "pear")
+print(a[1]) -- pear
+
+-- table.move(a1,f,e,t[,a2])
+-- 表a1，a1下标开始位置f，a1下标结束位置e，t选择移动到的开始位置(如果没有a2，默认a1的下标)
+local array = { "a", "b", "c" }
+
+for i,v in pairs(table.move(array, 1, 3, 2)) do
+  print(v)
+end -- a a b c
+
+-- table.sort (table [, comp])
+-- 排序，默认是升序
+local array = { "a", "c", "b" }
+
+local f = function(a, b)
+  return string.byte(a) - string.byte(b) > 0
+end
+
+table.sort(array, f)
+for i, v in pairs(array) do
+  print(v)
+end -- c b a
+```
+
+### 迭代器
+
+#### 无状态的迭代器
+
+```lua
+function square(d,n)
+   if n < d
+   then
+      n = n + 1
+   return n, n*n
+   end
+end
+
+for i,n in square,5,0
+do
+   print(i,n)
+end
+```
+
+#### for 循环迭代器
+
+```lua
+for i, n in pairs({ 1, 2, 3, 4 }) do
+  print(i, n)
+end
+```
+
+模块
+---
+
+### 定义模块
+
+```lua
+-- a.lua
+local mod = {}
+
+mod.cool = "this is a mod"
+function mod.test()
+  print("this is a function")
+end
+
+return mod
+```
+
+### 导入模块
+
+一般我们可以直接使用 `require` 导入
+
+```lua
+-- b.lua
+-- local mod = require("a")
+-- 使用 pcall 确保 require 函数导入成功，失败则返回一个 false 状态
+local status, mod = pcall(require, "a")
+
+if not status then
+  return
+end
+
+mod.test()
+print(mod.cool)
+```
+
+### 私有函数
+
+```lua
+local mod = {}
+
+local function private()
+  print("private")
+end
+
+function mod.public()
+  private()
+end
+
+return mod
+```
+
+另见
+----
+
+* [Lua 官网](http://www.lua.org) _(lua.org)_
+* [luatos](https://wiki.luatos.com/luaGuide/introduction.html) _(wiki.luatos.com)_
+* [Lua 教程](https://www.twle.cn/l/yufei/lua53/lua-basic-index.html) _(twle.cn)_

docs/markdown.md

@@ -158,19 +158,27 @@ console.log("This is a block code")
 ### 表格
 
 ```markdown
-|     左栏   |     中间栏     |  右栏     |
-| ----------| ------------ | --------- |
-| 单元格 1   |   居中        |     $1600 |
-| 单元格 2   |   单元格 3    |       $12 |
+| 左栏     | 中间栏   | 右栏  |
+| -------- | -------- | ----- |
+| 单元格 1 | 居中     | $1600 |
+| 单元格 2 | 单元格 3 | $12   |
 ```
 
 简单的风格
 
 ```markdown
- 左栏 | 中间栏 | 右栏
-:-------: | :-------:|:-------:
-单元格 1   | 居中      |    $1600
-单元格 2   | 单元格 3  |     $12
+左栏     | 中间栏   | 右栏  
+-------- | -------- | -----
+单元格 1 | 居中     | $1600
+单元格 2 | 单元格 3 | $12 
+```
+
+增加 `:` 改变文字对齐方式
+
+```markdown
+左栏     |  中间栏  |   右栏 
+:------- | :------: | -----: 
+左对齐   |   居中   | 右对齐
 ```
 
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
@@ -222,18 +230,18 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 
 | 字符 | 转义 | 描述 |
 |------------|--------|-------------|
-| \\         | \\\\   | backslash 反斜杠             |
-| \`         | \\\`   | backtick 反引号              |
-| \*         | \\\*   | asterisk 星号                |
-| \_         | \\\_   | underscore 下划线            |
-| \{\}       | \\\{\} | curly braces 花括号          |
-| \[\]       | \\\[\] | square brackets 方括号       |
-| \(\)       | \\\(\) | parentheses 圆括号           |
-| \#         | \\\#   | hash mark 哈希标记           |
-| \+         | \\\+   | plus sign 加号               |
-| \-         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
-| \.         | \\\.   | dot 点                      |
-| \!         | \\\!   | exclamation mark 感叹号      |
+| <pur>\\</pur>         | \\\\   | backslash 反斜杠             |
+| <pur>\`</pur>         | \\\`   | backtick 反引号              |
+| <pur>\*</pur>         | \\\*   | asterisk 星号                |
+| <pur>\_</pur>         | \\\_   | underscore 下划线            |
+| <pur>\{\}</pur>       | \\\{\} | curly braces 花括号          |
+| <pur>\[\]</pur>       | \\\[\] | square brackets 方括号       |
+| <pur>\(\)</pur>       | \\\(\) | parentheses 圆括号           |
+| <pur>\#</pur>         | \\\#   | hash mark 哈希标记           |
+| <pur>\+</pur>         | \\\+   | plus sign 加号               |
+| <pur>\-</pur>         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
+| <pur>\.</pur>         | \\\.   | dot 点                      |
+| <pur>\!</pur>         | \\\!   | exclamation mark 感叹号      |
 
 ### 行内 HTML 元素
 <!--rehype:wrap-class=col-span-2-->

docs/mitmproxy.md

@@ -0,0 +1,282 @@
+Mitmproxy 备忘清单
+====
+
+[Mitmproxy](https://mitmproxy.org/) 是一个免费开源的交互式 HTTPS 代理。这是 mitmproxy 的快速参考备忘单。
+
+入门
+-----
+
+### 使用
+<!--rehype:wrap-class=col-span-2-->
+
+选项 | 范例 | 描述
+:--|--|--
+`-p`   | mitmproxy -p 8001                                  | 在端口 `8001` 上启动代理
+`-m`   | mitmproxy -p 8001 -m reverse:<http://127.0.0.1:4000> | `8001` 端口反向代理到4000端口
+`-w`   | mitmproxy -p 8001 -w traffic.mitm                  | 流到达时流向文件
+`-r`   | mitmproxy -r traffic.mitm                          | 从文件中读取流
+`-C`   | mitmproxy -C traffic.mitm                          | 从保存的文件重放客户端请求
+`-S`   | mitmproxy -S traffic.mitm                          | 从保存的文件重放服务器响应
+`-s`   | mitmproxy -s myScript.py                           | 执行脚本
+`-h`   | mitmproxy -h                                       | `mitmproxy` 快速帮助
+
+### 移动
+
+```markdown
+        k                 Ctrl b
+        ▲                   ▲▲
+        │                   ││
+h ◀ ─── + ─── ▶ l           ││ page
+        │                   ││
+        ▼                   ▼▼
+        j             Ctrl f / Space 
+```
+
+---
+
+:---|---
+:---|---
+`h`, `j`, `k` ,`l`   | 左、下、上、右
+`Ctrl` `b`           | 向上翻页
+`Space` / `Ctrl` `f` | 向下翻页
+`g` / `G`            | 转到开头/结尾
+`Arrows`             | 上下左右
+<!--rehype:className=shortcuts-->
+
+### 安装
+
+- [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
+- [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
+
+---
+
+```bash
+$ brew install mitmproxy # macOS
+```
+
+### 代理模式
+
+Argument | Effect
+:-- | --
+`-R REVERSE_PROXY`, `--reverse REVERSE_PROXY` | 将所有请求转发到上游 HTTP 服务器：`http[s]://host[:port]`。客户端始终可以通过 `HTTPS` 和 `HTTP` 进行连接，与服务器的连接由指定的方案决定
+`--socks` | 设置 `SOCKS5` 代理模式
+`-T`, `--transparent` | 设置透明代理模式
+`-U UPSTREAM_PROXY`, `--upstream UPSTREAM_PROXY` | 将所有请求转发到上游代理服务器：`http://host[:port]`
+<!--rehype:className=style-list-->
+
+### 流（视图）
+<!--rehype:wrap-class=row-span-2-->
+
+:---|---
+:---|---
+`A`        | 恢复所有拦截的流
+`D`        | 重复流
+`F`        | 设置焦点跟随
+`L`        | 从文件加载流
+`M`        | 切换查看标记流
+`S`        | 开始服务器回放
+`U`        | 取消设置所有标记
+`V`        | 还原对此流的更改
+`X`        | 杀死这个流
+`Z`        | 清除所有未显示的流
+`a`        | 恢复此拦截流
+`b`        | 将响应主体保存到文件
+`d`        | 从视图中删除流
+`e`        | 将此流导出到文件
+`f`        | 设置视图过滤器
+`m`        | 在此流程上切换标记
+`n`        | 创建新流程
+`o`        | 设置流列表顺序
+`r`        | 重播此流程
+`v`        | 反向流列表顺序
+`w`        | 将列出的流程保存到文件
+`\|`       | 在此流上运行脚本
+`Ctrl` `l` | 将剪辑发送到剪贴板
+<!--rehype:className=shortcuts-->
+
+### 常见的快捷键
+
+:---|---
+:---|---
+`q`     | 返回/退出
+`z`     | 清除流列表
+`:`     | 命令提示符
+`E`     | 查看事件日志
+`O`     | 查看选项
+`r`     | 重播此流程
+`Tab`   | 下一个
+`Enter` | 选择
+<!--rehype:className=shortcuts-->
+
+### 全局键绑定
+
+:---|---
+:---|---
+`-`            | 循环到下一个布局
+`?`            | 查看帮助
+`B`            | 启动附加的浏览器
+`C`            | 查看命令
+`I`            | 切换拦截
+`K`            | 查看按键绑定
+`P`            | 查看流程详细信息
+`Q`            | 立即退出
+`W`            | 流式传输到文件
+`i`            | 设置拦截
+`Ctrl` `right` | 聚焦下一个布局窗格
+`Shift` `tab`  | 聚焦下一个布局窗格
+<!--rehype:className=shortcuts-->
+
+### 代理选项
+<!--rehype:wrap-class=col-span-2-->
+
+:---|---
+:---|---
+`-b ADDR`, `--bind-address ADDR` | 将代理绑定到的地址（默认为所有接口）
+`-I HOST`, `--ignore HOST` | 忽略主机并转发所有流量而不对其进行处理。在透明模式下，建议使用 IP 地址（范围），而不是主机名。在常规模式下，仅忽略 SSL 流量并应使用主机名。提供的值被解释为正则表达式并匹配 ip 或主机名。可以多次通过
+`--tcp HOST` | 与模式匹配的所有主机的通用 TCP SSL 代理模式。类似于 `--ignore`，但 SSL 连接被拦截。通信内容以详细模式打印到日志中
+`-n`, `--no-server` | 不要启动代理服务器。用于离线分析以前捕获的流
+`-p PORT`, `--port PORT` | 代理服务端口。默认值：`8080`
+`--http2`, `--no-http2` | 显式启用/禁用 `HTTP/2` 支持。默认情况下禁用，直到主要网站正确实施规范。默认值将在未来版本中更改
+`--no-websocket`, `--websocket` | 显式启用/禁用 `WebSocket` 支持。默认启用
+`--raw-tcp`, `--no-raw-tcp` | 显式启用/禁用实验性原始 `TCP` 支持。默认情况下禁用。默认值将在未来版本中更改
+`--spoof-source-address` | 使用客户端的 IP 进行服务器端连接。与 `–upstream-bind-address` 结合使用以欺骗固定源地址
+`--upstream-bind-address UPSTREAM_BIND_ADDRESS` | 将上游请求绑定到的地址（默认为无）
+<!--rehype:className=style-list-->
+
+Mitmproxy 过滤器
+---------------
+
+### 过滤器
+
+:---|---
+:---|---
+`f` | 设置视图过滤器 _(在流视图页面上)_
+<!--rehype:className=shortcuts-->
+
+---
+
+- [RegEX 备忘清单](./regex.md) _(jaywcjlove.github.io)_
+
+正则表达式是 Python 风格的，可以指定为带引号的字符串
+
+### 运算符
+
+:---|---
+:---|---
+`!`     | 一元非
+`&`     | 和
+`\|`     | 或者
+`(...)` | 分组
+
+### 表达式
+<!--rehype:wrap-class=row-span-2-->
+
+:---|---
+:---|---
+`~a`           | 响应匹配资源：CSS、Javascript、Flash、图像。
+`~b` `regex`   | 主体 Body
+`~bq` `regex`  | 请求正文
+`~bs` `regex`  | 响应体
+`~c` `int`     | HTTP 响应代码
+`~d` `regex`   | 域
+`~dst` `regex` | 匹配目标地址
+`~e`           | 匹配错误
+`~h` `regex`   | 标头
+`~hq` `regex`  | 请求头
+`~hs` `regex`  | 响应头
+`~http`        | 匹配 HTTP 流
+`~m` `regex`   | 方法
+`~marked`      | 匹配标记流
+`~q`           | 匹配请求无响应
+`~s`           | 匹配响应
+`~src` `regex` | 匹配源地址
+`~t` `regex`   | 内容类型标头
+`~tcp`         | 匹配 TCP 流
+`~tq` `regex`  | 请求 Content-Type 标头
+`~ts` `regex`  | 响应内容类型标头
+`~u` `regex`   | 网址
+`~websocket`   | 匹配 WebSocket 流（和 HTTP-WebSocket 握手流）
+
+### 流选择器
+
+表达式
+
+:---|---
+:---|---
+`@all` | 所有流程
+`@focus` | 目前关注的流程
+`@shown` | 当前显示的所有流程
+`@hidden` | 当前隐藏的所有流程
+`@marked` | 所有标记流
+`@unmarked` | 所有未标记的流
+
+mitmproxy 有一组方便的流选择器，可以在当前视图上操作
+
+### 示例
+
+包含“google.com”的网址
+
+```
+google\.com
+```
+
+正文中包含字符串“test”的请求
+
+```
+~q ~b test
+```
+
+除了带有 text/html 内容类型的请求之外的任何内容：
+
+```
+!(~q & ~t "text/html")
+```
+
+替换请求中的整个 GET 字符串（需要引号才能使其工作）：
+
+```
+":~q ~m GET:.*:/replacement.html"
+```
+
+Mitmproxy 脚本
+-------
+<!--rehype:body-class=cols-2-->
+
+### Custom response
+
+```python
+from mitmproxy import http
+def request(flow: http.HTTPFlow) -> None:
+    if flow.request.pretty_url == "http://example.com/path":
+        flow.response = http.HTTPResponse.make(
+            200,  # (optional) status code
+            b"Hello World",  # (optional) content
+            {"Content-Type": "text/html"}  # (optional) headers
+        )
+```
+
+从代理发送回复而不向远程服务器发送任何数据
+
+### Add header
+
+```python
+class AddHeader:
+    def __init__(self):
+        self.num = 0
+    def response(self, flow):
+        self.num = self.num + 1
+        flow.response.headers["count"] = str(self.num)
+addons = [
+    AddHeader()
+]
+```
+
+为每个响应添加一个 HTTP 标头
+
+另见
+-------
+
+- [mitmproxy addons](https://github.com/mitmproxy/mitmproxy/tree/master/examples/addons) _(github.com)_
+- [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
+- [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
+- [mitmproxy 备忘清单](https://www.stut-it.net/blog/2017/mitmproxy-cheatsheet.html) _(stut-it.net)_

docs/mysql.md

@@ -173,6 +173,12 @@ ALTER TABLE t1 RENAME TO t2;
 ALTER TABLE t1 RENAME c1 TO c2 ;
 ```
 
+将列c1的数据类型改为datatype
+
+```sql
+ALTER TABLE t1 MODIFY c1 datatype;
+```
+
 删除表中的所有数据
 
 ```sql

docs/nestjs.md

@@ -0,0 +1,117 @@
+NestJS 备忘清单
+===
+
+[NestJS](https://docs.nestjs.com/) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架
+
+创建应用
+---
+
+### NestCLI
+
+[NestJS](https://docs.nestjs.com/) 需要 [Node.js >= 12](https://nodejs.org)
+
+```bash
+$ npm i -g @nestjs/cli
+$ nest new project-name
+```
+
+[Nest CLI](https://docs.nestjs.com/cli/overview) 是一个命令行界面工具，可以帮助你初始化、开发和维护你的Nest应用程序，安装依赖并启动开发服务器
+
+```bash
+$ cd <your-project-name>
+$ npm run start
+```
+
+当你准备将应用发布到生产环境时，请运行：
+
+```bash
+$ npm run build
+```
+
+此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
+
+### CLI指令
+
+命令 | 别名 | 描述
+:-|-|-
+`new` | n | 使用模板快速创建应用
+`generate` | g | 自动生成`Controller`、`Providers` 和 `Modules`
+`build` | | 打包并输出./dist目录
+`start` | | 打包并运行
+`add`   | | 安装一个符合Nest的库，同`npm install`
+`info`  | i | 输出系统信息、CLI版本和Nest Package信息
+<!--rehype:className=show-header left-align-->
+
+### Platform(平台)
+<!--rehype:wrap-class=row-span-2-->
+
+目前 `NestJS` 支持两个 `Node HTTP` 平台：[Express](https://expressjs.com/) 和 [Fastify](https://www.fastify.io/)。从技术上讲，一旦创建了适配器，Nest 便可以使用任何 Node HTTP 框架
+
+#### platform-express
+
+```ts
+import { NestFactory } from '@nestjs/core'
+import { AppModule } from './app.module'
+import { NestExpressApplication } from '@nestjs/platform-express'
+
+async function bootstrap() {
+  const app = await NestFactory.create<NestExpressApplication>(AppModule)
+  await app.listen(3000)
+}
+bootstrap()
+```
+<!--rehype:className=wrap-text-->
+
+#### platform-fastify
+
+```ts
+import { NestFactory } from '@nestjs/core'
+import { AppModule } from './app.module'
+import { NestFastifyApplication } from '@nestjs/platform-fastify'
+
+async function bootstrap() {
+  const app = await NestFactory.create<NestFastifyApplication>(AppModule)
+  app.enableCors() // 开启Cors
+  app.register(fastifyCsrf)
+  await app.listen(4000, '0.0.0.0')
+  
+  console.log(`Application is running on: ${await app.getUrl()}`)
+}
+bootstrap()
+```
+<!--rehype:className=wrap-text-->
+
+### 目录
+
+```bash
+├── src      # 源代码目录
+│   ├── app.module.ts          # 应用程序的根模块
+│   ├── app.controller.spec.ts # 控制器的单元测试
+│   ├── app.controller.ts      # 单个路由的基本控制器
+│   ├── app.service.ts         # 具有单一方法的基本服务
+│   └── main.ts # 应用程序的入口文件
+│               # 它使用核心函数 NestFactory 来创建 Nest 应用程序的实例
+└── test      # 测试目录
+    ├── app.e2e-spec.ts
+    └── jest-e2e.json
+```
+
+### JavaScript
+
+`NestCLI` 默认是使用`TypeScript`进行初始化项目的，如果需要使用`JavaScript`请使用以下指令
+
+```bash
+$ git clone https://github.com/nestjs/javascript-starter.git
+
+$ cd <javascript-starter>
+$ npm install
+$ npm run start
+```
+<!--rehype:className=wrap-text-->
+
+需要[注意]((https://docs.nestjs.com/first-steps#language))的一点是，`JavaScript`的版本是需要`Babel`的
+
+另见
+---
+
+[NestJs 官方文档](https://docs.nestjs.com/)

docs/npm.md

@@ -21,6 +21,7 @@ npm 备忘清单
 `npm install <package_name>@<tag>` | 使用 `dist-tags` 安装包
 `npm install -g <package_name>`    | 全局安装包
 `npm uninstall <package_name>`     | 卸载包
+`npm uninstall -g <package_name>`  | 全局卸载包
 <!--rehype:class=auto-wrap-->
 
 ### 安装
@@ -154,6 +155,47 @@ $ nrm ls
 $ nrm use cnpm       
 ```
 
+### init
+
+用于设置新的或现有的 `npm` 包
+
+```bash
+$ npm init <package-spec> # (如同 `npx <package-spec>)
+$ npm init <@scope>       # (如同 `npx <@scope>/create`)
+```
+
+别名: `create`, `innit`
+
+:- | --
+:- | --
+`npm init foo` | `npm exec create-foo`
+`npm init @usr/foo` | `npm exec @usr/create-foo`
+`npm init @usr` | `npm exec @usr/create`
+`npm init @usr@2.0.0` | `npm exec @usr/create@2.0.0`
+`npm init @usr/foo@2.0.0` | `npm exec @usr/create-foo@2.0.0`
+<!--rehype:className=left-align-->
+
+### exec
+
+命令允许您在与通过 `npm run` 运行它类似的上下文中从 npm 包
+
+```bash
+$ npm exec -- <pkg>[@<version>] [args...]
+$ npm exec --package=<pkg>[@<version>] -- <cmd> [args...]
+$ npm exec -c '<cmd> [args...]'
+$ npm exec --package=foo -c '<cmd> [args...]'
+```
+
+别名: x
+
+```bash
+$ npm exec --package yo --package generator-node --call "yo node"
+
+$ npm exec --package=foo -- bar --bar-argument
+# ~ or ~
+$ npx --package=foo bar --bar-argument
+```
+
 npx
 ---
 
@@ -248,7 +290,7 @@ $ npx react-native init AwesomeTSProject --template react-native-template-typesc
 ```
 <!--rehype:className=wrap-text-->
 
-使用 `npx` 直接创建一个  [React Native]((https://reactnative.dev/docs/environment-setup#creating-a-new-application)) 应用
+使用 `npx` 直接创建一个  [React Native](https://reactnative.dev/docs/environment-setup#creating-a-new-application) 应用
 
 ### 创建一个 React 应用
 
@@ -398,4 +440,4 @@ ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-
 
 - [npm 仓库、网站和命令行界面的文档](https://docs.npmjs.com/) _(npmjs.com)_
 - [npmmirror 中国镜像站](https://npmmirror.com/) _(npmmirror.com)_
-- [](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/package-managers/javascript/npm/commands/npx.html) _(michaelcurrin.github.io)_
+- [Dev Cheatsheets npx](https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/package-managers/javascript/npm/commands/npx.html) _(michaelcurrin.github.io)_

docs/oracle.md

@@ -0,0 +1,647 @@
+Oracle 备忘清单
+===
+
+入门
+---
+<!--rehype:body-class=cols-2-->
+
+### SELECT 语句
+
+```sql
+SELECT * FROM beverages WHERE field1 = 'Kona' AND field2 = 'coffee' AND field3 = 122;
+```
+<!--rehype:className=wrap-text-->
+
+### SELECT INTO 语句
+
+```sql
+SELECT name,address,phone_number INTO v_employee_name,v_employee_address,v_employee_phone_number FROM employee WHERE employee_id = 6;
+```
+<!--rehype:className=wrap-text-->
+
+### INSERT 语句
+<!--rehype:wrap-class=row-span-2-->
+
+使用 VALUES 关键字插入
+
+```sql
+INSERT INTO table_name VALUES ('Value1', 'Value2', ... );
+INSERT INTO table_name(Column1, Column2, ... ) VALUES ( 'Value1', 'Value2', ... );
+```
+<!--rehype:className=wrap-text-->
+
+使用 SELECT 语句插入
+
+```sql
+INSERT INTO table_name(SELECT Value1, Value2, ... from table_name );
+INSERT INTO table_name(Column1, Column2, ... ) ( SELECT Value1, Value2, ... from table_name );
+```
+<!--rehype:className=wrap-text-->
+
+### DELETE 语句
+
+```sql
+DELETE FROM table_name WHERE some_column=some_value
+DELETE FROM customer WHERE sold = 0;
+```
+
+### UPDATE 语句
+
+```sql
+-- 更新该表的整个列，设置 `state` 列所有值为 `CA`
+UPDATE customer SET state='CA';
+-- 更新表的具体记录eg：
+UPDATE customer SET name='Joe' WHERE customer_id=10;
+-- 当 `paid` 列大于零时，将列 `invoice` 更新为 `paid`
+UPDATE movies SET invoice='paid' WHERE paid > 0;
+```
+
+SEQUENCES
+---
+
+### CREATE SEQUENCE
+
+序列的语法是
+
+```sql
+CREATE SEQUENCE sequence_name
+    MINVALUE value
+    MAXVALUE value
+    START WITH value
+    INCREMENT BY value
+    CACHE value;
+```
+
+例如
+
+```sql
+CREATE SEQUENCE supplier_seq
+    MINVALUE 1
+    MAXVALUE 999999999999999999999999999
+    START WITH 1
+    INCREMENT BY 1
+    CACHE 20;
+```
+
+### ALTER SEQUENCE
+<!--rehype:wrap-class=col-span-2-->
+
+将序列增加一定数量
+
+```sql
+ALTER SEQUENCE <sequence_name> INCREMENT BY <integer>;
+ALTER SEQUENCE seq_inc_by_ten  INCREMENT BY 10;
+```
+
+改变序列的最大值
+
+```sql
+ALTER SEQUENCE <sequence_name> MAXVALUE <integer>;
+ALTER SEQUENCE seq_maxval  MAXVALUE  10;
+```
+
+设置序列循环或不循环
+
+```sql
+ALTER SEQUENCE <sequence_name> <CYCLE | NOCYCLE>;
+ALTER SEQUENCE seq_cycle NOCYCLE;
+```
+
+配置序列以缓存值
+
+```sql
+ALTER SEQUENCE <sequence_name> CACHE <integer> | NOCACHE;
+ALTER SEQUENCE seq_cache NOCACHE;
+```
+
+设置是否按顺序返回值
+
+```sql
+ALTER SEQUENCE <sequence_name> <ORDER | NOORDER>;
+ALTER SEQUENCE seq_order NOORDER;
+ALTER SEQUENCE seq_order;
+```
+
+### 从字符串生成查询
+<!--rehype:wrap-class=row-span-2-->
+
+有时需要从字符串创建查询
+
+```sql
+PROCEDURE oracle_runtime_query_pcd IS
+    TYPE ref_cursor IS REF CURSOR;
+    l_cursor        ref_cursor;
+
+    v_query         varchar2(5000);
+    v_name          varchar2(64);
+BEGIN
+    v_query := 'SELECT name FROM employee WHERE employee_id=5';
+    OPEN l_cursor FOR v_query;
+    LOOP
+      FETCH l_cursor INTO v_name;
+      EXIT WHEN l_cursor%NOTFOUND;
+    END LOOP;
+    CLOSE l_cursor;
+END;
+```
+<!--rehype:className=wrap-text-->
+
+这是一个如何完成动态查询的非常简单的示例
+
+### 字符串操作
+
+```sql
+length( string1 );
+```
+
+---
+
+```sql
+SELECT length('hello world') FROM dual;
+```
+
+这将返回 11，因为参数由 11 个字符组成，包括空格
+
+```sql
+SELECT lengthb('hello world') FROM dual;
+SELECT lengthc('hello world') FROM dual;
+SELECT length2('hello world') FROM dual;
+SELECT length4('hello world') FROM dual;
+```
+
+这些也返回 `11`，因为调用的函数是等价的
+
+### Instr
+<!--rehype:wrap-class=row-span-2-->
+
+`Instr`（在字符串中）返回一个整数，该整数指定字符串中子字符串的位置。程序员可以指定他们想要检测的字符串的外观以及起始位置。不成功的搜索返回 `0`
+
+```sql
+instr( string1, string2, [ start_position ], [ nth_appearance ] )
+```
+<!--rehype:className=wrap-text-->
+
+---
+
+```sql
+instr( 'oracle pl/sql cheatsheet', '/');
+```
+
+这将返回 `10`，因为第一次出现的 `/` 是第十个字符
+
+```sql
+instr( 'oracle pl/sql cheatsheet', 'e', 1, 2);
+```
+<!--rehype:className=wrap-text-->
+
+这将返回 `17`，因为第二次出现的 `e` 是第 `17` 个字符
+
+```sql
+instr( 'oracle pl/sql cheatsheet', '/', 12, 1);
+```
+<!--rehype:className=wrap-text-->
+
+这将返回 `0`，因为第一次出现的 `/` 在起点之前，即第 `12` 个字符
+
+### Replace
+
+```sql
+replace(string1, string_to_replace, [ replacement_string ] );
+
+replace('i am here','am','am not');
+```
+<!--rehype:className=wrap-text-->
+
+这返回 `i am not here`
+
+### Substr
+
+```sql
+SELECT substr( 'oracle pl/sql cheatsheet', 8, 6) FROM dual;
+```
+<!--rehype:className=wrap-text-->
+
+返回 `pl/sql`，因为 `pl/sql` 中的 `p` 在字符串中的第 `8` 个位置（从 `oracle` 中的 `o` 处的 `1` 开始计算）
+
+```sql
+SELECT substr( 'oracle pl/sql cheatsheet', 15) FROM dual;
+```
+<!--rehype:className=wrap-text-->
+
+返回 `cheatsheet`，因为 `c` 在字符串中的第 `15` 个位置，`t`是字符串中的最后一个字符。
+
+```sql
+SELECT substr('oracle pl/sql cheatsheet', -10, 5) FROM dual;
+```
+<!--rehype:className=wrap-text-->
+
+返回 `cheat`，因为 `c` 是字符串中的第 `10` 个字符，从字符串末尾以 `t` 作为位置 `1` 开始计算。
+
+### Trim
+
+这些函数可用于从字符串中过滤不需要的字符。默认情况下，它们会删除空格，但也可以指定要删除的字符集
+
+```sql
+trim ( [ leading | trailing | both ] [ trim-char ] from string-to-be-trimmed );
+trim ('   删除两侧的空格     ');
+```
+<!--rehype:className=wrap-text-->
+
+这将返回“`删除两侧的空格`”
+
+```sql
+ltrim ( string-to-be-trimmed [, trimming-char-set ] );
+ltrim ('   删除左侧的空格     ');
+```
+<!--rehype:className=wrap-text-->
+
+这将返回“`删除左侧的空格`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;”
+
+```sql
+rtrim ( string-to-be-trimmed [, trimming-char-set ] );
+rtrim ('   删除右侧的空格     ');
+```
+<!--rehype:className=wrap-text-->
+
+这将返回“&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`删除右侧的空格`”
+
+DDL SQL
+---
+
+### 创建表
+
+创建表的语法
+
+```sql
+CREATE TABLE [table name]
+      ( [column name] [datatype], ... );
+```
+
+示例：
+
+```sql
+ CREATE TABLE employee
+       (id int, name varchar(20));
+```
+
+### 添加列
+
+添加列的语法
+
+```sql
+ALTER TABLE [table name]
+    ADD ( [column name] [datatype], ... );
+```
+
+示例：
+
+```sql
+ALTER TABLE employee
+    ADD (id int)
+```
+
+### 修改列
+
+修改列的语法
+
+```sql
+ALTER TABLE [table name]
+    MODIFY ( [column name] [new datatype]);
+```
+
+`ALTER` 表语法和示例：
+
+```sql
+ALTER TABLE employee
+    MODIFY( sickHours s float );
+```
+
+### 删除列
+
+删除列的语法
+
+```sql
+ALTER TABLE [table name]
+    DROP COLUMN [column name];
+```
+
+示例：
+
+```sql
+ALTER TABLE employee
+    DROP COLUMN vacationPay;
+```
+
+### 约束类型和代码
+
+类型代码 | 类型描述 | 作用于级别
+:-- | -- | --
+`C` | 检查表 | Column
+`O` | 在视图上只读 | Object
+`P` | 首要的关键 | Object
+`R` | 参考 AKA 外键 | Column
+`U` | 唯一键 | Column
+`V` | 检查视图上的选项 | Object
+
+### 显示约束
+
+以下语句显示了系统中的所有约束：
+
+```sql
+SELECT
+    table_name,
+    constraint_name,
+    constraint_type
+FROM user_constraints;
+```
+
+### 选择参照约束
+
+以下语句显示了源和目标表/列对的所有引用约束（外键）：
+
+```sql
+SELECT
+    c_list.CONSTRAINT_NAME as NAME,
+    c_src.TABLE_NAME as SRC_TABLE,
+    c_src.COLUMN_NAME as SRC_COLUMN,
+    c_dest.TABLE_NAME as DEST_TABLE,
+    c_dest.COLUMN_NAME as DEST_COLUMN
+FROM ALL_CONSTRAINTS c_list,
+    ALL_CONS_COLUMNS c_src,
+    ALL_CONS_COLUMNS c_dest
+WHERE c_list.CONSTRAINT_NAME = c_src.CONSTRAINT_NAME
+    AND c_list.R_CONSTRAINT_NAME = c_dest.CONSTRAINT_NAME
+    AND c_list.CONSTRAINT_TYPE = 'R'
+```
+
+### 对表设置约束
+
+使用 `CREATE TABLE` 语句创建检查约束的语法是：
+
+```sql
+CREATE TABLE table_name
+(
+    column1 datatype null/not null,
+    column2 datatype null/not null,
+    ...
+    CONSTRAINT constraint_name CHECK (column_name condition) [DISABLE]
+);
+```
+
+例如：
+
+```sql
+CREATE TABLE suppliers
+(
+    supplier_id  numeric(4),
+    supplier_name  varchar2(50),
+    CONSTRAINT check_supplier_id
+    CHECK (supplier_id BETWEEN 100 and 9999)
+);
+```
+
+### 表上的唯一索引
+
+使用 `CREATE TABLE` 语句创建唯一约束的语法是：
+
+```sql
+CREATE TABLE table_name
+(
+    column1 datatype null/not null,
+    column2 datatype null/not null,
+    ...
+    CONSTRAINT constraint_name UNIQUE (column1, column2, column_n)
+);
+```
+
+例如：
+
+```sql
+CREATE TABLE customer
+(
+    id   integer not null,
+    name varchar2(20),
+    CONSTRAINT customer_id_constraint UNIQUE (id)
+);
+```
+
+### 添加唯一约束
+
+唯一约束的语法是：
+
+```sql
+ALTER TABLE [table name]
+    ADD CONSTRAINT [constraint name] UNIQUE( [column name] ) USING INDEX [index name];
+```
+
+例如：
+
+```sql
+ALTER TABLE employee
+    ADD CONSTRAINT uniqueEmployeeId UNIQUE(employeeId) USING INDEX ourcompanyIndx_tbs;
+```
+
+### 添加外部约束
+
+foregin 约束的语法是：
+
+```sql
+ALTER TABLE [table name]
+    ADD CONSTRAINT [constraint name] FOREIGN KEY (column,...) REFERENCES table [(column,...)] [ON DELETE {CASCADE | SET NULL}]
+```
+
+例如：
+
+```sql
+ALTER TABLE employee
+    ADD CONSTRAINT fk_departament FOREIGN KEY (departmentId) REFERENCES departments(Id);
+```
+
+### 删除约束
+
+删除（删除）约束的语法是：
+
+```sql
+ALTER TABLE [table name]
+    DROP CONSTRAINT [constraint name];
+```
+
+例如：
+
+```sql
+ALTER TABLE employee
+    DROP CONSTRAINT uniqueEmployeeId;
+```
+
+INDEXES
+----
+
+### 创建索引
+
+创建索引的语法是：
+
+```sql
+CREATE [UNIQUE] INDEX index_name
+    ON table_name (column1, column2, . column_n)
+    [ COMPUTE STATISTICS ];
+```
+
+`UNIQUE` 表示索引列中值的组合必须是唯一的
+
+`COMPUTE STATISTICS` 告诉 Oracle 在创建索引期间收集统计信息。 然后优化器使用这些统计信息来选择执行语句时的最佳执行计划。例如：
+
+```sql
+CREATE INDEX customer_idx
+    ON customer (customer_name);
+```
+
+在此示例中，已在名为 `customer_idx` 的客户表上创建了一个索引。它仅包含 `customer_name` 字段
+
+下面创建一个包含多个字段的索引：
+
+```sql
+CREATE INDEX customer_idx
+    ON supplier (customer_name, country);
+```
+
+以下内容在创建索引时收集统计信息：
+
+```sql
+CREATE INDEX customer_idx
+    ON supplier (customer_name, country)
+    COMPUTE STATISTICS;
+```
+
+### 创建基于函数的索引
+<!--rehype:wrap-class=col-span-2-->
+
+在 `Oracle` 中，您不仅限于在列上创建索引。您可以创建基于函数的索引
+
+创建基于函数的索引的语法是：
+
+```sql
+CREATE [UNIQUE] INDEX index_name
+    ON table_name (function1, function2, . function_n)
+    [ COMPUTE STATISTICS ];
+```
+
+例如：
+
+```sql
+CREATE INDEX customer_idx
+    ON customer (UPPER(customer_name));
+-- 已创建基于 customer_name 字段的大写评估的索引
+```
+
+为确保 `Oracle` 优化器在执行 SQL 语句时使用此索引，请确保 `UPPER(customer_name)` 的计算结果不为 `NULL` 值。 为确保这一点，请将 `UPPER(customer_name) IS NOT NULL` 添加到 `WHERE` 子句中，如下所示：
+
+```sql
+SELECT customer_id, customer_name, UPPER(customer_name)
+FROM customer
+WHERE UPPER(customer_name) IS NOT NULL
+ORDER BY UPPER(customer_name);
+```
+
+### 重命名索引
+
+重命名索引的语法是：
+
+```sql
+ALTER INDEX index_name
+    RENAME TO new_index_name;
+```
+
+例如：
+
+```sql
+ALTER INDEX customer_id
+    RENAME TO new_customer_id;
+```
+
+在此示例中，`customer_id` 重命名为 `new_customer_id`
+
+### 收集索引的统计信息
+
+如果您需要在索引首次创建后收集统计信息或者您想要更新统计信息，您总是可以使用 ALTER INDEX 命令来收集统计信息。 您收集统计信息以便 `oracle` 可以有效地使用索引。 这将重新计算表大小、行数、块数、段数并更新字典表，以便 `oracle` 在选择执行计划时可以有效地使用数据。
+
+收集索引统计信息的语法是：
+
+```sql
+ALTER INDEX index_name
+    REBUILD COMPUTE STATISTICS;
+```
+
+例如：
+
+```sql
+ALTER INDEX customer_idx
+    REBUILD COMPUTE STATISTICS;
+```
+
+在此示例中，为名为 `customer_idx` 的索引收集统计信息
+
+### 删除索引
+
+删除索引的语法是：
+
+```sql
+DROP INDEX index_name;
+```
+
+例如：
+
+```sql
+DROP INDEX customer_idx;
+```
+
+在此示例中，删除了 `customer_idx`
+
+DBA 相关
+---
+
+### 创建用户
+
+创建用户的语法是：
+
+```sql
+CREATE USER username IDENTIFIED BY password;
+```
+
+例如：
+
+```sql
+CREATE USER brian IDENTIFIED BY brianpass;
+```
+
+### 授予特权
+
+授予权限的语法是：
+
+```sql
+GRANT privilege TO user;
+```
+
+例如：
+
+```sql
+GRANT dba TO brian;
+```
+
+### 更改密码
+
+更改用户密码的语法是：
+
+```sql
+ALTER USER username IDENTIFIED BY password;
+```
+
+例如：
+
+```sql
+ALTER USER brian IDENTIFIED BY brianpassword;
+```
+
+另见
+---
+
+- [Oracle Database/SQL Cheatsheet](https://en.wikibooks.org/wiki/Oracle_Database/SQL_Cheatsheet) _(wikibooks.org)_

docs/php.md

@@ -11,7 +11,7 @@ PHP 备忘清单
 ```php
 <?php // 以 PHP 开放标签开头
 echo "Hello World\n";
-print("Hello quickref.me");
+print("Hello jaywcjlove.github.io");
 ?>
 ```
 
@@ -38,7 +38,7 @@ $str2 = 'Fine, thanks';
 ### 字符串 Strings
 
 ```php
-$url = "quickref.me";
+$url = "jaywcjlove.github.io";
 echo "I'm learning PHP at $url";
 // 连接字符串
 echo "I'm learning PHP at " . $url;
@@ -938,7 +938,7 @@ if (is_null($repo)) {
 ### 常用表达
 
 ```php
-$str = "Visit Quickref.me";
+$str = "Visit jaywcjlove.github.io";
 echo preg_match("/qu/i", $str); # => 1
 ```
 

docs/python.md

@@ -10,7 +10,7 @@ Python 备忘单是 [Python 3](https://www.python.org/) 编程语言的单页参
 
 - [Python](https://www.python.org/)  _(python.org)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/python/) _(learnxinyminutes.com)_
-- [Regex in python](./regex.md#python-中的正则表达式) _(quickref.me)_
+- [Regex in python](./regex.md#python-中的正则表达式) _(jaywcjlove.github.io)_
 
 ### Hello World
 
@@ -144,9 +144,9 @@ message += "Part 2."
 ### f-字符串(Python 3.6+)
 
 ```python
->>> website = 'Quickref.ME'
+>>> website = 'Quick Reference'
 >>> f"Hello, {website}"
-"Hello, Quickref.ME"
+"Hello, Quick Reference"
 >>> num = 10
 >>> f'{num} + 10 = {num + 10}'
 '10 + 10 = 20'
@@ -336,7 +336,7 @@ o
 'baco'
 ```
 
-#### 迈着大步
+#### 步长
 
 ```python
 >>> s = '12345' * 5
@@ -1224,7 +1224,7 @@ try:
     # 使用“raise”来引发错误
     raise IndexError("这是一个索引错误")
 except IndexError as e:
-    pass                 # 通行证只是一个空操作。 通常你会在这里做恢复。
+    pass                 # pass只是一个空操作。 通常你会在这里做恢复。
 except (TypeError, NameError):
     pass                 # 如果需要，可以一起处理多个异常。
 else:                    # try/except 块的可选子句。 必须遵循除块之外的所有内容
@@ -1238,4 +1238,4 @@ finally:                 # 在所有情况下执行
 
 - [Python](https://www.python.org/)  _(python.org)_
 - [Learn X in Y minutes](https://learnxinyminutes.com/docs/python/) _(learnxinyminutes.com)_
-- [Regex in python](./regex.md#python-中的正则表达式) _(quickref.me)_
+- [Regex in python](./regex.md#python-中的正则表达式) _(jaywcjlove.github.io)_

docs/pytorch.md

@@ -0,0 +1,263 @@
+Pytorch  备忘清单
+===
+
+Pytorch 是一种开源机器学习框架，可加速从研究原型设计到生产部署的过程，备忘单是  官网
+备忘清单为您提供了 [Pytorch](https://pytorch.org/) 基本语法和初步应用参考
+
+入门
+-----
+
+### 介绍
+
+- [Pytorch 官网](https://pytorch.org/) _(pytorch.org)_
+- [Pytorch 官方备忘清单](https://pytorch.org/tutorials/beginner/ptcheat.html) _(pytorch.org)_
+
+### 认识 Pytorch
+
+```python
+from __future__ import print_function
+import torch
+x = torch.empty(5, 3)
+>>> print(x)
+tensor([
+    [2.4835e+27, 2.5428e+30, 1.0877e-19],
+    [1.5163e+23, 2.2012e+12, 3.7899e+22],
+    [5.2480e+05, 1.0175e+31, 9.7056e+24],
+    [1.6283e+32, 3.7913e+22, 3.9653e+28],
+    [1.0876e-19, 6.2027e+26, 2.3685e+21]
+])
+```
+<!--rehype:className=wrap-text-->
+
+Tensors 张量: 张量的概念类似于Numpy中的ndarray数据结构, 最大的区别在于Tensor可以利用GPU的加速功能.
+
+### 创建一个全零矩阵
+
+```python
+x = torch.zeros(5, 3, dtype=torch.long)
+>>> print(x)
+tensor([[0, 0, 0],
+        [0, 0, 0],
+        [0, 0, 0],
+        [0, 0, 0],
+        [0, 0, 0]])
+```
+
+创建一个全零矩阵并可指定数据元素的类型为long
+
+### 数据创建张量
+
+```python
+x = torch.tensor([2.5, 3.5])
+>>> print(x)
+tensor([2.5000, 3.3000])
+```
+
+Pytorch 的基本语法
+---------------
+
+### 加法操作(1)
+
+```python
+y = torch.rand(5, 3)
+>>> print(x + y)
+tensor([[ 1.6978, -1.6979,  0.3093],
+        [ 0.4953,  0.3954,  0.0595],
+        [-0.9540,  0.3353,  0.1251],
+        [ 0.6883,  0.9775,  1.1764],
+        [ 2.6784,  0.1209,  1.5542]])
+```
+
+### 加法操作(2)
+
+```python
+>>> print(torch.add(x, y))
+tensor([[ 1.6978, -1.6979,  0.3093],
+        [ 0.4953,  0.3954,  0.0595],
+        [-0.9540,  0.3353,  0.1251],
+        [ 0.6883,  0.9775,  1.1764],
+        [ 2.6784,  0.1209,  1.5542]])
+```
+
+### 加法操作(3)
+
+```python
+# 提前设定一个空的张量
+result = torch.empty(5, 3)
+# 将空的张量作为加法的结果存储张量
+ torch.add(x, y, out=result)
+>>> print(result)
+tensor([[ 1.6978, -1.6979,  0.3093],
+        [ 0.4953,  0.3954,  0.0595],
+        [-0.9540,  0.3353,  0.1251],
+        [ 0.6883,  0.9775,  1.1764],
+        [ 2.6784,  0.1209,  1.5542]])
+```
+
+### 加法操作(4)
+
+```python
+y.add_(x)
+>>> print(y)
+tensor([[ 1.6978, -1.6979,  0.3093],
+        [ 0.4953,  0.3954,  0.0595],
+        [-0.9540,  0.3353,  0.1251],
+        [ 0.6883,  0.9775,  1.1764],
+        [ 2.6784,  0.1209,  1.5542]])
+```
+
+注意: 所有 `in-place` 的操作函数都有一个下划线的后缀。
+比如 `x.copy_(y)`, `x.add_(y)`, 都会直接改变x的值
+
+### 张量操作
+
+```python
+>>> print(x[:, 1])
+tensor([-2.0902, -0.4489, -0.1441,  0.8035, -0.8341])
+```
+<!--rehype:className=wrap-text-->
+
+### 张量形状
+
+```python
+x = torch.randn(4, 4)
+# tensor.view()操作需要保证数据元素的总数量不变
+y = x.view(16)
+# -1代表自动匹配个数
+z = x.view(-1, 8)
+>>> print(x.size(), y.size(), z.size())
+torch.Size([4, 4]) torch.Size([16]) torch.Size([2, 8])
+```
+<!--rehype:className=wrap-text-->
+
+### 取张量元素
+
+```python
+x = torch.randn(1)
+>>> print(x)
+>>> print(x.item())
+tensor([-0.3531])
+-0.3530771732330322
+```
+
+### Torch Tensor 和 Numpy array互换
+
+```python
+a = torch.ones(5)
+>>> print(a)
+tensor([1., 1., 1., 1., 1.])
+```
+
+Torch Tensor和Numpy array共享底层的内存空间, 因此改变其中一个的值, 另一个也会随之被改变
+
+### Torch Tensor 转换为 Numpy array
+
+```python
+b = a.numpy()
+>>> print(b)
+[1. 1. 1. 1. 1.]
+```
+
+### Numpy array转换为Torch Tensor
+
+```python
+import numpy as np
+a = np.ones(5)
+b = torch.from_numpy(a)
+np.add(a, 1, out=a)
+>>> print(a)
+>>> print(b)
+[2. 2. 2. 2. 2.]
+tensor([2., 2., 2., 2., 2.], dtype=torch.float64)
+```
+<!--rehype:className=wrap-text-->
+
+注意: 所有在CPU上的Tensors, 除了CharTensor, 都可以转换为Numpy array并可以反向转换.
+
+导入 Imports
+---
+
+### 一般
+
+```python
+# 根包
+import torch
+# 数据集表示和加载
+from torch.utils.data import Dataset, DataLoader
+```
+<!--rehype:className=wrap-text-->
+
+### 神经网络 API
+
+```python
+# 计算图
+import torch.autograd as autograd
+# 计算图中的张量节点
+from torch import Tensor
+# 神经网络
+import torch.nn as nn
+# 层、激活等
+import torch.nn.functional as F
+# 优化器，例如 梯度下降、ADAM等
+import torch.optim as optim
+# 混合前端装饰器和跟踪 jit
+from torch.jit import script, trace
+```
+
+### Torchscript 和 JIT
+
+```python
+torch.jit.trace()
+```
+
+使用你的模块或函数和一个例子，数据输入，并追溯计算步骤，数据在模型中前进时遇到的情况
+
+```python
+@script
+```
+
+装饰器用于指示被跟踪代码中的数据相关控制流
+
+### ONNX
+
+```python
+torch.onnx.export(model, dummy data, xxxx.proto)
+# 导出 ONNX 格式
+# 使用经过训练的模型模型，dummy
+# 数据和所需的文件名
+
+model = onnx.load("alexnet.proto")
+# 加载 ONNX 模型
+onnx.checker.check_model(model)
+# 检查模型，IT 是否结构良好
+
+onnx.helper.printable_graph(model.graph)
+# 打印一个人类可读的，图的表示
+```
+<!--rehype:className=wrap-text-->
+
+### Vision
+
+```python
+# 视觉数据集，架构 & 变换
+from torchvision import datasets, models, transforms
+# 组合转换
+import torchvision.transforms as transforms
+```
+<!--rehype:className=wrap-text-->
+
+### 分布式训练
+
+```python
+# 分布式通信
+import torch.distributed as dist
+# 内存共享进程
+from torch.multiprocessing import Process
+```
+<!--rehype:className=wrap-text-->
+
+另见
+---
+
+- [Pytorch 官网](https://pytorch.org/) _(pytorch.org)_
+- [Pytorch 官方备忘清单](https://pytorch.org/tutorials/beginner/ptcheat.html) _(pytorch.org)_

docs/quickreference.md

@@ -37,9 +37,9 @@ npm run start # 监听 md 文件编译输出 HTML
 ├── CONTRIBUTING.md   # 贡献说明
 ├── Dockerfile
 ├── LICENSE
-├── README.md   # Home(首页) 内容
-├── dist        # 编译后的静态资源目录
-├── docs        # Markdown 文档（速查表）
+├── README.md  # 🌐 Home(首页)内容
+├── dist       # 📦 编译后的静态资源目录
+├── docs       # 👈 Markdown 文档(速查表)
 │   ├── bash.md
 │   ├── ....
 │   └── yaml.md
@@ -337,16 +337,16 @@ const school = <div>学校</div>;
 
 类 | 说明
 ---- | ----
-`<!--rehype:className=wrap-text-->` | 强制换行
-`<!--rehype:className=show-header-->` | 展示表格表头
-`<!--rehype:className=shortcuts-->` | 快捷键样式
-`<!--rehype:className=auto-wrap-->` | 隐藏表头强制小尺寸自动换行
-`<!--rehype:className=style-list-arrow-->` | 列表箭头样式展示表格
-`<!--rehype:className=style-list-->` | 列表样式展示表格
-`<!--rehype:className=left-align-->` | 表格末尾列左对齐
-`<!--rehype:className=style-none-->` | \<li> 没有标记
-`<!--rehype:className=style-timeline-->` | 时间轴样式
-`<!--rehype:className=style-arrow-->` | 箭头标记
+`<!--rehype:className=wrap-text-->` | 强制`换行`
+`<!--rehype:className=show-header-->` | 展示表格`表头`
+`<!--rehype:className=shortcuts-->` | `快捷键`样式
+`<!--rehype:className=auto-wrap-->` | 隐藏表头强制小尺寸`自动换行`
+`<!--rehype:className=style-list-arrow-->` | 列表`箭头`样式展示表格
+`<!--rehype:className=style-list-->` | `列表`样式展示表格
+`<!--rehype:className=left-align-->` | 表格末尾列`左对齐`
+`<!--rehype:className=style-none-->` | \<li> 没有标记样式
+`<!--rehype:className=style-timeline-->` | `时间轴`样式
+`<!--rehype:className=style-arrow-->` | `箭头`标记
 
 ### KaTeX 数学渲染
 
@@ -433,17 +433,20 @@ H2 部分
 ### 卡片 3 (H3 部分)
 ```
 
-类 | 说明
----- | ----
+---
+
+:-- | --
+:-- | --
+合并 **列** 布局 |
 `col-span-2` | `2` 列占位
 `col-span-3` | `3` 列占位
 `col-span-4` | `4` 列占位
-`col-span-5` | `5` 列占位
+`col-span-{2~10}` | `{2~10}` 列占位
+合并 **行** 布局 |
 `row-span-2` | `2` 行占位
 `row-span-3` | `3` 行占位
 `row-span-4` | `4` 行占位
-`row-span-5` | `5` 行占位
-<!--rehype:className=show-header -->
+`row-span-{2~10}` | `{2~10}` 行占位
 
 ### 卡片合并行布局 1
 
@@ -762,7 +765,7 @@ H2 部分
 列表
 ---
 
-### 一栏（默认）
+### 一栏(默认)
 
 - Item 1
 - Item 2
@@ -881,7 +884,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=row-span-2-->
 
 ```
-...
+...合并两行
 ```
 
 `<!--rehype:wrap-class=row-span-2-->`
@@ -890,7 +893,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=col-span-2-->
 
 ```
-...
+...合并两列
 ```
 
 `<!--rehype:wrap-class=col-span-2-->`
@@ -899,7 +902,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#e91e63;-->
 
 ```
-...
+...红色标题配置
 ```
 
 `<!--rehype:style=background:#e91e63;-->`
@@ -908,7 +911,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#d7a100;-->
 
 ```
-...
+...黄色标题配置
 ```
 
 `<!--rehype:style=background:#d7a100;-->`

docs/styled-components.md

@@ -1,4 +1,4 @@
-styled-components 备忘清单
+Styled Components 备忘清单
 ====
 
 此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。

docs/swift.md

@@ -190,7 +190,7 @@ let isMorning: Bool = true
 常量是不可变的。它们的值不能改变：
 
 ```swift
-让 numberOfToys: Int = 8
+let numberOfToys: Int = 8
 numberOfToys += 1
 // ❌ 错误：numberOfToys 不可变
 ```

docs/sysdig.md

@@ -0,0 +1,482 @@
+Sysdig 备忘清单
+===
+
+该备忘单提供了使用 [Sysdig](https://sysdig.com/) 的常用命令参数和使用案例清单
+
+入门
+----
+
+### 命令安装
+<!--rehype:wrap-class=col-span-2-->
+
+```shell
+sudo rpm --import https://download.sysdig.com/DRAIOS-GPG-KEY.public  
+sudo curl -s -o /etc/yum.repos.d/draios.repo https://download.sysdig.com/stable/rpm/draios.repo
+sudo yum -y install sysdig
+```
+<!--rehype:className=wrap-text-->
+
+### 常用参数
+<!--rehype:wrap-class=row-span-2-->
+
+参数 | 说明
+:--|:---
+`-C 5` | 每个文件不超过5M
+`-W 10` | 保留不超过10个文件
+`-G 60` | 每个文件只保留一分钟内的系统活动
+`-w  dump.pcap` | 保存到文件
+`-e 1000` | 每个文件只有1000个事件
+`-z` | 参数对保存的内容进行压缩
+`-A --print-ascii` |  把buffer中数据按照ASCII格式打印，方便阅读
+`-x --print-hex`  |  把buffer中数据按照十六进制打印
+`-X --printhex-ascii` | 把buffer中数据同时按照ASCII格式和十六进制打印
+`-s 1024` | 捕获buffer的数据大小，默认为80，设置过大，文件会很大
+`-N` | 不用把端口号转成可读名字
+`-r` | 从文件读取
+<!--rehype:className=show-header-->
+
+### 输出含义
+
+事件 | 说明
+:--|:---
+`evt.num` | 递增的事件号
+`evt.time` | 事件发生的时间
+`evt.cpu` | 事件被捕获时所在cpu
+`proc.name` | 生成事件的进程名字
+`thread.tid` | 线程id，单线程则为进程id
+`evt.dir` | 事件方向(direction), > 代表进入事件， < 代表退出事件
+`evt.type` | 事件的名称，比如open、stat等，一般为系统调用
+`evt.args` | 事件的参数。如果为系统调用，则对应系统调用的参数
+<!--rehype:className=show-header-->
+
+### chisels常用工具
+
+事件 | 说明
+:--|:---
+`httplog`  |  输出所有的http请求
+`topprocs_cpu` |  输出按照cpu使用率排序
+`topprocs_net` |  按照网络使用情况对进程排序
+`fdcount_by` |  按照建立连接书对进程排序
+`echo_fds`  |     输出进程读写数据
+`netsata`   |    列出网络连接情况
+`spy_file`  |   输出文件的读写数据，可以提供某个文件名作为参数
+`spy_ip`    |   抓取给定ip的数据交换
+`spy_port`  |   抓取给定端口的数据交换
+<!--rehype:className=show-header-->
+
+### 命令帮助
+
+```shell
+sysdig -l   #事件类型
+sysdig -cl  #chisels工具类型
+```
+
+### 捕获每个系统事件并将其写入标准输出
+
+```shell
+$ sysdig
+```
+
+### 自定义输出
+<!--rehype:wrap-class=row-span-2-->
+
+```shell
+$ sysdig -p"user:%user.name dir:%evt.arg.path" evt.type=chdir
+user:ubuntu dir:/root
+user:ubuntu dir:/root/tmp
+user:ubuntu dir:/root/Download
+```
+<!--rehype:className=wrap-text-->
+
+字段必须用 `%` 作为前缀，所有 `sysdig -l` 列出来的字段都可以使用
+如果某个字段在时间中不存在，默认这个事件会过滤掉，在这个字符串最前面加上 `*` 符号，会打印所有事件，不存在的字段会变成 `<NA>`
+
+```shell
+$ sysdig -p"*%evt.type %evt.dir %evt.arg.name" evt.type=open
+open > <NA>
+open < /proc/1285/task/1399/stat
+open > <NA>
+open < /proc/1285/task/1400/io
+open > <NA>
+open < /proc/1285/task/1400/statm
+open > <NA>
+```
+<!--rehype:className=wrap-text -->
+
+### 抓取 `kubernetes pod` 客户端 `ip` 的 `udp` 请求
+<!--rehype:wrap-class=col-span-2-->
+
+```shell
+# 列出容器监听端口
+$ sudo sysdig -pc -A -c netstat container.name=aaa
+
+# 抓取kubernetes pod 的客户端ip为172.119.100.16，3000端口的的请求内容
+$ sudo sysdig -A -c echo_fds  k8s.pod.name contains datacenter-web-dev  and fd.port=3000 and evt.type=read and fd.cip=172.119.100.16 fd.proto=UDP
+
+# 按照建立连接数量对进程排序 并保存到sysdig.pcap文件中
+$ sysdig  -c fdcount_by fd.sport "evt.type=accept"  -w sysdig.pcap
+```
+<!--rehype:className=wrap-text -->
+
+抓取 `kubernetes pod` 客户端 `ip` 为 `172.119.100.16` 的 `udp` 请求
+
+### io案例
+<!--rehype:wrap-class=row-span-3-->
+
+查看 io 错误最多的进程
+
+```shell
+$ sysdig -c topprocs_errors
+```
+
+查看io错误最多的文件
+
+```shell
+$ sysdig -c topfiles_errors
+```
+
+查看磁盘io失败的调用
+
+```shell
+$ sysdig fd.type=file and evt.failed=true
+```
+
+查看httpd打开失败的文件
+
+```shell
+$ sysdig "proc.name=httpd and evt.type=open and evt.failed=true"
+```
+<!--rehype:className=wrap-text -->
+
+查看最花费时间的系统调用
+
+```shell
+$ sysdig -c topscalls_time
+```
+
+查看系统调用失败返回最多的系统调用
+
+```shell
+$ sysdig -c topscalls "evt.failed=true"
+```
+
+查看打开文件失败
+
+```shell
+$ sysdig -p "%12user.name %6proc.pid %12proc.name %3fd.num %fd.typechar %fd.name" evt.type=open and evt.failed=true
+```
+<!--rehype:className=wrap-text -->
+
+打印延迟大于1ms的文件I/O调用
+
+```shell
+$ sysdig -c fileslower 1
+```
+
+查看使用硬盘带宽最多的进程
+
+```shell
+$ sysdig -c topprocs_file
+```
+
+列出大量使用文件描述符的进程
+
+```shell
+$ sysdig -c fdcount_by proc.name "fd.type=file"
+```
+<!--rehype:className=wrap-text -->
+
+查看读写bytes最多的文件
+
+```shell
+$ sysdig -c topfiles_bytes
+```
+
+打印httpd进程已经读取中和写入中的文件
+
+```shell
+$ sysdig -c topfiles_bytes proc.name=httpd
+```
+
+基本 opensnoop:snoop 文件在发生时打开
+
+```shell
+$ sysdig -p "%12user.name %6proc.pid %12proc.name %3fd.num %fd.typechar %fd.name" evt.type=open
+```
+<!--rehype:className=wrap-text -->
+
+查看活跃中的读和写最多的目录
+
+```shell
+sysdig -c fdbytes_by fd.directory "fd.type=file"
+```
+<!--rehype:className=wrap-text -->
+
+查看目录/tmp活跃中的读写最多的文件
+
+```shell
+sysdig -c fdbytes_by fd.filename "fd.directory=/tmp/"
+```
+<!--rehype:className=wrap-text -->
+
+查看所有文件名为passwd的i/O活动
+
+```shell
+sysdig -A -c echo_fds "fd.filename=passwd"
+```
+
+展示FD类型的活跃I/O
+
+```shell
+sysdig -c fdbytes_by fd.type
+```
+<!--rehype:className=wrap-text -->
+
+### 网络
+
+抓取 `kubernetes pod` 的客户端 `ip` 为 `172.119.100.17`，`3000` 端口的的请求内容
+
+```shell
+$ sudo sysdig -A -c echo_fds  k8s.pod.name contains datacenter-web-dev  and fd.port=3000 and evt.type=read and fd.cip=172.119.100.17 fd.proto=UDP
+```
+<!--rehype:className=wrap-text -->
+
+查看占用网络带宽最多的进程
+
+```shell
+$ sysdig -c topprocs_net
+#显示主机192.168.0.1的网络传输数据
+#作为二进制：
+$ sysdig -s2000 -X -c echo_fds fd.cip=192.168.0.1
+#作为 ASCII：
+$ sysdig -s2000 -A -c echo_fds fd.cip=192.168.0.1
+```
+<!--rehype:className=wrap-text -->
+
+查看连接最多的服务器端口
+
+```shell
+#在已建立的连接方面：
+$ sysdig -c fdcount_by fd.sport "evt.type=accept"
+#就总字节数而言：
+$ sysdig -c fdbytes_by fd.sport
+```
+<!--rehype:className=wrap-text -->
+
+查看客户端连接最多的ip
+
+```shell
+#在已建立的联系方面
+$ sysdig -c fdcount_by fd.cip "evt.type=accept"
+#就总字节数而言
+$ sysdig -c fdbytes_by fd.cip
+```
+<!--rehype:className=wrap-text -->
+
+列出所有不是访问apache服务的访问连接
+
+```shell
+$ sysdig -p"%proc.name %fd.name" "evt.type=accept and proc.name!=httpd"
+```
+<!--rehype:className=wrap-text -->
+
+显示 wordpress1 容器在端口 80 上发送和接收的数据：
+
+```shell
+$ sysdig -A -cecho_fds container.name=wordpress1 and fd.port=80
+```
+<!--rehype:className=wrap-text -->
+
+实时打印 `mysql` 容器接收的所有新连接
+
+```shell
+$ sysdig -p"%fd.name" container.name=mysql and evt.type=accept
+```
+<!--rehype:className=wrap-text -->
+
+### 进程
+
+查看哪些文件花费时间做多
+
+```shell
+$ sysdig -c topfiles_time
+```
+
+查看httpd进程哪些文件花费最多时间
+
+```shell
+$ sysdig -c topfiles_time proc.name=httpd
+```
+
+查看io错误最多的进程
+
+```shell
+$ sysdig -c topprocs_errors
+```
+
+查看io错误最多的文件
+
+```shell
+$ sysdig -c topfiles_errors
+```
+
+查看磁盘io失败的调用
+
+```shell
+$ sysdig fd.type=file and evt.failed=true
+```
+
+查看httpd打开失败的文件
+
+```shell
+$ sysdig "proc.name=httpd and evt.type=open and evt.failed=true"
+```
+<!--rehype:className=wrap-text -->
+
+查看最花费时间的系统调用
+
+```shell
+$ sysdig -c topscalls_time
+```
+
+查看系统调用失败返回最多的系统调用
+
+```shell
+$ sysdig -c topscalls "evt.failed=true"
+```
+
+查看打开文件失败
+
+```shell
+$ sysdig -p "%12user.name %6proc.pid %12proc.name %3fd.num %fd.typechar %fd.name" evt.type=open and evt.failed=true
+```
+<!--rehype:className=wrap-text -->
+
+打印延迟大于1ms的文件I/O调用
+
+```shell
+$ sysdig -c fileslower 1
+```
+<!--rehype:className=wrap-text -->
+
+### 基本用法
+<!--rehype:wrap-class=row-span-2-->
+
+将事件捕获到跟踪文件以供以后分析
+
+```shell
+$ sysdig –w myfile.scap
+```
+
+从跟踪文件中读取事件
+
+```shell
+$ sysdig –r myfile.scap
+```
+
+根据特定字段过滤事件
+
+```shell
+$ sysdig proc.name=httpd and evt.type!=open
+```
+
+运行凿子以获得高级功能
+
+```shell
+$ sysdig -c topprocs_cpu
+```
+
+列出所有可用字段
+
+```shell
+$ sysdig -l
+```
+
+列出所有可用的凿子
+
+```shell
+$ sysdig -cl
+```
+
+### 容器
+
+查看具有容器上下文的进程列表
+
+```shell
+$ sysdig -pc
+```
+
+查看 `wordpress1` 容器中运行的进程的CPU使用率
+
+```shell
+$ sysdig -pc -c topprocs_cpu container.name=wordpress1
+```
+<!--rehype:className=wrap-text -->
+
+查看对基于 `Kubernetes` 的 `mySQL` 服务发出的热门 `HTTP` 请求
+
+```shell
+$ sysdig -k http://127.0.0.1:8080 -c httptop k8s.svc.name=mysql
+```
+<!--rehype:className=wrap-text -->
+
+### 文件系统
+
+列出使用最多文件数的进程
+
+```shell
+$ sysdig -c fdcount_by proc.name "fd.type=file"
+```
+<!--rehype:className=wrap-text -->
+
+观察名为“passwd”的所有文件的 I/O 活动
+
+```shell
+$ sysdig -A -c echo_fds "fd.filename=passwd"
+```
+<!--rehype:className=wrap-text -->
+
+### 安全
+
+显示 `root` 访问的目录
+
+```shell
+$ sysdig -p "%evt.arg.path" "evt.type=chdir and user.name=root"
+```
+<!--rehype:className=wrap-text -->
+
+观察 `ssh` 活动
+
+```shell
+$ sysdig -A -c echo_fds fd.name=/dev/ptmx and proc.name=sshd
+```
+<!--rehype:className=wrap-text -->
+
+### 日志
+
+显示来自 python 的所有系统日志消息
+
+```shell
+$ sysdig -c spy_syslog proc.name=python
+```
+
+超尾系统中的所有日志文件
+
+```shell
+$ sysdig -c spy_logs
+```
+
+### CSysdig
+
+```shell
+$ csysdig -m http://127.0.0.1:8080
+```
+
+使用 Mesos 元数据运行 Csysdig，Sysdig 基于 curses 的 UI
+
+另见
+----------
+
+- [sysdig wiki](https://github.com/draios/sysdig/wiki) _(github.com)_
+- [sysdig 官网](https://sysdig.com/) _(sysdig.com)_
+- [Linux 故障排除速查表：strace、htop、lsof、tcpdump、iftop 和 sysdig](https://sysdig.com/blog/linux-troubleshooting-cheatsheet/) _(sysdig.com)_

docs/tar.md

@@ -0,0 +1,221 @@
+tar 备忘清单
+===
+
+这是 tar 常用命令的快速参考备忘单。
+
+入门
+----
+
+### 介绍
+
+在Linux平台上，`tar` 命令是主要的归档实用程序。了解各种 `tar` 命令选项将帮助您掌握归档文件操作。`tar` 代表磁带存档。
+
+#### 语法
+
+```shell
+tar [-ABcdgGhiklmMoOpPrRsStuUvwWxzZ][-C <目的目录>][-f <备份文件>][--delete][--totals][文件或目录...]
+```
+<!--rehype:className=wrap-text -->
+
+以前 unix 系统管理员使用 `tar` 执行磁带机备份。`tar` 命令用于获取文件和目录的集合，并生成高度压缩的归档文件，在Linux中通常称为 `tarball` 或 `tar`、`gzip` 和 `bzip`。
+
+### 选项
+
+:- | -
+:- | -
+`-c` | 建立新的备份文件
+`-C` | 切换到指定的目录
+`-d` | 对比备份文件内和文件系统上的文件的差异
+`-x` | 解压缩归档文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+`-t` | 查看归档文件内容
+`-j` | 通过 bzip2 指令处理备份文件
+`-z` | 通过 gzip 指令处理备份文件
+`-r` | 向现有存档文件追加或更新文件或目录
+`-W` | 验证归档文件
+`--totals` | 备份文件建立后，列出文件大小
+`--delete` | 从备份文件中删除指定的文件
+`--wildcards` | 在 unix tar 命令中指定匹配模式
+
+### 创建一个 tar 格式的压缩文件
+
+在当前工作目录的 `/home/cyberpunk/testdir` 目录下创建一个名为 `archive.tar` 的 `tar` 归档文件:
+
+```shell
+tar -cvf archive.tar /home/cyberpunk/testdir/
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.sh
+/home/cyberpunk/testdir/file3.tar
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-c` | 建立新的备份文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+
+### 创建压缩后的 `tar.gz` 存档文件
+
+要创建一个压缩的 `gzip` 归档文件，我们需要使用选项 `z` 。
+
+```shell
+tar cvzf compressedArchive.tar.gz /home/cyberpunk/testdir
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.jpg
+/home/cyberpunk/testdir/file3.png
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-c` | 建立新的备份文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+`-z` | 通过 `gzip` 指令处理备份文件
+
+### 生成压缩率更高的 `tar.bz2` 文件
+
+`tar` 的 `bz2` 压缩，可以创建比 `gzip` 文件小的归档。`Bz2` 模式执行归档压缩和解压所需的时间比 `gzip` 模式多。通常，这个时间差可以忽略不计，但如果文件非常打，或者是文件数量非常多，那么时间差就会非常大。
+
+```shell
+tar cvfj Archive.tar.bz2 /home/cyberpunk/testdir
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.txt
+/home/cyberpunk/testdir/file3.txt
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-c` | 建立新的备份文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+`-j` | 通过 bzip2 指令处理备份文件
+
+### 解压缩 tar 文件
+
+要解压缩(提取)一个tar文件，将 `x` (提取)选项传递给该命令
+使用不带 `-C` 选项的命令将在当前工作目录中提取存档。`-C` 选项告诉命令在哪里提取存档文件。
+
+```shell
+tar -xvf Archive.tar -C /home/cyberpunk/testdir/
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.txt
+/home/cyberpunk/testdir/file3.txt
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-x` | 解压缩归档文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+
+### 解压缩 tar.gz 文件
+
+小知识：使用 `tar` 命令创建的所有归档文件，都可以以相同的方式提取。
+
+```shell
+tar -xvf Archive.tar.gz
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.txt
+/home/cyberpunk/testdir/file3.txt
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-x` | 解压缩归档文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+
+### 解压缩 tar.bz2 文件
+
+小知识：使用 `tar` 命令创建的所有归档文件，都可以以相同的方式提取。
+
+```shell
+tar -xvf Archive.tar.bz2
+
+/home/cyberpunk/testdir/
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.txt
+/home/cyberpunk/testdir/file3.txt
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-x` | 解压缩归档文件
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+
+### 列出归档内容
+<!--rehype:wrap-class=col-span-1 row-span-2-->
+使用 `t` 选项列出 `tar` 归档文件的内容:
+
+```shell
+# tar -tvf uploadprogress.tar
+
+-rwxr--r-- root/root   1111 2014-10-19 12:33:42 file1.txt
+-rwxr--r-- root/root   1111 2014-10-19 12:33:42 file2.txt
+-rwxr--r-- root/root   1111 2014-10-19 12:33:42 file3.txt
+-rwxr--r-- root/root   1111 2014-10-19 12:33:42 file4.txt
+```
+
+本例中使用的选项有:
+:- | -
+:- | -
+`-t` | 查看归档文件内容
+`-v` | 显示指令执行过程
+`-f` | 指定归档文件的文件名
+
+### 从 tar 归档文件中提取单个文件
+
+```shell
+tar --extract --file=archive.tar file1.txt
+
+file1.txt
+```
+
+### 从 tar 归档文件中提取多个文件
+
+```shell
+tar -xvf Archive.tar "file 1" "file 2"
+```
+
+### 使用通配符提取文件组
+
+```shell
+# tar -xvf Archive.tar --wildcards *.txt'
+
+/home/cyberpunk/testdir/file1.txt
+/home/cyberpunk/testdir/file2.txt
+/home/cyberpunk/testdir/file3.txt
+```
+
+### 添加文件或目录到 tar 存档中
+
+要向现有的 `tar` 文件中添加文件或目录，可以使用 `r` 选项。例如，我们将 `xyz.txt` 文件和 `php` 目录添加到现有的 `tecmint-14-09-12.tar` 归档文件中。
+
+```shell
+# tar -rvf Archive.tar xyz.txt  #add file
+or
+# tar -rvf Archive.tar php      # add directory
+```
+
+另见
+----
+
+[Linux Tar Commands Cheatsheet](https://neverendingsecurity.wordpress.com/2015/04/13/linux-tar-commands-cheatsheet/)

docs/typescript.md

@@ -1278,7 +1278,7 @@ type Capitalize<T extends string> = T extends `${infer U}${infer V}`
 type capitalized = Capitalize<"hello world"> // Hello World
 ```
 
-- 也可以在 infer 中使用条件约束（`extends`）
+也可以在 infer 中使用条件约束（`extends`）
 
 ```ts
 type SomeBigInt = "100" extends `${infer U extends bigint}` ? U : never;
@@ -1316,6 +1316,7 @@ type Data = Point[];
 type PointDetail = Data[number];
 // type PointDetail = { x: number; y: number; }
 ```
+<!--rehype:className=wrap-text-->
 
 ### 只读元组类型
 
@@ -1324,6 +1325,250 @@ const point = [3, 4] as const
 // type 'readonly [3, 4]'
 ```
 
+TSConfig Ref
+---
+
+### 顶层配置
+
+:- | --
+:- | --
+`files` [#](https://www.typescriptlang.org/zh/tsconfig#files) | 指定要`包含`在程序中的文件的允许列表
+`extends` [#](https://www.typescriptlang.org/zh/tsconfig#extends) | 包含要`继承`的另一个配置文件的路径
+`include` [#](https://www.typescriptlang.org/zh/tsconfig#include) | 指定要`包含`在程序中的文件名或模式数组
+`exclude` [#](https://www.typescriptlang.org/zh/tsconfig#exclude) | 指定解析包含时应`跳过`的文件名或模式数组
+`references` [#](https://www.typescriptlang.org/zh/tsconfig#references) | 项目引用是一种将 TypeScript 程序构造成更小部分的方法
+<!--rehype:className=style-list-arrow-->
+
+---
+
+```js
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+### 类型检查(compilerOptions)
+<!--rehype:wrap-class=row-span-4-->
+
+:- | --
+:- | --
+`allowUnreachableCode` [#](https://www.typescriptlang.org/zh/tsconfig#allowUnreachableCode) | 允许无法访问的代码
+`allowUnusedLabels` [#](https://www.typescriptlang.org/zh/tsconfig#allowUnusedLabels) | 允许未使用的标签
+`alwaysStrict` [#](https://www.typescriptlang.org/zh/tsconfig#alwaysStrict) | 始终严格
+`exactOptionalPropertyTypes` [#](https://www.typescriptlang.org/zh/tsconfig#exactOptionalPropertyTypes) | 启用后，TypeScript 应用更严格的规则来处理它如何处理类型或具有 ? 字首
+`noFallthroughCasesInSwitch` [#](https://www.typescriptlang.org/zh/tsconfig#noFallthroughCasesInSwitch) | 在 switch 语句中报告失败案例的错误
+`noImplicitAny` [#](https://www.typescriptlang.org/zh/tsconfig#noImplicitAny) | 在某些不存在类型注释的情况下，TypeScript 将在无法推断类型时回退到变量的任何类型
+`noImplicitOverride` [#](https://www.typescriptlang.org/zh/tsconfig#noImplicitOverride) | 当处理使用继承的类时，子类可能与在基类中重命名时重载的函数“不同步”
+`noImplicitReturns` [#](https://www.typescriptlang.org/zh/tsconfig#noImplicitReturns) | 没有隐式返回
+`noImplicitThis` [#](https://www.typescriptlang.org/zh/tsconfig#noImplicitThis) | 使用隐含的“any”类型在“this”表达式上引发错误
+`noPropertyAccessFromIndexSignature` [#](https://www.typescriptlang.org/zh/tsconfig#noPropertyAccessFromIndexSignature) | 此设置确保通过“点”（obj.key）语法访问字段和“索引”（obj[“key”]）以及在类型中声明属性的方式之间的一致性
+`noUncheckedIndexedAccess` [#](https://www.typescriptlang.org/zh/tsconfig#noUncheckedIndexedAccess) | TypeScript 有一种方法可以通过索引签名来描述对象上具有未知键但已知值的对象
+`noUnusedLocals` [#](https://www.typescriptlang.org/zh/tsconfig#noUnusedLocals) | 报告未使用的局部变量的错误
+`noUnusedParameters` [#](https://www.typescriptlang.org/zh/tsconfig#noUnusedParameters) | 报告函数中未使用参数的错误
+`strict` [#](https://www.typescriptlang.org/zh/tsconfig#strict) | 严格标志启用了范围广泛的类型检查行为，从而更有效地保证了程序的正确性
+`strictBindCallApply` [#](https://www.typescriptlang.org/zh/tsconfig#strictBindCallApply) | TypeScript 将检查函数调用、绑定和应用的内置方法是否使用底层函数的正确参数调用
+`strictFunctionTypes` [#](https://www.typescriptlang.org/zh/tsconfig#strictFunctionTypes) | 此标志会导致更正确地检查函数参数
+`strictNullChecks` [#](https://www.typescriptlang.org/zh/tsconfig#strictNullChecks) | 严格的空检查
+`strictPropertyInitialization` [#](https://www.typescriptlang.org/zh/tsconfig#strictPropertyInitialization) | 严格的属性初始化
+`useUnknownInCatchVariables` [#](https://www.typescriptlang.org/zh/tsconfig#useUnknownInCatchVariables) | 在 TypeScript 4.0 中，添加了支持以允许将 catch 子句中的变量类型从 any 更改为 unknown
+<!--rehype:className=style-list-arrow-->
+
+### 模块(compilerOptions)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | --
+:- | --
+`allowUmdGlobalAccess` [#](https://www.typescriptlang.org/zh/tsconfig#allowUmdGlobalAccess) | 为 true 时，将允许你在模块文件中以全局变量的形式访问 UMD 的导出
+`baseUrl` [#](https://www.typescriptlang.org/zh/tsconfig#baseUrl) | 可以让您设置解析非绝对路径模块名时的基准目录
+`module` [#](https://www.typescriptlang.org/zh/tsconfig#module) | 设置程序的模块系统
+`moduleResolution` [#](https://www.typescriptlang.org/zh/tsconfig#moduleResolution) | 指定模块解析策略：'node'（Node.js）或 'classic'
+`moduleSuffixes` [#](https://www.typescriptlang.org/zh/tsconfig#moduleSuffixes) | 提供一种在解析模块时覆盖要搜索的默认文件名后缀列表的方法
+`noResolve` [#](https://www.typescriptlang.org/zh/tsconfig#noResolve) | 默认情况下，TypeScript 将检查导入和 `<reference` 指令的初始文件集，并将这些解析的文件添加到您的程序中
+`paths` [#](https://www.typescriptlang.org/zh/tsconfig#paths) | 一些将模块导入重新映射到相对于 baseUrl 路径的配置
+`resolveJsonModule` [#](https://www.typescriptlang.org/zh/tsconfig#resolveJsonModule) | 允许导入带有“.json”扩展名的模块，这是 node 项目中的常见做法
+`rootDir` [#](https://www.typescriptlang.org/zh/tsconfig#rootDir) | 默认: 所有输入的非声明文件中的最长公共路径
+`rootDirs` [#](https://www.typescriptlang.org/zh/tsconfig#rootDirs) | 通过 rootDirs，你可以告诉编译器有许多“虚拟”的目录作为一个根目录
+`typeRoots` [#](https://www.typescriptlang.org/zh/tsconfig#typeRoots) | 默认情况下，所有 可见 的 ”@types” 包都将包含在你的编译过程中
+`types` [#](https://www.typescriptlang.org/zh/tsconfig#types) | 默认情况下，所有 可见 的 ”@types” 包都将包含在你的编译过程中
+<!--rehype:className=style-list-arrow-->
+
+### Emit(compilerOptions)
+<!--rehype:wrap-class=row-span-6-->
+
+:- | --
+:- | --
+`declaration` [#](https://www.typescriptlang.org/zh/tsconfig#declaration) | 为项目中的每个 TypeScript 或 JavaScript 文件生成 .d.ts 文件
+`declarationDir` [#](https://www.typescriptlang.org/zh/tsconfig#declarationDir) | 提供一种配置发出声明文件的根目录的方法
+`declarationMap` [#](https://www.typescriptlang.org/zh/tsconfig#declarationMap) | 为映射回原始 .ts 源文件的 .d.ts 文件生成源映射
+`downlevelIteration` [#](https://www.typescriptlang.org/zh/tsconfig#downlevelIteration) | 降级是 TypeScript 的术语，用于转译到旧版本的 JavaScript
+`emitBOM` [#](https://www.typescriptlang.org/zh/tsconfig#emitBOM) | 控制 TypeScript 在写入输出文件时是否会发出字节顺序标记 (BOM)
+`emitDeclarationOnly` [#](https://www.typescriptlang.org/zh/tsconfig#emitDeclarationOnly) | 只发出 .d.ts 文件；不要发出 .js 文件
+`importHelpers` [#](https://www.typescriptlang.org/zh/tsconfig#importHelpers) | 对于某些降级操作，TypeScript 使用一些辅助代码来执行扩展类、展开数组或对象以及异步操作等操作
+`importsNotUsedAsValues` [#](https://www.typescriptlang.org/zh/tsconfig#importsNotUsedAsValues) | 此标志控制导入的工作方式，有 3 个不同的选项: `remove`, `preserve`, `error`
+`inlineSourceMap` [#](https://www.typescriptlang.org/zh/tsconfig#inlineSourceMap) | 设置后，TypeScript 不会写出 .js.map 文件来提供源映射，而是将源映射内容嵌入到 .js 文件中
+`inlineSources` [#](https://www.typescriptlang.org/zh/tsconfig#inlineSources) | 设置后，TypeScript 会将 .ts 文件的原始内容作为嵌入字符串包含在源映射中（使用源映射的 sourcesContent 属性）
+`mapRoot` [#](https://www.typescriptlang.org/zh/tsconfig#mapRoot) | 指定调试器应该定位映射文件而不是生成位置的位置
+`newLine` [#](https://www.typescriptlang.org/zh/tsconfig#newLine) | 指定发出文件时要使用的行尾顺序：“CRLF”（dos）或“LF”（unix）
+`noEmit` [#](https://www.typescriptlang.org/zh/tsconfig#noEmit) | 不要发出编译器输出文件，如 JavaScript 源代码、源映射或声明
+`noEmitHelpers` [#](https://www.typescriptlang.org/zh/tsconfig#noEmitHelpers) | 您可以在全局范围内为您使用的助手提供实现，并完全关闭助手函数的发出，而不是使用 importHelpers 导入助手
+`noEmitOnError` [#](https://www.typescriptlang.org/zh/tsconfig#noEmitOnError) | 如果报告了任何错误，请不要发出编译器输出文件，如 JavaScript 源代码、源映射或声明
+`outDir` [#](https://www.typescriptlang.org/zh/tsconfig#outDir) | 如果指定，.js（以及 .d.ts、.js.map 等）文件将被发送到此目录中
+`outFile` [#](https://www.typescriptlang.org/zh/tsconfig#outFile) | 如果指定，所有全局（非模块）文件将连接到指定的单个输出文件中
+`preserveConstEnums` [#](https://www.typescriptlang.org/zh/tsconfig#preserveConstEnums) | 不要删除生成的代码中的 const enum 声明
+`preserveValueImports` [#](https://www.typescriptlang.org/zh/tsconfig#preserveValueImports) | 在某些情况下，TypeScript 无法检测到您正在使用导入
+`removeComments` [#](https://www.typescriptlang.org/zh/tsconfig#removeComments) | 转换为 JavaScript 时从 TypeScript 文件中删除所有注释
+`sourceMap` [#](https://www.typescriptlang.org/zh/tsconfig#sourceMap) | 启用源映射文件的生成
+`sourceRoot` [#](https://www.typescriptlang.org/zh/tsconfig#sourceRoot) | 指定调试器应定位 TypeScript 文件的位置，而不是相对源位置
+`stripInternal` [#](https://www.typescriptlang.org/zh/tsconfig#stripInternal) | 不要为在其 JSDoc 注释中具有 @internal 注释的代码发出声明
+<!--rehype:className=style-list-arrow-->
+
+### JavaScript 支持(compilerOptions)
+
+:- | --
+:- | --
+`allowJs` [#](https://www.typescriptlang.org/zh/tsconfig#allowJs) | 允许 JavaScript 文件在你的工程中被引入，而不是仅仅允许 .ts 和 .tsx 文件
+`checkJs` [#](https://www.typescriptlang.org/zh/tsconfig#checkJs) | 与 allowJs 配合使用，当 checkJs 被启用时，JavaScript 文件中会报告错误
+`maxNodeModuleJsDepth` [#](https://www.typescriptlang.org/zh/tsconfig#maxNodeModuleJsDepth) | 在 node_modules 下搜索和加载 JavaScript 文件的最大依赖深度
+<!--rehype:className=style-list-arrow-->
+
+### 编辑器支持(compilerOptions)
+
+:- | --
+:- | --
+`disableSizeLimit` [#](https://www.typescriptlang.org/zh/tsconfig#disableSizeLimit) | 分配的内存量有一个上限。打开此标志将删除限制
+`plugins` [#](https://www.typescriptlang.org/zh/tsconfig#plugins) | 可在编辑器内运行的语言服务插件列表
+<!--rehype:className=style-list-arrow-->
+
+### 互操作约束(compilerOptions)
+
+:- | --
+:- | --
+`allowSyntheticDefaultImports` [#](https://www.typescriptlang.org/zh/tsconfig#allowSyntheticDefaultImports) | 允许合成默认导入
+`esModuleInterop` [#](https://www.typescriptlang.org/zh/tsconfig#esModuleInterop) | ES 模块互操作
+`forceConsistentCasingInFileNames` [#](https://www.typescriptlang.org/zh/tsconfig#forceConsistentCasingInFileNames) | 在文件名中强制使用一致的大小写
+`isolatedModules` [#](https://www.typescriptlang.org/zh/tsconfig#isolatedModules) | 隔离模块
+`preserveSymlinks` [#](https://www.typescriptlang.org/zh/tsconfig#preserveSymlinks) | 保留符号链接
+<!--rehype:className=style-list-arrow-->
+
+### 向后兼容性(compilerOptions)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | --
+:- | --
+`charset` [#](https://www.typescriptlang.org/zh/tsconfig#charset) | 在早期版本的 TypeScript 中，这控制了从磁盘读取文本文件时使用的编码
+`keyofStringsOnly` [#](https://www.typescriptlang.org/zh/tsconfig#keyofStringsOnly) | 此标志将 `keyof` 类型运算符更改为返回 `string` 而不是 `string | number` 当应用于具有字符串索引签名的类型时
+`noImplicitUseStrict` [#](https://www.typescriptlang.org/zh/tsconfig#noImplicitUseStrict) | 默认情况下，当向非 ES6 目标发出模块文件时，TypeScript 发出`"use strict"`；文件顶部的序言。此设置禁用序言
+`noStrictGenericChecks` [#](https://www.typescriptlang.org/zh/tsconfig#noStrictGenericChecks) | TypeScript 在比较两个泛型函数时会统一类型参数
+`out` [#](https://www.typescriptlang.org/zh/tsconfig#out) | 请改用 `outFile`
+`suppressExcessPropertyErrors` [#](https://www.typescriptlang.org/zh/tsconfig#suppressExcessPropertyErrors) | 抑制过多的属性错误
+`suppressImplicitAnyIndexErrors` [#](https://www.typescriptlang.org/zh/tsconfig#suppressImplicitAnyIndexErrors) | 抑制隐式任何索引错误
+<!--rehype:className=style-list-arrow-->
+
+### 完整性(compilerOptions)
+
+:- | --
+:- | --
+`skipDefaultLibCheck` [#](https://www.typescriptlang.org/zh/tsconfig#skipDefaultLibCheck) | 请改用 `skipLibCheck`
+`skipLibCheck` [#](https://www.typescriptlang.org/zh/tsconfig#skipLibCheck) | 跳过声明文件的类型检查
+
+### 语言与环境(compilerOptions)
+<!--rehype:wrap-class=row-span-2-->
+
+:- | --
+:- | --
+`emitDecoratorMetadata` [#](https://www.typescriptlang.org/zh/tsconfig#emitDecoratorMetadata) | 发射装饰器元数据
+`experimentalDecorators` [#](https://www.typescriptlang.org/zh/tsconfig#experimentalDecorators) | 实验装饰器
+`jsx` [#](https://www.typescriptlang.org/zh/tsconfig#jsx) | 控制 JSX 在 JavaScript 文件中的输出方式
+`jsxFactory` [#](https://www.typescriptlang.org/zh/tsconfig#jsxFactory) | 使用经典 JSX 运行时编译 JSX 元素时更改在 .js 文件中调用的函数
+`jsxFragmentFactory` [#](https://www.typescriptlang.org/zh/tsconfig#jsxFragmentFactory) | 指定在使用 jsxFactory 编译器选项指定 react JSX emit 时要使用的 JSX 片段工厂函数，例如 `Fragment`
+`jsxImportSource` [#](https://www.typescriptlang.org/zh/tsconfig#jsxImportSource) | 声明模块说明符用于在将 jsx 用作 TypeScript 4.1 中引入的“react-jsx”或“react-jsxdev”时导入 jsx 和 jsxs 工厂函数
+`lib` [#](https://www.typescriptlang.org/zh/tsconfig#lib) | TypeScript 包括一组默认的内建 JS 接口（例如 Math）的类型定义，以及在浏览器环境中存在的对象的类型定义（例如 document）
+`moduleDetection` [#](https://www.typescriptlang.org/zh/tsconfig#moduleDetection) | 模块检测
+`noLib` [#](https://www.typescriptlang.org/zh/tsconfig#noLib) | 禁用自动包含任何库文件
+`reactNamespace` [#](https://www.typescriptlang.org/zh/tsconfig#reactNamespace) | 请改用 jsxFactory
+`target` [#](https://www.typescriptlang.org/zh/tsconfig#target) | 现代浏览器支持全部 ES6 的功能，所以 ES6 是一个不错的选择
+`useDefineForClassFields` [#](https://www.typescriptlang.org/zh/tsconfig#useDefineForClassFields) | 为类字段使用定义
+<!--rehype:className=style-list-arrow-->
+
+### 输出格式(compilerOptions)
+
+:- | --
+:- | --
+`noErrorTruncation` [#](https://www.typescriptlang.org/zh/tsconfig#noErrorTruncation) | 不要截断错误消息
+`preserveWatchOutput` [#](https://www.typescriptlang.org/zh/tsconfig#preserveWatchOutput) | 保留监视输出
+`pretty` [#](https://www.typescriptlang.org/zh/tsconfig#pretty) | 使用颜色和上下文对错误和消息进行样式化，默认情况下启用
+<!--rehype:className=style-list-arrow-->
+
+### 项目(compilerOptions)
+
+:- | --
+:- | --
+`composite` [#](https://www.typescriptlang.org/zh/tsconfig#composite) | composite 选项会强制执行某些约束，使得构建工具（包括 在 --build 模式下的 TypeScript 本身）可以快速确定一个工程是否已经建立
+`disableReferencedProjectLoad` [#](https://www.typescriptlang.org/zh/tsconfig#disableReferencedProjectLoad) | 禁用引用项目加载
+`disableSolutionSearching` [#](https://www.typescriptlang.org/zh/tsconfig#disableSolutionSearching) | 禁用解决方案搜索
+`disableSourceOfProjectReferenceRedirect` [#](https://www.typescriptlang.org/zh/tsconfig#disableSourceOfProjectReferenceRedirect) | 禁用源项目引用重定向
+`incremental` [#](https://www.typescriptlang.org/zh/tsconfig#incremental) | 使 TypeScript 将上次编译的工程图信息保存到磁盘上的文件中
+`tsBuildInfoFile` [#](https://www.typescriptlang.org/zh/tsconfig#tsBuildInfoFile) | 这个选项可以让您指定一个文件来存储增量编译信息，以作为复合工程的一部分，从而可以更快的构建更大的 TypeScript 代码库
+<!--rehype:className=style-list-arrow-->
+
+### 编译器诊断(compilerOptions)
+
+:- | --
+:- | --
+`diagnostics` [#](https://www.typescriptlang.org/zh/tsconfig#diagnostics) | 用于输出调试信息
+`explainFiles` [#](https://www.typescriptlang.org/zh/tsconfig#explainFiles) | 打印 TypeScript 视为项目一部分的文件的名称以及它们是编译一部分的原因
+`extendedDiagnostics` [#](https://www.typescriptlang.org/zh/tsconfig#extendedDiagnostics) | 您可以使用此标志来发现 TypeScript 在编译时将时间花在哪里
+`generateCpuProfile` [#](https://www.typescriptlang.org/zh/tsconfig#generateCpuProfile) | 此选项使您有机会让 TypeScript 在编译器运行期间发出 v8 CPU 配置文件
+`listEmittedFiles` [#](https://www.typescriptlang.org/zh/tsconfig#listEmittedFiles) | 将编译过程中生成的文件的名称打印到终端
+`listFiles` [#](https://www.typescriptlang.org/zh/tsconfig#listFiles) | 打印编译部分文件的名称
+`traceResolution` [#](https://www.typescriptlang.org/zh/tsconfig#traceResolution) | 当您尝试调试未包含模块的原因时
+<!--rehype:className=style-list-arrow-->
+
+### 监听选项(watchOptions)
+
+:- | --
+:- | --
+`watchFile` [#](https://www.typescriptlang.org/zh/tsconfig#watch-watchFile) | 如何监视单个文件的策略
+`watchDirectory` [#](https://www.typescriptlang.org/zh/tsconfig#watch-watchDirectory) | 在缺乏递归文件监视功能的系统下监视整个目录树的策略
+`fallbackPolling` [#](https://www.typescriptlang.org/zh/tsconfig#watch-fallbackPolling) | 使用文件系统事件时，此选项指定当系统用完本机文件观察器和/或不支持本机文件观察器时使用的轮询策略
+`synchronousWatchDirectory` [#](https://www.typescriptlang.org/zh/tsconfig#watch-synchronousWatchDirectory) | 在本机不支持递归监视的平台上同步调用回调并更新目录监视程序的状态
+`excludeDirectories` [#](https://www.typescriptlang.org/zh/tsconfig#watch-excludeDirectories) | 您可以使用 excludeFiles 来大幅减少在 --watch 期间监视的文件数量
+`excludeFiles` [#](https://www.typescriptlang.org/zh/tsconfig#watch-excludeFiles) | 您可以使用 excludeFiles 从监视的文件中删除一组特定文件
+<!--rehype:className=style-list-arrow-->
+
+---
+
+```js
+{
+  "watchOptions": {
+    "synchronousWatchDirectory": true
+  }
+}
+```
+
+### 类型采集(typeAcquisition)
+
+:- | --
+:- | --
+`enable` [#](https://www.typescriptlang.org/zh/tsconfig#type-enable) | 提供用于在 JavaScript 项目中禁用类型获取的配置
+`include` [#](https://www.typescriptlang.org/zh/tsconfig#type-include) | 如果您有一个 JavaScript 项目，其中 TypeScript 需要额外的指导来理解全局依赖关系，或者已通过 disableFilenameBasedTypeAcquisition 禁用了内置推理
+`exclude` [#](https://www.typescriptlang.org/zh/tsconfig#type-exclude) | 提供用于禁用 JavaScript 项目中特定模块的类型获取的配置
+`disableFilenameBasedTypeAcquisition` [#](https://www.typescriptlang.org/zh/tsconfig#type-disableFilenameBasedTypeAcquisition) | TypeScript 的类型获取可以根据项目中的文件名推断出应该添加哪些类型
+<!--rehype:className=style-list-arrow-->
+
+---
+
+```js
+{
+  "typeAcquisition": {
+    "enable": false
+  }
+}
+```
+
 另见
 ----
 

docs/vue.md

@@ -64,11 +64,14 @@ $ npm run build
 <!--rehype:wrap-class=row-span-2-->
 
 ```js
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 
 const app = createApp({
-  data() {
-    return { count: 0 }
+  setup() {
+    const message = ref("Hello Vue3")
+    return {
+      message
+    }
   }
 })
 app.mount('#app')
@@ -90,11 +93,12 @@ app.mount('#app')
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <div id="app">{{ message }}</div>
 <script>
-  const { createApp } = Vue
+  const { createApp, ref } = Vue
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -105,13 +109,14 @@ app.mount('#app')
 ### 使用 ES 模块构建版本
 
 ```html
-<div id="app">{{ message }}</div>
+<div id="app">{{ message, ref }}</div>
 <script type="module">
-  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -164,21 +169,28 @@ app.mount('#app')
 ### 动态绑定多个值
 <!--rehype:wrap-class=row-span-2-->
 
-```js
-data() {
-  return {
-    objectOfAttrs: {
-      id: 'container',
-      class: 'wrapper'
-    }
-  }
-}
-```
-
 通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
 
 ```html
-<div v-bind="objectOfAttrs"></div>
+<script setup>
+  import comp from "./Comp.vue"
+  import {ref} from "vue"
+  const a = ref("hello")
+  const b = ref("world")
+</script>
+
+<template>
+  <comp v-bind="{a, b}"></comp>
+</template>
+```
+
+如果你是使用的 `setup` 语法糖。需要使用 `defineprops` 声名（可以直接使用`a`/`b`）
+
+```js
+const props = defineProps({
+  a: String,
+  b: String
+})
 ```
 
 ### 使用 JavaScript 表达式
@@ -229,6 +241,7 @@ data() {
 <!-- 简写 -->
 <a @click="doSomething"> ... </a>
 ```
+<!--rehype:className=wrap-text-->
 
 ### 动态参数
 
@@ -285,7 +298,7 @@ import { defineComponent, reactive } from 'vue';
 
 // `defineComponent`用于IDE推导类型
 export default defineComponent({
-  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
+  // setup 用于组合式 API 的特殊钩子函数
   setup() {
     const state = reactive({ count: 0 });
 
@@ -296,6 +309,7 @@ export default defineComponent({
   },
 });
 ```
+<!--rehype:className=wrap-text-->
 
 ### 声明方法
 
@@ -326,12 +340,12 @@ export default defineComponent({
   },
 })
 ```
+<!--rehype:className=wrap-text-->
 
 ### `<script setup>` setup语法糖
 
 ```html {1}
 <script setup>
-// setup语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
 import { reactive } from 'vue';
 
 const state = reactive({ count: 0 })
@@ -348,30 +362,30 @@ function increment() {
 </template>
 ```
 
+**`setup`** 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
+
 ### 用 `ref()` 定义响应式变量
+<!--rehype:wrap-class=row-span-2-->
+
+`reactive`只能用于对象、数组和 `Map`、`Set` 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 
 ```js
-// `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 import { ref } from 'vue';
 
 const count = ref(0);
 
 console.log(count); // { value: 0 }
 console.log(count.value); // 0
-
 count.value++;
 console.log(count.value); // 1
-
 const objectRef = ref({ count: 0 });
 
 // 这是响应式的替换
 objectRef.value = { count: 1 };
-
 const obj = {
   foo: ref(1),
   bar: ref(2)
 };
-
 // 该函数接收一个 ref
 // 需要通过 .value 取值
 // 但它会保持响应性
@@ -381,8 +395,9 @@ callSomeFunction(obj.foo);
 const { foo, bar } = obj;
 ```
 
+在 html 模板中不需要带 `.value` 就可以使用
+
 ```html
-<!-- PS: 在html模板中不需要带.value就可以使用 -->
 <script setup>
 import { ref } from 'vue';
 
@@ -397,6 +412,7 @@ const count = ref(0);
 ```
 
 ### 有状态方法
+<!--rehype:wrap-class=col-span-2-->
 
 ```js
 import { reactive, defineComponent, onUnmounted } from 'vue';
@@ -419,6 +435,246 @@ export default defineComponent({
   },
 });
 ```
+
+### 响应式样式
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+<script setup>
+import { ref } from 'vue'
+const open = ref(false);
+</script>
+
+<template>
+  <button @click="open = !open">Toggle</button>
+  <div>Hello Vue!</div>  
+</template>
+
+<style scope>
+  div{
+    transition: height 0.1s linear;
+    overflow: hidden;
+    height: v-bind(open ? '30px' : '0px');
+  }
+</style>
+```
+
+响应式进阶 —— watch 和 computed
+---
+
+### 监听状态
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<script setup>
+import { ref, watch } from 'vue';
+
+const count = ref(0)
+const isEvent = ref(false)
+
+function increment() {
+  state.count++
+}
+
+watch(count, function() {
+  isEvent.value = count.value % 2 === 0
+})
+</script>
+
+<template>
+  <button @click="increment">
+    {{ count }}
+  </button>
+  <p>
+    is event: {{ isEvent ? 'yes' : 'no' }}
+  </p>
+</template>
+```
+
+### 立即监听状态
+<!--rehype:wrap-class=col-span-2-->
+
+```js
+watch(count, function() {
+  isEvent.value = count.value % 2 === 0
+}, {
+  // 上例中的 watch 不会立即执行，导致 isEvent 状态的初始值不准确。配置立即执行，会在一开始的时候立即执行一次
+  immediate: true
+})
+```
+<!--rehype:className=wrap-text-->
+
+### 计算状态
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+<script setup>
+import { ref, computed } from 'vue';
+
+const text = ref('')
+// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
+const capital = computed(function(){
+  return text.value.toUpperCase();
+})
+</script>
+
+<template>
+  <input v-model="text" />
+  <p>to capital: {{ capital }}</p>
+</template>
+```
+
+组件通信
+---
+
+### defineProps
+
+```html
+<script setup>
+import { defineProps } from 'vue';
+
+// 这里可以将 `username` 解构出来，
+// 但是一旦解构出来再使用，就不具备响应式能力
+defineProps({
+  username: String
+})
+</script>
+
+<template>
+  <p>username: {{ username }}</p>
+</template>
+```
+
+子组件定义需要的参数
+
+```html
+<script setup>
+const username = 'vue'
+</script>
+
+<template>
+  <children :username="username" />
+</template>
+```
+
+父组件参入参数
+
+### defineEmits
+
+```html
+<script setup>
+import { defineEmits, ref } from 'vue';
+
+const emit = defineEmits(['search'])
+const keyword = ref('')
+const onSearch = function() {
+  emit('search', keyword.value)
+}
+</script>
+
+<template>
+  <input v-model="keyword" />
+  <button @click="onSearch">search</button>
+</template>
+```
+
+子组件定义支持 `emit` 的函数
+
+```html
+<script setup>
+const onSearch = function(keyword){
+  console.log(keyword)
+}
+</script>
+
+<template>
+  <children @search="onSearch" />
+</template>
+```
+
+父组件绑定子组件定义的事件
+
+### defineExpose
+
+```html
+<script setup>
+import { defineExpose, ref } from 'vue';
+
+const keyword = ref('')
+const onSearch = function() {
+  console.log(keyword.value)
+}
+
+defineExpose({ onSearch })
+</script>
+
+<template>
+  <input v-model="keyword" />
+</template>
+```
+
+子组件对父组件暴露方法
+
+```html
+<script setup>
+import { ref } from 'vue'  
+
+const childrenRef = ref(null)
+const onSearch = function() {
+  childrenRef.value.onSearch()
+}
+</script>
+
+<template>
+  <children ref='childrenRef' />
+  <button @click="onSearch">search</button>
+</template>
+```
+
+父组件调用子组件的方法
+
+### Provide / Inject
+
+```ts
+import type { InjectionKey, Ref } from 'vue'
+
+export const ProvideKey = Symbol() as InjectionKey<Ref<string>>
+```
+<!--rehype:className=wrap-text-->
+
+在应用中使用 `ProvideKey`
+
+```html
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import { ProvideKey } from './types'
+
+const text = ref<string>('123')
+provide(ProvideKey, text)
+</script>
+
+<template>
+  <input v-model="text" />
+</template>
+```
+
+父组件为后代组件提供数据
+
+```ts
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ProvideKey } from './types'
+
+const value = inject(ProvideKey)
+</script>
+
+<template>
+  <h4>{{value}}</h4>
+</template>
+```
+
+后代组件注入父组件提供的数据
+
 <!--rehype:className=wrap-text -->
 
 API 参考
@@ -446,8 +702,10 @@ API 参考
 `app.config.compilerOptions` | 配置运行时编译器的选项 [#](https://cn.vuejs.org/api/application.html#app-config-compileroptions)
 `app.config.globalProperties` | 注册全局属性对象 [#](https://cn.vuejs.org/api/application.html#app-config-globalproperties)
 `app.config.optionMergeStrategies` | 定义自定义组件选项的合并策略的对象 [#](https://cn.vuejs.org/api/application.html#app-config-optionmergestrategies)
+<!--rehype:className=style-list-->
 
 ### 全局 API - 通用
+<!--rehype:wrap-class=row-span-2-->
 
 :- | :-
 :- | :-
@@ -455,7 +713,8 @@ API 参考
 `nextTick()` | 等待下一次 DOM 更新后执行回调 [#](https://cn.vuejs.org/api/general.html#nexttick)
 `defineComponent()` | 在定义 Vue 组件时提供类型推导的辅助函数 [#](https://cn.vuejs.org/api/general.html#definecomponent)
 `defineAsyncComponent()` | 定义一个异步组件 [#](https://cn.vuejs.org/api/general.html#defineasynccomponent)
-`defineCustomElement()` | [#](https://cn.vuejs.org/api/general.html#definecustomelement)
+`defineCustomElement()` | 和 `defineComponent` 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器 [#](https://cn.vuejs.org/api/general.html#definecustomelement)
+<!--rehype:className=style-list-->
 
 ### 组合式 API - setup()
 
@@ -466,20 +725,14 @@ API 参考
 `Setup 上下文` | [#](https://cn.vuejs.org/api/composition-api-setup.html#setup-context)
 `与渲染函数一起使用` | [#](https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions)
 
-### 组合式 API - 响应式: 工具
+### 组合式 API - 依赖注入
 
 :- | :-
 :- | :-
-`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
-`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
-`toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
-`toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
-`isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
-`isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
-`isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
+`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
+`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
 
 ### 组合式 API - 生命周期钩子
-<!--rehype:wrap-class=row-span-3-->
 
 :- | :-
 :- | :-
@@ -497,12 +750,18 @@ API 参考
 `onServerPrefetch()` | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch)
 <!--rehype:className=style-list-->
 
-### 组合式 API - 依赖注入
+### 组合式 API - 响应式: 工具
 
 :- | :-
 :- | :-
-`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
-`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
+`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
+`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
+`toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
+`toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
+`isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
+`isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
+`isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
+<!--rehype:className=style-list-->
 
 ### 组合式 API - 响应式: 核心
 
@@ -516,6 +775,7 @@ API 参考
 `watchPostEffect()` | `watchEffect()` 使用 `flush: 'post'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchposteffect)
 `watchSyncEffect()` | `watchEffect()` 使用 `flush: 'sync'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchsynceffect)
 `watch()` | 侦听一个或多个响应式数据源 [#](https://cn.vuejs.org/api/reactivity-core.html#watch)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 状态选项
 
@@ -528,9 +788,10 @@ API 参考
 `watch` | 声明在数据更改时调用的侦听回调 [#](https://cn.vuejs.org/api/options-state.html#watch)
 `emits` | 声明由组件触发的自定义事件 [#](https://cn.vuejs.org/api/options-state.html#emits)
 `expose` | 声明当组件实例被父组件通过模板引用访问时暴露的公共属性 [#](https://cn.vuejs.org/api/options-state.html#expose)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 生命周期选项
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 
 :- | :-
 :- | :-
@@ -548,6 +809,7 @@ API 参考
 `activated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#activated)
 `deactivated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#deactivated)
 `serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 其他杂项
 
@@ -557,6 +819,7 @@ API 参考
 `inheritAttrs` | 是否启用默认的组件 `attribute` 透传行为 [#](https://cn.vuejs.org/api/options-misc.html#inheritattrs)
 `components` | 注册对当前组件实例可用的组件 [#](https://cn.vuejs.org/api/options-misc.html#components)
 `directives` | 注册对当前组件实例可用的指令 [#](https://cn.vuejs.org/api/options-misc.html#directives)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 渲染选项
 
@@ -565,6 +828,7 @@ API 参考
 `template` | 声明组件的字符串模板 [#](https://cn.vuejs.org/api/options-rendering.html#template)
 `render` | 编程式地创建组件虚拟 DOM 树的函数 [#](https://cn.vuejs.org/api/options-rendering.html#render)
 `compilerOptions` | 配置组件模板的运行时编译器选项 [#](https://cn.vuejs.org/api/options-rendering.html#compileroptions)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 组件实例
 <!--rehype:wrap-class=row-span-2-->
@@ -614,6 +878,7 @@ API 参考
 `v-once` | 只渲染元素和组件一次 [#](https://cn.vuejs.org/api/built-in-directives.html#v-once)
 `v-memo` _(3.2+)_ | 缓存一个模板的子树 [#](https://cn.vuejs.org/api/built-in-directives.html#v-memo)
 `v-cloak` | 保持在元素上直到实例结束编译 [#](https://cn.vuejs.org/api/built-in-directives.html#v-cloak)
+`serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
 
 ### 内置内容 - 组件
 
@@ -624,6 +889,7 @@ API 参考
 `<KeepAlive>` | 缓存包裹在其中的动态切换组件 [#](https://cn.vuejs.org/api/built-in-components.html#keepalive)
 `<Teleport>` | 将其插槽内容渲染到 DOM 中的另一个位置 [#](https://cn.vuejs.org/api/built-in-components.html#teleport)
 `<Suspense>` _(Experimental)_ | 协调对组件树中嵌套的异步依赖的处理 [#](https://cn.vuejs.org/api/built-in-components.html#suspense)
+<!--rehype:className=style-list-->
 
 ### 内置内容 - 特殊 Attributes
 
@@ -711,6 +977,7 @@ API 参考
 `ComponentCustomOptions` | 扩展组件选项类型以支持自定义选项 [#](https://cn.vuejs.org/api/utility-types.html#componentcustomoptions)
 `ComponentCustomProps` | 扩展全局可用的 TSX props [#](https://cn.vuejs.org/api/utility-types.html#componentcustomprops)
 `CSSProperties` | 扩展在样式属性绑定上允许的值的类型 [#](https://cn.vuejs.org/api/utility-types.html#cssproperties)
+<!--rehype:className=style-list-->
 
 ### 进阶 API - 自定义渲染
 

docs/vue2.md

@@ -17,12 +17,14 @@ Vue 是一套用于构建用户界面的渐进式框架
 
 注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本
 
-#### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html))
+#### 快速创建 **Vue** 项目
 
 ```bash
 npx @vue/cli create hello-world
 ```
 
+参考: [Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html) 创建一个项目
+
 ### 声明式渲染
 
 ```html
@@ -655,6 +657,8 @@ Jane Doe
 <p v-else>No todos left!</p>
 ```
 
+注意: `v-for` 和 `v-if` 不推荐一起使用[参考官方文档](https://v2.cn.vuejs.org/v2/guide/conditional.html#v-if-与-v-for-一起使用)
+
 ### 组件上使用 v-for
 
 ```html

docs/yum.md

@@ -416,7 +416,7 @@ yum install --downloadonly vsftpd
 ---
 
 - [YUM 官方网站](http://yum.baseurl.org/) _(yum.baseurl.org)_
-- [YUM 备忘清单(适用于红帽 RedHad 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
+- [YUM 备忘清单(适用于红帽 RedHat 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
 - [用 yum 管理软件包](http://prefetch.net/articles/yum.html) _(prefetch.net)_
 - [Fedora 中的 Yum 文档](https://docs.fedoraproject.org/en-US/Fedora/15/html/Deployment_Guide/ch-yum.html) _(fedoraproject.org)_
 - [CentOS 中的 Yum 文档](http://wiki.centos.org/PackageManagement/Yum/) _(wiki.centos.org)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcj/reference",
-  "version": "1.21.0",
+  "version": "1.26.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",
@@ -22,8 +22,10 @@
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.2",
+    "@uiw/formatter": "^1.3.3",
+    "@wcj/markdown-to-html": "^2.2.0",
     "chokidar": "^3.5.3",
+    "dotenv": "^16.0.3",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",

scripts/assets/cmd.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="m10.875 7 2.008 5h-.711l-2.008-5h.711zm-5.125.594c-.276 0-.526.041-.75.125a1.542 1.542 0 0 0-.578.375c-.162.166-.287.37-.375.61a2.364 2.364 0 0 0-.133.827c0 .287.04.547.117.781.078.235.196.433.352.594.156.162.346.29.57.383.224.094.48.138.766.133a2.63 2.63 0 0 0 .992-.195l.125.484a1.998 1.998 0 0 1-.492.148 4.381 4.381 0 0 1-.75.07 2.61 2.61 0 0 1-.914-.156 2.207 2.207 0 0 1-.742-.453 1.878 1.878 0 0 1-.485-.742 3.204 3.204 0 0 1-.18-1.023c0-.365.06-.698.18-1 .12-.302.287-.563.5-.782.214-.218.471-.388.774-.507a2.69 2.69 0 0 1 1-.18c.296 0 .536.023.718.07.183.047.315.094.399.14l-.149.493a1.85 1.85 0 0 0-.406-.14 2.386 2.386 0 0 0-.539-.055zM8 8h1v1H8V8zm0 2h1v1H8v-1z"/>
+  <path d="M15.5 1H.5l-.5.5v13l.5.5h15l.5-.5v-13l-.5-.5zM15 14H1V5h14v9zm0-10H1V2h14v2z"/>
+</svg>

scripts/assets/cpp.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 187 155">
+<path fill="currentColor" d="M77.4039102,0.01171875 C104.893578,0.01171875 130.532863,14.8054453 144.312707,38.6186211 L110.875113,57.9682852 C103.978656,46.0481602 91.1520117,38.6428945 77.4039102,38.6428945 C56.1021016,38.6428945 38.7718008,55.9731953 38.7718008,77.2750039 C38.7718008,98.5758789 56.1021016,115.90618 77.4039102,115.90618 C91.1529453,115.90618 103.97959,108.500914 110.87698,96.5789219 L144.314574,115.927652 C130.53473,139.743629 104.895445,154.537355 77.4039102,154.537355 C34.800293,154.537355 0.140625,119.877688 0.140625,77.2750039 C0.140625,34.6713867 34.800293,0.01171875 77.4039102,0.01171875 Z M146.080934,64.3970117 L146.080934,72.9823398 L154.666262,72.9823398 L154.666262,81.5667344 L146.080934,81.5667344 L146.080934,90.1520625 L137.497473,90.1520625 L137.497473,81.5667344 L128.912145,81.5667344 L128.912145,72.9823398 L137.497473,72.9823398 L137.497473,64.3970117 L146.080934,64.3970117 Z M178.274047,64.3970117 L178.274047,72.9823398 L186.859375,72.9823398 L186.859375,81.5667344 L178.274047,81.5667344 L178.274047,90.1520625 L169.690586,90.1520625 L169.690586,81.5667344 L161.105258,81.5667344 L161.105258,72.9823398 L169.690586,72.9823398 L169.690586,64.3970117 L178.274047,64.3970117 Z"/></svg>

scripts/assets/flutter.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
+  <defs>
+    <linearGradient x1="3.952%" y1="26.993%" x2="75.897%" y2="52.919%" id="a">
+      <stop offset="0%"/>
+      <stop stop-opacity="0" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <path fill="#47C5FB" d="M157.666 0 0 157.667l48.8 48.8L255.268.001zm-1.099 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.424z"/>
+  <path fill="#00569E" d="m121.133 279.531 37.082 37.082h97.052l-85.425-85.792z"/>
+  <path fill="#00B5F8" d="m71.6 230.364 48.801-48.801 49.441 49.258-48.71 48.71z"/>
+  <path fill-opacity=".8" fill="url(#a)" d="m121.133 279.531 40.56-13.459 4.029-31.13z"/>
+</svg>

scripts/assets/kotlin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" height="1em" width="1em">
+  <path d="m1.734 32 15.068-15.333L32 32zM0 0h16L0 16.667zm17.865 0L0 18.667V32L32 0z"/>
+</svg>

scripts/assets/laravel.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 256 264" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
+  <path d="M255.856 59.62c.095.351.144.713.144 1.077v56.568c0 1.478-.79 2.843-2.073 3.578L206.45 148.18v54.18a4.135 4.135 0 0 1-2.062 3.579l-99.108 57.053c-.227.128-.474.21-.722.299-.093.03-.18.087-.278.113a4.15 4.15 0 0 1-2.114 0c-.114-.03-.217-.093-.325-.134-.227-.083-.464-.155-.68-.278L2.073 205.938A4.128 4.128 0 0 1 0 202.36V32.656c0-.372.052-.733.144-1.083.031-.119.103-.227.145-.346.077-.216.15-.438.263-.639.077-.134.19-.242.283-.366.119-.165.227-.335.366-.48.119-.118.274-.206.408-.309.15-.124.283-.258.453-.356h.005L51.613.551a4.135 4.135 0 0 1 4.125 0l49.546 28.526h.01c.165.104.305.232.454.351.134.103.284.196.402.31.145.149.248.32.371.484.088.124.207.232.279.366.118.206.185.423.268.64.041.118.113.226.144.35.095.351.144.714.145 1.078V138.65l41.286-23.773V60.692c0-.36.052-.727.145-1.072.036-.124.103-.232.144-.35.083-.217.155-.44.268-.64.077-.134.19-.242.279-.366.123-.165.226-.335.37-.48.12-.118.269-.206.403-.309.155-.124.289-.258.454-.356h.005l49.551-28.526a4.13 4.13 0 0 1 4.125 0l49.546 28.526c.175.103.309.232.464.35.128.104.278.197.397.31.144.15.247.32.37.485.094.124.207.232.28.366.118.2.185.423.267.64.047.118.114.226.145.35Zm-8.115 55.258v-47.04l-17.339 9.981-23.953 13.792v47.04l41.297-23.773h-.005Zm-49.546 85.095V152.9l-23.562 13.457-67.281 38.4v47.514l90.843-52.3ZM8.259 39.796v160.177l90.833 52.294v-47.505L51.64 177.906l-.015-.01-.02-.01c-.16-.093-.295-.227-.444-.34-.13-.104-.279-.186-.392-.3l-.01-.015c-.134-.129-.227-.289-.34-.433-.104-.14-.227-.258-.31-.402l-.005-.016c-.093-.154-.15-.34-.217-.515-.067-.155-.154-.3-.196-.464v-.005c-.051-.196-.061-.403-.082-.604-.02-.154-.062-.309-.062-.464V63.57L25.598 49.772l-17.339-9.97v-.006ZM53.681 8.893 12.399 32.656l41.272 23.762L94.947 32.65 53.671 8.893h.01Zm21.468 148.298 23.948-13.786V39.796L81.76 49.778 57.805 63.569v103.608l17.344-9.986ZM202.324 36.935l-41.276 23.762 41.276 23.763 41.271-23.768-41.27-23.757Zm-4.13 54.676-23.953-13.792-17.338-9.981v47.04l23.948 13.787 17.344 9.986v-47.04Zm-94.977 106.006 60.543-34.564 30.264-17.272-41.246-23.747-47.489 27.34-43.282 24.918 41.21 23.325Z" fill="currentColor"/>
+</svg>

scripts/assets/lua.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" height="1em" width="1em">
+  <path d="m.505 13.839-.36-.052c-.067.459-.109.927-.135 1.391l.364.02c.027-.452.068-.911.131-1.359zm5.011-9.454-.245-.271c-.344.307-.683.635-.995.973l.265.256c.313-.333.636-.656.975-.959zm2.177-1.64-.199-.313c-.391.251-.781.516-1.145.792l.219.292a14.89 14.89 0 0 1 1.125-.771zM2.432 24.489c.245.396.511.781.792 1.151l.292-.219a15.077 15.077 0 0 1-.771-1.124zm-.927-2.62-.344.141c.172.421.365.844.579 1.255l.005.016.328-.167-.011-.016a15.065 15.065 0 0 1-.557-1.229zM.396 12.412l.359.083c.105-.443.224-.885.365-1.312l-.349-.115a15.9 15.9 0 0 0-.375 1.344zm-.032 4.151L0 16.574c.016.463.052.932.109 1.391l.364-.043a14.992 14.992 0 0 1-.109-1.359zm-.02 2.781c.093.453.213.907.349 1.349l.348-.105c-.129-.437-.244-.88-.344-1.323zM15.432.364 15.416 0c-.463.016-.932.052-1.389.109l.047.364c.448-.057.905-.093 1.359-.109zm15.532 11.057c.129.433.244.881.339 1.324l.359-.079a14.795 14.795 0 0 0-.349-1.355zm-7.469-9.566a15.542 15.542 0 0 0-1.26-.6l-.147.333c.423.177.833.376 1.235.589zM20.921.76a17.402 17.402 0 0 0-1.343-.364l-.084.353c.443.105.885.224 1.317.365zM8.901 2.063c.396-.203.807-.391 1.219-.557l-.141-.344a15.88 15.88 0 0 0-1.244.573l-.021.011.167.328zm22.735 13.39.369-.016a21.153 21.153 0 0 0-.109-1.396l-.365.047c.053.448.089.907.105 1.365zM18.203.14a15.693 15.693 0 0 0-1.391-.129l-.015.364c.453.021.911.068 1.359.131zm-5.479.563-.079-.359c-.452.093-.905.213-1.348.349l.109.348c.432-.129.875-.244 1.317-.339zM2.563 7.292l.307.197c.245-.375.511-.749.787-1.109l-.287-.229c-.287.371-.557.756-.807 1.141zM1.255 9.755l.339.147c.177-.417.376-.833.589-1.235l-.328-.172c-.215.412-.417.833-.6 1.26zm23.042 19.5.192.313c.396-.245.781-.511 1.151-.792l-.219-.292c-.359.271-.739.537-1.124.771zm4.031-3.63.292.229c.287-.365.557-.751.807-1.141l-.301-.197c-.251.38-.516.749-.797 1.109zm-1.855 1.995.245.271c.344-.307.683-.64.995-.973l-.265-.256c-.308.333-.641.651-.975.959zm3.339-4.281.324.172c.219-.412.421-.833.599-1.26l-.339-.141c-.177.417-.369.828-.584 1.229zm1.677-5.167.365.052c.063-.464.109-.927.135-1.391l-.364-.021c-.027.453-.073.912-.136 1.36zm-.614 2.656.355.115c.14-.443.265-.896.369-1.349l-.359-.083c-.1.448-.224.891-.365 1.317zm-.938-11.932c.203.407.396.823.568 1.244l.339-.14c-.172-.427-.371-.86-.584-1.271zM11.063 31.224c.443.14.891.265 1.344.369l.083-.353a15.487 15.487 0 0 1-1.312-.365zm2.718.631c.459.063.927.109 1.391.135l.016-.369a15.064 15.064 0 0 1-1.36-.131zm9.318-1.923c-.401.204-.812.396-1.235.563l.141.344c.421-.177.855-.365 1.26-.579l.005-.005-.161-.328zM6.151 28.625c.365.281.751.557 1.141.801l.197-.301c-.38-.251-.755-.516-1.115-.792zm10.406 3.011.011.364c.463-.021.932-.052 1.396-.115l-.047-.359c-.448.057-.907.093-1.36.109zM8.495 30.14c.407.215.833.417 1.26.6l.141-.339a17.761 17.761 0 0 1-1.229-.589zm-4.386-3.421c.312.349.64.683.979.995l.251-.265a15.397 15.397 0 0 1-.953-.975zm15.151 4.584.079.359c.453-.099.907-.219 1.355-.355l-.109-.348a21.46 21.46 0 0 1-1.324.344zM28.24.172a3.583 3.583 0 0 0-3.584 3.583 3.584 3.584 0 0 0 3.584 3.589c4.781 0 4.781-7.172 0-7.172zm-7.808 20.421c0 .631.417.88 1.136.88.896 0 1.729-.525 1.729-1.353v-.86c-.308.147-.505.188-1.475.324-.979.145-1.391.405-1.391 1.009zM16 3.755c-6.76 0-12.24 5.48-12.24 12.24S9.24 28.24 16 28.24s12.24-5.485 12.24-12.245c0-6.755-5.48-12.24-12.24-12.24zM12.683 22.12H7.694v-8.032h1.025v7.125h3.969v.907zm5.51 0h-.829v-.896c-.541.76-1.077 1.057-1.927 1.057-1.125 0-1.839-.62-1.839-1.579v-4.359h.912v4c0 .692.463 1.135 1.192 1.135.959 0 1.573-.771 1.573-1.948v-3.187h.917zm-.709-11.193a3.583 3.583 0 1 1 7.166 0 3.583 3.583 0 0 1-7.166 0zm7.423 10.474v.692c-.297.079-.437.1-.625.1a.976.976 0 0 1-.953-.761 2.695 2.695 0 0 1-1.959.849c-1.172 0-1.896-.615-1.896-1.661 0-.703.339-1.224 1.011-1.5.36-.141.552-.188 1.855-.349.729-.088.959-.255.959-.64v-.245c0-.547-.464-.859-1.287-.859-.865 0-1.276.323-1.36 1.025h-.921c.057-1.333.916-1.869 2.312-1.869 1.423 0 2.167.547 2.167 1.572v3.219c0 .287.177.448.5.448.052 0 .099 0 .199-.02z"/>
+</svg>

scripts/assets/mitmproxy.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 209 204">
+<g fill="none" fill-rule="evenodd" transform="translate(5 5.644)">
+<path fill="#F15A29" fill-rule="nonzero" d="M114,96.3562512 C114,104.088251 107.732,110.356251 100,110.356251 C92.268,110.356251 86,104.088251 86,96.3562512 C86,88.6242512 92.268,82.3562512 100,82.3562512 C107.732,82.3562512 114,88.6242512 114,96.3562512 Z"/>
+<path stroke="#F7941E" stroke-width="4" d="M119.5,96.3562512 C119.5,107.126251 110.77,115.856251 100,115.856251 C89.23,115.856251 80.5,107.126251 80.5,96.3562512 C80.5,85.5862512 89.23,76.8562512 100,76.8562512 C110.77,76.8562512 119.5,85.5862512 119.5,96.3562512 Z"/>
+<g stroke="currentColor" stroke-width="10">
+<path d="M130,96.3562512 C130,112.925251 116.569,126.356251 100,126.356251 C83.431,126.356251 70,112.925251 70,96.3562512 C70,79.7872512 83.431,66.3562512 100,66.3562512 C116.569,66.3562512 130,79.7872512 130,96.3562512 Z"/>
+<path d="M167,24.3562512 C133.273,-4.80574879 84.314,-8.11674879 46.967,16.2392512 C9.62,40.5952512 -7.089,86.7342512 6,129.356251 L44,129.356251 C55.0860053,149.157715 75.6966688,161.743751 98.3755043,162.561006 C121.05434,163.378261 142.517468,152.308398 155,133.356251 M0,96.3562512 L70,96.3562512"/></g>
+<path fill="#F7941E" fill-rule="nonzero" d="M164,125.356251 C164,128.66996 161.313708,131.356251 158,131.356251 C154.686292,131.356251 152,128.66996 152,125.356251 C152,122.042543 154.686292,119.356251 158,119.356251 C161.313708,119.356251 164,122.042543 164,125.356251 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(148 115.356)"/>
+<path fill="#F7941E" fill-rule="nonzero" d="M179,31.3562512 C179,34.6699597 176.313708,37.3562512 173,37.3562512 C169.686292,37.3562512 167,34.6699597 167,31.3562512 C167,28.0425427 169.686292,25.3562512 173,25.3562512 C176.313708,25.3562512 179,28.0425427 179,31.3562512 Z"/>
+<g stroke="currentColor" transform="translate(33 21.356)">
+<path stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(130)"/>
+<path stroke-width="10" d="M0,147 C33.727,176.162 82.686,179.473 120.033,155.117 C157.38,130.761 174.089,84.622 161,42 L123,42 C111.913995,22.1985361 91.3033312,9.61250069 68.6244957,8.79524536 C45.9456602,7.97799002 24.4825319,19.0478528 12,38 M167,75 L97,75"/></g>
+<path fill="#F7941E" fill-rule="nonzero" d="M48,67.3562512 C48,70.6699597 45.3137085,73.3562512 42,73.3562512 C38.6862915,73.3562512 36,70.6699597 36,67.3562512 C36,64.0425427 38.6862915,61.3562512 42,61.3562512 C45.3137085,61.3562512 48,64.0425427 48,67.3562512 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(32 57.356)"/>
+<path fill="#F7941E" fill-rule="nonzero" d="M33,161.356251 C33,163.499845 31.8564065,165.480607 30,166.552404 C28.1435936,167.624201 25.8564064,167.624201 24,166.552404 C22.1435935,165.480607 21,163.499845 21,161.356251 C21,158.042543 23.6862915,155.356251 27,155.356251 C30.3137085,155.356251 33,158.042543 33,161.356251 L33,161.356251 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(17 151.356)"/>
+</g>
+</svg>

scripts/assets/nestjs.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="1em" width="1em">
+  <path d="M9.97.033c-.122 0-.236.026-.34.06a.97.97 0 0 1 .407.568c.004.03.013.052.017.083s.01.052.01.08c.018.385-.1.433-.184.66a.934.934 0 0 0 .06.86.52.52 0 0 0 .052.096c-.166-1.106.757-1.273.927-1.618.013-.302-.236-.503-.433-.643a.97.97 0 0 0-.516-.15zm1.39.25c-.018.1-.004.074-.01.127l-.01.114-.03.105c-.01.035-.022.07-.035.105l-.048.1c-.013.018-.022.035-.035.052l-.026.04-.066.087c-.026.026-.048.057-.08.08s-.052.052-.083.074c-.092.07-.197.122-.293.188-.03.022-.06.04-.087.066a.64.64 0 0 0-.083.07c-.03.026-.052.052-.08.083s-.048.057-.066.087l-.06.092-.048.1-.035.1-.03.11c-.004.018-.004.04-.01.057s-.004.035-.01.052l-.004.11c0 .026 0 .052.004.08 0 .035.004.07.013.11s.013.07.022.105l.035.105.03.06-1.006-.39-.507-.13-.276-.066a8.12 8.12 0 0 0-.796-.118c-.01 0-.013-.004-.022-.004l-.783-.04-.573.022a8.35 8.35 0 0 0-.8.096l-.197.035-.394.087-.197.052-.188.083-.144.066c-.01.004-.018.004-.022.01l-.122.06c-.013.004-.022.01-.03.013l-.136.07c-.03.013-.06.03-.087.044-.013.01-.03.017-.04.022l-.114.066a1.1 1.1 0 0 0-.105.066l-.087.06-.096.07-.074.06c-.01.004-.018.013-.026.018l-.066.057c-.004.01-.013.013-.018.018l-.08.074-.087.083-.074.08c-.01.01-.022.018-.03.026a1.23 1.23 0 0 1-.074.079c-.004.01-.013.013-.018.022l-.1.105-.236.227c-.08.07-.162.136-.245.192l-.262.166a2.41 2.41 0 0 1-.276.13 3.15 3.15 0 0 1-.284.105c-.184.04-.372.114-.534.127-.035 0-.074.01-.11.013l-.11.026-.105.04a1.12 1.12 0 0 0-.105.048c-.03.022-.066.04-.096.06s-.06.048-.087.074-.06.052-.087.08l-.074.087c-.022.035-.048.066-.066.1a.77.77 0 0 0-.061.101l-.048.114-.04.114-.022.105c-.013.052-.013.105-.018.13s0 .058 0 .089a.25.25 0 0 0 .004.057c.004.03.01.057.018.083l.03.08c.013.03.03.057.048.083l.057.08.074.07a.64.64 0 0 0 .083.07c.105.092.13.122.267.192.022.013.044.022.07.035.013.013.013.017.018.026.004.035.013.07.022.105a.59.59 0 0 0 .035.105l.035.08c.004.01.01.018.013.022l.052.096.066.092.074.083c.026.026.052.048.083.074l.087.066c.03.022.06.04.096.057a.71.71 0 0 0 .101.048c.026.013.057.022.087.03s.057.018.074.022c-.013.236-.018.46.018.538.04.087.232-.18.424-.485-.026.302-.044.656 0 .76s.31-.232.538-.608c3.1-.717 5.93 1.426 6.227 4.452-.057-.472-.638-.735-.905-.67-.13.324-.354.74-.713.997a2.83 2.83 0 0 0-.044-.875 2.83 2.83 0 0 1-.542 1.102c-.415.03-.83-.17-1.05-.472-.018-.013-.022-.04-.035-.057l-.035-.092c-.013-.03-.022-.06-.026-.092s-.004-.06-.004-.096v-.066c.004-.03.013-.06.022-.092l.03-.092c.018-.03.03-.06.052-.092.074-.2.074-.38-.06-.48a.502.502 0 0 0-.083-.044c-.018-.004-.04-.013-.057-.018l-.035-.013-.092-.022a.33.33 0 0 0-.092-.013.71.71 0 0 0-.096-.009c-.022 0-.044.004-.066.004a.34.34 0 0 0-.096.013l-.092.017-.092.03-.087.04-.083.044c-1.02.665-.41 2.22.284 2.672-.262.048-.53.105-.603.162.18.122.376.22.582.302l.708.2c.363.08.73.105 1.102.083a4.16 4.16 0 0 0 3.813-3.551l.026.114.04.245.018.118.01.13.01.144v.07c0 .022.004.048.004.07s-.004.052-.004.08v.06c0 .03-.004.057-.004.087 0 .017 0 .035-.004.057l-.004.096c-.004.013-.004.026-.004.04l-.013.1c0 .013 0 .026-.004.04l-.017.127v.01l-.026.122-.026.13-.035.136-.035.136-.044.14-.096.254-.052.127-.06.122c-.004.013-.01.022-.013.03a4.167 4.167 0 0 1-1.238 1.482c-.035.022-.07.048-.105.074-.01.01-.022.013-.03.022l-.096.066.013.026h.004l.184-.026h.004l.34-.06a.664.664 0 0 0 .096-.022l.06-.013.092-.017.08-.022a8.41 8.41 0 0 0 1.268-.42 6.993 6.993 0 0 1-2.716 2.217 7.163 7.163 0 0 0 1.49-.258 6.986 6.986 0 0 0 4.133-3.302 6.98 6.98 0 0 1-1.176 2.812c.424-.28.813-.603 1.168-.97a6.93 6.93 0 0 0 1.841-3.717c.15.69.192 1.404.127 2.108 3.157-4.404.262-8.97-.95-10.172-.004-.01-.01-.013-.01-.022-.01.052-.013.105-.017.157-.013.1-.026.197-.044.293s-.048.192-.074.29-.066.188-.105.28-.083.18-.13.267a2.98 2.98 0 0 1-.157.249 3.114 3.114 0 0 1-.18.236 3.27 3.27 0 0 1-.206.219c-.044.04-.083.074-.127.11l-.1.087a2.44 2.44 0 0 1-.245.171 3.03 3.03 0 0 1-.258.149 6.638 6.638 0 0 1-.276.122 3.08 3.08 0 0 1-.284.092c-.096.026-.197.048-.293.066s-.2.026-.297.035c-.07.004-.14.01-.2.01-.1 0-.2-.01-.297-.018s-.2-.022-.298-.044a2.21 2.21 0 0 1-.293-.074h-.004c.096-.01.192-.018.29-.035s.197-.04.293-.066.192-.057.284-.092.188-.08.276-.122a3.06 3.06 0 0 0 .262-.144c.083-.057.166-.114.245-.175a2.39 2.39 0 0 0 .223-.197c.074-.066.14-.14.206-.214s.127-.157.184-.236c.01-.013.018-.03.026-.044l.127-.2c.048-.087.092-.175.13-.267s.074-.184.105-.28.052-.188.074-.284.035-.197.044-.293.017-.2.017-.297c0-.07-.004-.14-.01-.2-.01-.1-.022-.197-.035-.293a3.2 3.2 0 0 0-.066-.293c-.03-.092-.06-.188-.096-.28s-.08-.184-.122-.27-.096-.175-.15-.258-.114-.162-.175-.24l-.2-.223a2.73 2.73 0 0 0-.114-.109 8.05 8.05 0 0 0-.608-.429 1.184 1.184 0 0 0-.087-.044 1.711 1.711 0 0 0-.415-.184z" fill="currentColor" fill-rule="evenodd"/>
+</svg>

scripts/assets/openssl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 64 37"><path fill="currentColor" d="M16.365,3.888 C12.8963333,3.888 10.1373333,5.18133333 8.088,7.768 C6.05466667,10.3533333 5.038,13.8766667 5.038,18.338 C5.038,22.7846667 6.05466667,26.3003333 8.088,28.885 C10.1373333,31.4716667 12.8963333,32.765 16.365,32.765 C19.8336667,32.765 22.577,31.4716667 24.595,28.885 C26.6283333,26.2996667 27.645,22.784 27.645,18.338 C27.645,13.876 26.6283333,10.3526667 24.595,7.768 C22.577,5.18133333 19.8336667,3.888 16.365,3.888 Z M16.365,0.01 C21.3156667,0.01 25.273,1.67666667 28.237,5.01 C31.201,8.32066667 32.683,12.7666667 32.683,18.348 C32.683,23.9133333 31.201,28.3593333 28.237,31.686 C25.273,34.9966667 21.3156667,36.652 16.365,36.652 C11.3983333,36.652 7.425,34.9966667 4.445,31.686 C1.48166667,28.368 0,23.9186667 0,18.338 C0,12.7566667 1.482,8.31066667 4.446,5 C7.426,1.66666667 11.3993333,0 16.366,0 L16.365,0.01 Z M61.682,1.76 L61.682,9.233 C59.742,8.36633333 57.85,7.712 56.006,7.27 C54.1613333,6.82866667 52.4193333,6.608 50.78,6.608 C48.604,6.608 46.996,6.908 45.956,7.508 C44.916,8.108 44.396,9.038 44.396,10.298 C44.396,11.2446667 44.7426667,11.9856667 45.436,12.521 C46.1453333,13.041 47.422,13.4903333 49.266,13.869 L53.144,14.649 C57.0706667,15.4376667 59.8613333,16.636 61.516,18.244 C63.172,19.852 64,22.1376667 64,25.101 C64,28.9943333 62.8413333,31.8953333 60.524,33.804 C58.222,35.696 54.6986667,36.642 49.954,36.642 C47.7153333,36.642 45.4686667,36.4286667 43.214,36.002 C40.9593333,35.5766667 38.7046667,34.946 36.45,34.11 L36.45,26.436 C38.7046667,27.634 40.8803333,28.5406667 42.977,29.156 C45.0903333,29.756 47.1236667,30.056 49.077,30.056 C51.0636667,30.056 52.585,29.725 53.641,29.063 C54.697,28.401 55.225,27.455 55.225,26.225 C55.225,25.1216667 54.8623333,24.2703333 54.137,23.671 C53.4276667,23.071 52.001,22.535 49.857,22.063 L46.333,21.283 C42.8016667,20.5263333 40.216,19.3203333 38.576,17.665 C36.952,16.0096667 36.14,13.7786667 36.14,10.972 C36.14,7.456 37.275,4.752 39.545,2.86 C41.815,0.968 45.0783333,0.022 49.335,0.022 C51.275,0.022 53.2693333,0.172 55.318,0.472 C57.3673333,0.756 59.488,1.18933333 61.68,1.772 L61.682,1.76 Z" transform="translate(0 .164)"/></svg>

scripts/assets/oracle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em">
+  <path fill="currentColor" fill-rule="evenodd" d="M7.957 18.912A6.953 6.953 0 0 1 1 11.962 6.963 6.963 0 0 1 7.957 5h8.087A6.961 6.961 0 0 1 23 11.962a6.952 6.952 0 0 1-6.956 6.95H7.957Zm7.907-2.453a4.497 4.497 0 0 0 4.503-4.497 4.507 4.507 0 0 0-4.503-4.508H8.136a4.507 4.507 0 0 0-4.503 4.508 4.498 4.498 0 0 0 4.503 4.497h7.728Z"/>
+</svg>

scripts/assets/pytorch.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M12.005 0 4.952 7.053a9.865 9.865 0 0 0 0 14.022 9.866 9.866 0 0 0 14.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 3.899a1.327 1.327 0 0 0-1.327 1.327 1.327 1.327 0 0 0 1.327 1.328A1.327 1.327 0 0 0 16.9 5.226 1.327 1.327 0 0 0 15.573 3.9z"/>
+</svg>

scripts/assets/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
+  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"/>
+</svg>

scripts/assets/sysdig.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M198.814 98.655a10.349 10.349 0 0 1 8.975 5.244l35.586 61.635c25.367 43.937 11.463 104.796-32.341 141.562a10.331 10.331 0 0 1-3.116 1.8 128.641 128.641 0 0 1-43.96 7.784c-39.453 0-76.278-18.462-94.807-50.556l-42.35-73.35a10.348 10.348 0 0 1 3.788-14.136l28.846-16.655a10.349 10.349 0 1 1 10.349 17.924L49.9 191.387l37.175 64.388c20.152 34.905 68.066 49.46 112.043 34.282 35.13-30.495 46.485-79.27 26.334-114.174l-35.586-61.635a10.349 10.349 0 0 1 8.948-15.593Zm-108.74 96.59c.12.216 6.66 11.866 12.895 22.894l.583 1.032c3.298 5.832 6.45 11.381 8.448 14.842 14.574 25.244 41.265 34.887 71.401 25.778 5.472-1.653 11.247 1.443 12.9 6.914 1.652 5.472-1.444 11.247-6.915 12.9a95.73 95.73 0 0 1-27.672 4.247 76.222 76.222 0 0 1-67.639-39.49 2209.073 2209.073 0 0 1-8.391-14.737l-.576-1.018-.577-1.022-.579-1.023-.578-1.023-.576-1.02a7893.27 7893.27 0 0 1-10.805-19.202c-2.782-4.993-.989-11.296 4.004-14.077 4.993-2.781 11.295-.988 14.077 4.005ZM19.272 5.105l122.265 211.771c3.335 5.774 12.789 15.683 24.682 11.845 5.44-1.754 11.272 1.235 13.025 6.675 1.753 5.44-1.236 11.272-6.676 13.025a38.083 38.083 0 0 1-11.719 1.875c-16.345 0-30.2-10.884-37.236-23.07L1.348 15.454C-1.455 10.51.253 4.23 5.176 1.388 10.098-1.454 16.39.206 19.272 5.106Zm89.756 60.963 29.135 50.463 18.53-10.7c4.945-2.812 11.234-1.105 14.078 3.821 2.845 4.927 1.18 11.226-3.729 14.103L139.55 139.63a10.35 10.35 0 0 1-4.812 1.381l-.364.006-.324-.005a10.35 10.35 0 0 1-8.637-5.169L91.104 76.417c-2.803-4.945-1.095-11.225 3.828-14.067 4.922-2.842 11.215-1.182 14.096 3.718Z" fill="currentColor"/>
+</svg>

scripts/assets/tar.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" height="1em" width="1em"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M47.987,21.938c-0.006-0.091-0.023-0.178-0.053-0.264c-0.011-0.032-0.019-0.063-0.033-0.094
+			c-0.048-0.104-0.109-0.202-0.193-0.285c-0.001-0.001-0.001-0.001-0.001-0.001L42,15.586V10c0-0.022-0.011-0.041-0.013-0.063
+			c-0.006-0.088-0.023-0.173-0.051-0.257c-0.011-0.032-0.019-0.063-0.034-0.094c-0.049-0.106-0.11-0.207-0.196-0.293l-9-9
+			c-0.086-0.086-0.187-0.148-0.294-0.196c-0.03-0.014-0.06-0.022-0.091-0.032c-0.085-0.03-0.172-0.047-0.263-0.052
+			C32.039,0.01,32.021,0,32,0H7C6.448,0,6,0.448,6,1v14.586l-5.707,5.707c0,0-0.001,0.001-0.002,0.002
+			c-0.084,0.084-0.144,0.182-0.192,0.285c-0.014,0.031-0.022,0.062-0.033,0.094c-0.03,0.086-0.048,0.173-0.053,0.264
+			C0.011,21.96,0,21.978,0,22v19c0,0.552,0.448,1,1,1h5v5c0,0.552,0.448,1,1,1h34c0.552,0,1-0.448,1-1v-5h5c0.552,0,1-0.448,1-1V22
+			C48,21.978,47.989,21.96,47.987,21.938z M44.586,21H42v-2.586L44.586,21z M38.586,9H33V3.414L38.586,9z M8,2h23v8
+			c0,0.552,0.448,1,1,1h8v5v5H8v-5V2z M6,18.414V21H3.414L6,18.414z M40,46H8v-4h32V46z M46,40H2V23h5h34h5V40z"/>
+		<path d="M33.86,32.143c0.221-0.153,0.422-0.354,0.604-0.603c0.181-0.249,0.332-0.552,0.451-0.91
+			c0.119-0.357,0.179-0.767,0.179-1.232c0-0.601-0.085-1.116-0.255-1.547c-0.17-0.431-0.405-0.788-0.706-1.071
+			c-0.3-0.283-0.66-0.49-1.079-0.621c-0.419-0.13-0.878-0.195-1.377-0.195h-3.434V38h1.972v-5.134h1.139L33.222,38h2.142
+			l-2.159-5.542C33.421,32.401,33.639,32.297,33.86,32.143z M32.602,30.902c-0.323,0.312-0.734,0.468-1.233,0.468h-1.156v-3.706
+			h1.156c0.204,0,0.408,0.028,0.612,0.085s0.388,0.153,0.552,0.289s0.298,0.323,0.4,0.561s0.153,0.538,0.153,0.901
+			C33.086,30.123,32.925,30.591,32.602,30.902z"/>
+		<path d="M21.441,25.964L18.449,38h2.04l0.612-2.55h3.162L24.858,38h2.125l-2.941-12.036H21.441z M21.357,33.852l1.309-5.967h0.068
+			l1.275,5.967H21.357z"/>
+		<polygon points="18.756,25.964 12.227,25.964 12.227,27.698 14.488,27.698 14.488,38 16.494,38 16.494,27.698 18.756,27.698 		"/>
+	</g>
+</g>
+</svg>

scripts/create.mjs

@@ -3,16 +3,17 @@ import rehypeDocument from 'rehype-document';
 import remarkGemoji from 'remark-gemoji';
 import rehypeRaw from 'rehype-raw';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { getCodeString } from 'rehype-rewrite';
 import rehypeSlug from 'rehype-slug';
 import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
 import { footer } from './nodes/footer.mjs';
+import { search } from './nodes/search.mjs';
 import { header } from './nodes/header.mjs';
 import { rehypeUrls } from './utils/rehypeUrls.mjs';
 import { tooltips } from './utils/tooltips.mjs';
 import { homeCardIcons } from './utils/homeCardIcons.mjs';
 import { getTocsTree, getTocsTitleNode, getTocsTitleNodeWarpper, addTocsInWarp } 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`;
@@ -24,11 +25,23 @@ export function create(str = '', options = {}) {
   description = (description[0] || '')
     .replace(/^\n[=\n]+/, '')
     .replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1')
+    .replace(/<!--([\s\S]*?)-->/gi, '')
     .replace(/\n/, '');
   const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & ` : '';
+  /** 用于搜索数据 */
+  const detailData = {
+    title: title.replace(/\n/g, ''),
+    path: '',
+    intro: description,
+    icon: '',
+    sections: [],
+  };
   const mdOptions = {
     showLineNumbers: false,
     hastNode: false,
+    katexOptions: {
+      strict: false,
+    },
     remarkPlugins: [remarkGemoji],
     rehypePlugins: [
       rehypeSlug,
@@ -66,8 +79,18 @@ export function create(str = '', options = {}) {
       return plugins;
     },
     rewrite: (node, index, parent) => {
-      rehypeTitle(node, options.filename);
-      homeCardIcons(node, parent, options.isHome);
+      const iconName = rehypeTitle(node, options.filename);
+      if (iconName) {
+        detailData.icon = iconName;
+      }
+      const resultHomeCard = homeCardIcons(node, parent, options.isHome);
+      if (options.filename && resultHomeCard[options.filename]) {
+        detailData.rgb = resultHomeCard[options.filename].rgb;
+        detailData.name = resultHomeCard[options.filename].title;
+        if (resultHomeCard[options.filename].tags) {
+          detailData.tags = resultHomeCard[options.filename].tags;
+        }
+      }
       tooltips(node, index, parent);
       htmlTagAddAttri(node, options);
       rehypeUrls(node);
@@ -77,16 +100,30 @@ export function create(str = '', options = {}) {
           if (!options.isHome) {
             const tocsMenus = getTocsTitleNode([...tocsData]);
             node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus));
+            // 生成搜索数据
+            tocsMenus.forEach((menu, idx) => {
+              const level = menu?.properties['data-num'];
+              if (idx + 1 === tocsMenus.length && level === 2) {
+                return;
+              }
+              if (level < 4) {
+                detailData.sections.push({
+                  a: menu?.properties?.href,
+                  t: getCodeString(menu.children),
+                  l: menu?.properties['data-num'],
+                });
+              }
+            });
           } else {
             node.children = tocsData;
           }
           node.children.unshift(header(options));
-          node.children.push(footer());
-          node.children.push(anchorPoint());
+          node.children.push(footer(options));
+          node.children = node.children.concat(search(options));
         }
       }
     },
   };
-
-  return markdown(str, mdOptions);
+  const htmlStr = markdown(str, mdOptions);
+  return { html: htmlStr, data: detailData };
 }

scripts/index.mjs

@@ -5,6 +5,10 @@ import { create } from './create.mjs';
 
 export const OUTOUT = path.resolve(process.cwd(), 'dist');
 export const DOCS = path.resolve(process.cwd(), 'docs');
+/** 搜索数据路径 */
+export const SEARCH_DATA = path.resolve(OUTOUT, 'data.json');
+export const SEARCH_DATA_JS = path.resolve(OUTOUT, 'data.js');
+export const SEARCH_DATA_CACHE = path.resolve(process.cwd(), 'node_modules/.cache/reference/data.json');
 
 export async function createHTML(files = [], num = 0) {
   const dataFile = files[num];
@@ -25,8 +29,7 @@ export async function createHTML(files = [], num = 0) {
     .replace(/.md$/, '.html');
 
   await fs.ensureDir(path.dirname(outputHTMLPath));
-
-  const html = create(mdstr.toString(), {
+  const options = {
     filename: path.basename(outputHTMLPath, '.html'),
     isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
     githubURL,
@@ -35,21 +38,50 @@ export async function createHTML(files = [], num = 0) {
       path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'style/style.css')),
       path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'style/katex.css')),
     ],
-  });
+  };
+  const { html, data } = create(mdstr.toString(), options);
+  if (!options.isHome) {
+    const searchData = await fs.readJSON(SEARCH_DATA_CACHE);
+    data.path = path.relative(OUTOUT, outputHTMLPath).replace(/[\\/]/g, '/');
+    searchData[options.filename] = data;
+    searchData.name = options.filename;
+    await fs.writeJSON(SEARCH_DATA_CACHE, searchData);
+    const resultSearchData = Object.keys({ ...searchData })
+      .map((name) => searchData[name])
+      .filter((item) => typeof item !== 'string');
+    await fs.writeJSON(SEARCH_DATA, resultSearchData);
+    await fs.writeFile(SEARCH_DATA_JS, `const REFS_DATA = ${JSON.stringify(resultSearchData)}`);
+  }
   await fs.writeFile(outputHTMLPath, html);
   console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`);
   createHTML(files, num);
 }
 
-export async function run() {
-  await fs.ensureDir(OUTOUT);
-  await fs.emptyDir(OUTOUT);
-  await fs.ensureDir(path.resolve(OUTOUT, 'style'));
+export async function copyCSSFile() {
   await fs.copy(path.resolve(process.cwd(), 'scripts/style'), path.resolve(OUTOUT, 'style'));
-  const files = await recursiveReaddirFiles(process.cwd(), {
-    ignored: /\/(node_modules|\.git)/,
-    exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
-    filter: (item) => item.ext === 'md',
-  });
-  createHTML(files);
+}
+
+export async function copyJSFile() {
+  await fs.copy(path.resolve(process.cwd(), 'scripts/js'), path.resolve(OUTOUT, 'js'));
+}
+
+export async function run() {
+  try {
+    await fs.ensureDir(OUTOUT);
+    await fs.emptyDir(OUTOUT);
+    await fs.ensureDir(path.resolve(OUTOUT, 'style'));
+    await fs.ensureFile(SEARCH_DATA_CACHE);
+    await fs.writeFile(SEARCH_DATA_CACHE, '{}');
+    await fs.writeFile(SEARCH_DATA, '[]');
+    await copyCSSFile();
+    await copyJSFile();
+    const files = await recursiveReaddirFiles(process.cwd(), {
+      ignored: /[\\/](node_modules|\.git)/g,
+      exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
+      filter: (item) => item.ext === 'md',
+    });
+    createHTML(files);
+  } catch (error) {
+    console.log('ERR:', error);
+  }
 }

scripts/js/dark.js

@@ -0,0 +1,12 @@
+const LOCAL_NANE = '_dark_mode_theme_'
+const rememberedValue = localStorage.getItem(LOCAL_NANE);
+if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
+  document.documentElement.setAttribute('data-color-mode', rememberedValue);
+}
+const button = document.querySelector('#darkMode');
+button.onclick = () => {
+  const theme = document.documentElement.dataset.colorMode;
+  const mode = theme === 'light' ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-color-mode', mode);
+  localStorage.setItem(LOCAL_NANE, mode);
+}

scripts/js/main.js

@@ -0,0 +1,186 @@
+/** ==========anchor============== */
+if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
+  window.onhashchange = function () {
+    anchorPoint()
+    updateAnchor()
+  };
+}
+function anchorPoint() {
+  const hash = window.location.hash?.replace(/^#/, '') || '';
+  const elm = document.getElementById(decodeURIComponent(hash));
+  Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
+  if (elm?.tagName === 'H3') {
+    elm?.parentElement?.parentElement?.classList.add('active');
+  }
+}
+anchorPoint();
+function updateAnchor(element) {
+  const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+  anchorContainer.forEach((tocanchor) => {
+    tocanchor.classList.remove('is-active-link');
+  });
+  const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
+  if (anchor) {
+    anchor.classList.add('is-active-link');
+  }
+}
+// toc 定位
+updateAnchor()
+const anchorAll = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+anchorAll.forEach((item) => {
+  item.addEventListener('click', (e) => {
+    updateAnchor()
+  })
+})
+
+/** ==========search============== */
+const fuse = new Fuse(REFS_DATA, {
+  includeScore: !1,
+  shouldSort: !0,
+  includeMatches: !0,
+  matchEmptyQuery: !0,
+  threshold: .1,
+  keys: [
+    { name: "name", weight: 20 }, 
+    { name: 'intro', weight: 2 }, 
+    { name: 'tags', weight: 2 }, 
+    { name: 'sections.t', weight: 5 }
+  ],
+});
+
+const searchBtn = document.getElementById('searchbtn');
+const searchBox = document.getElementById('mysearch');
+const searchInput = document.getElementById('mysearch-input');
+const closeBtn = document.getElementById('mysearch-close');
+const searchMenu = document.getElementById('mysearch-menu');
+const searchContent = document.getElementById('mysearch-content');
+const isHome = document.body.classList.contains('home');
+function getDocUrl(url = '') {
+  return isHome ? url : url.replace('docs/', '');
+}
+searchBtn.addEventListener('click', (ev) => {
+  ev.preventDefault();
+  showSearch();
+});
+
+closeBtn.addEventListener('click', hideSearch);
+searchBox.addEventListener('click', hideSearch);
+searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation());
+searchInput.addEventListener('input', (evn) => searchResult(evn.target.value));
+
+let activeMenu = {}
+let result = []
+let inputValue = '';
+let activeIndex = 0
+
+document.addEventListener('keydown', (ev) => {
+  if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') {
+    searchBox.classList.contains('show') ? hideSearch() : showSearch();
+  }
+  if (ev.key.toLocaleLowerCase() === 'enter') {
+    const url = activeMenu.path || activeMenu?.item.path;
+    window.location.href = getDocUrl(url);
+  }
+  if (ev.key.toLocaleLowerCase() === 'arrowdown') {
+    activeAnchorElm('down')
+  }
+  if (ev.key.toLocaleLowerCase() === 'arrowup') {
+    activeAnchorElm('up')
+  }
+});
+
+function activeAnchorElm(type) {
+  if (type === 'down') {
+    ++activeIndex;
+  }
+  if (type === 'up') {
+    --activeIndex;
+  }
+  const data = Array.from(searchMenu.children);
+  if (activeIndex < 0) activeIndex = 0;
+  if (activeIndex >= data.length) activeIndex = data.length - 1;
+  anchorElm = data[activeIndex];
+  if (anchorElm) {
+    data.forEach(item => item.classList.remove('active'));
+    anchorElm.classList.add('active');
+    activeMenu = result[activeIndex];
+    activeIndex = activeIndex;
+    searchSectionsResult(activeIndex);
+  }
+}
+
+function showSearch() {
+  document.body.classList.add('search');
+  searchBox.classList.add('show');
+  searchResult(searchInput.value || '');
+  searchInput.focus();
+}
+
+function hideSearch() {
+  document.body.classList.remove('search');
+  searchBox.classList.remove('show');
+}
+function getValueReg(val = '') {
+  return new RegExp(val.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'), 'ig');
+}
+
+function searchResult(value) {
+  inputValue = value;
+  result = fuse.search(value);
+  if (!value) {
+    result = REFS_DATA.map(item => ({ item: item }));
+  }
+  let menuHTML = '';
+  result.forEach((item, idx) => {
+    const label = (item.item.name || '').replace(getValueReg(value), (txt) => {
+      return `<mark>${txt}</mark>`;
+    })
+    const tags = (item.item.tags || []).join(',').replace(getValueReg(value), (txt) => {
+      return `<mark>${txt}</mark>`;
+    })
+    const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
+    if (idx === 0) {
+      activeIndex = idx;
+      activeMenu = item.item;
+      menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
+    } else {
+      menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
+    }
+  });
+  searchMenu.innerHTML = menuHTML;
+  searchSectionsResult();
+  const data = Array.from(searchMenu.children);
+  data.forEach((anchor, idx) => {
+    anchor.onmouseenter = (evn) => {
+      data.forEach(item => item.classList.remove('active'));
+      evn.target.classList.add('active');
+      activeMenu = result[idx];
+      activeIndex = idx;
+      searchSectionsResult(idx);
+    }
+  });
+  const anchorData = searchContent.querySelectorAll('a');
+  Array.from(anchorData).forEach((item) => {
+    item.addEventListener('click', hideSearch);
+  })
+}
+function searchSectionsResult(idx = 0) {
+  const data = result[idx] || [];
+  const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
+  let sectionHTML = `<h3>${title}</h3><ol>`;
+  if (data && data.item && data.item.sections) {
+    data.item.sections.forEach((item, idx) => {
+      const label = item.t.replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
+      const href = getDocUrl(data.item.path);
+      if (item.l < 3) {
+        sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`;
+      } else {
+        sectionHTML += `<a href="${href + item.a}">${label}</a>`;
+      }
+      if (data.item.sections.length === idx + 1) {
+        sectionHTML += `</div></li>`;
+      }
+    })
+  }
+  searchContent.innerHTML = sectionHTML;
+}

scripts/nodes/footer.mjs

@@ -1,5 +1,13 @@
+import formatter from '@uiw/formatter';
 
-export function footer() {
+export function footer({ isHome } = {}) {
+  let footerText = '© 2022 Kenny Wang.';
+  if (isHome) {
+    const now = new Date();
+    const utc = now.getTime() + now.getTimezoneOffset() * 60000;
+    const cst = new Date(utc + 3600000 * 8);
+    footerText += ` Updated on ${formatter('YYYY/MM/DD HH:mm:ss', cst)}`;
+  }
   return {
     type: 'element',
     tagName: 'footer',
@@ -13,10 +21,8 @@ export function footer() {
         properties: {
           class: ['max-container'],
         },
-        children: [
-          { type: 'text', value: '© 2022 Kenny Wang, All rights reserved.' }
-        ],
-      }
+        children: [{ type: 'text', value: footerText }],
+      },
     ],
   };
 }

scripts/nodes/header.mjs

@@ -1,12 +1,67 @@
 import path from 'path';
-import { github, editor } from './logo.mjs';
+import * as dotenv from 'dotenv';
+import { github, editor, home } from './logo.mjs';
 import { getSVGNode } from '../utils/getSVGNode.mjs';
 import { darkMode } from '../utils/darkMode.mjs';
 
+dotenv.config();
+
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
-export function header({ homePath, githubURL = '' }) {
+const ICONS_SEARCH_PATH = path.resolve(process.cwd(), 'scripts/assets/search.svg');
+
+export function getReferrals() {
+  const url = process.env.REF_URL;
+  const label = process.env.REF_LABEL;
+  if (!url || !label) return [];
+  return [
+    {
+      menu: true,
+      href: url,
+      target: '__blank',
+      label: label,
+      children: [home],
+    },
+  ];
+}
+
+export function header({ homePath, githubURL = '', isHome } = {}) {
   const svgNode = getSVGNode(ICONS_PATH);
+  const svgSearchNode = getSVGNode(ICONS_SEARCH_PATH);
   const data = [
+    {
+      menu: true,
+      href: 'javascript:void(0);',
+      class: ['searchbtn'],
+      id: 'searchbtn',
+      children: [
+        ...svgSearchNode,
+        {
+          type: 'element',
+          tagName: 'span',
+          children: [
+            {
+              type: 'text',
+              value: '搜索',
+            },
+          ],
+        },
+        {
+          type: 'element',
+          tagName: 'span',
+          children: [
+            {
+              type: 'text',
+              value: '⌘',
+            },
+            {
+              type: 'text',
+              value: 'K',
+            },
+          ],
+        },
+      ],
+    },
+    ...getReferrals(),
     {
       menu: true,
       href: githubURL,
@@ -14,7 +69,7 @@ export function header({ homePath, githubURL = '' }) {
       label: '编辑',
       children: [editor],
     },
-    ...darkMode(),
+    ...darkMode({ homePath, isHome }),
     {
       menu: true,
       href: 'https://github.com/jaywcjlove/reference',

scripts/nodes/logo.mjs

@@ -94,3 +94,23 @@ export const editor = {
     },
   ],
 };
+
+export const home = {
+  type: 'element',
+  tagName: 'svg',
+  properties: {
+    viewBox: '0 0 24 24',
+    fill: 'currentColor',
+    height: '1em',
+    width: '1em',
+  },
+  children: [
+    {
+      type: 'element',
+      tagName: 'path',
+      properties: {
+        d: 'M12.74 2.32a1 1 0 0 0-1.48 0l-9 10A1 1 0 0 0 3 14h2v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h2a1 1 0 0 0 1-1 1 1 0 0 0-.26-.68z',
+      },
+    },
+  ],
+};

scripts/nodes/search.mjs

@@ -0,0 +1,112 @@
+import path from 'path';
+import { getSVGNode } from '../utils/getSVGNode.mjs';
+
+const ICONS_SEARCH_PATH = path.resolve(process.cwd(), 'scripts/assets/search.svg');
+
+export function search({ homePath = '', isHome } = {}) {
+  const relativePath = homePath.replace(/\/?index.html$/, isHome ? '' : '/');
+  const fuseJSUrl = relativePath + 'js/fuse.min.js';
+  const manJSUrl = relativePath + 'js/main.js';
+  const dataJSUrl = relativePath + 'data.js';
+  const svgSearchNode = getSVGNode(ICONS_SEARCH_PATH);
+  return [
+    {
+      type: 'element',
+      tagName: 'script',
+      properties: {
+        src: dataJSUrl,
+        defer: true,
+      },
+    },
+    {
+      type: 'element',
+      tagName: 'script',
+      properties: {
+        src: fuseJSUrl,
+        defer: true,
+      },
+    },
+    {
+      type: 'element',
+      tagName: 'script',
+      properties: {
+        src: manJSUrl,
+        defer: true,
+      },
+    },
+    {
+      type: 'element',
+      tagName: 'div',
+      properties: {
+        id: 'mysearch',
+      },
+      children: [
+        {
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            class: ['mysearch-box'],
+          },
+          children: [
+            {
+              type: 'element',
+              tagName: 'div',
+              properties: { class: ['mysearch-input'] },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'div',
+                  properties: {},
+                  children: [
+                    ...svgSearchNode,
+                    {
+                      type: 'element',
+                      tagName: 'input',
+                      properties: {
+                        id: ['mysearch-input'],
+                        type: 'search',
+                        placeholder: '搜索备忘清单',
+                        autocomplete: 'off',
+                      },
+                      children: [],
+                    },
+                    {
+                      type: 'element',
+                      tagName: 'div',
+                      properties: { class: ['mysearch-clear'] },
+                    },
+                  ],
+                },
+                {
+                  type: 'element',
+                  tagName: 'button',
+                  properties: { id: ['mysearch-close'], type: 'button' },
+                  children: [{ type: 'text', value: '取消' }],
+                },
+              ],
+            },
+            {
+              type: 'element',
+              tagName: 'div',
+              properties: { class: ['mysearch-result'] },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'div',
+                  properties: { id: 'mysearch-menu' },
+                  children: [],
+                },
+                {
+                  type: 'element',
+                  tagName: 'div',
+                  properties: { id: 'mysearch-content' },
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}

scripts/style/style.css

@@ -80,6 +80,7 @@ body {
   --color-attention-subtle: #fff8c5;
   --color-danger-fg: #cf222e;
   --box-shadow: 109 109 109;
+  --primary-color: #228e6c;
 }
 
 [data-color-mode*='dark'],
@@ -128,6 +129,7 @@ body {
   --color-attention-subtle: rgba(187, 128, 9, 0.15);
   --color-danger-fg: #f85149;
   --box-shadow: 0 0 0;
+  --primary-color: #228e6c;
 }
 
 body {
@@ -525,10 +527,10 @@ a.text-grey {
 
 .header-nav .menu a,
 .header-nav .menu button {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-left: 0.55rem;
+  padding-right: 0.55rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
   border-radius: 9999px;
   transition: all 0.3s;
   border: 0;
@@ -540,6 +542,21 @@ a.text-grey {
 .header-nav .menu a > span {
   font-size: 0.9rem;
 }
+.header-nav .menu .searchbtn {
+  text-decoration-color: transparent;
+  gap: 0.75rem;
+}
+.header-nav .menu .searchbtn span:last-child {
+  transition: all 0.3s;
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.4rem;
+  padding: 1px 1px 1px 3px;
+  letter-spacing: 3px;
+}
+.header-nav .menu .searchbtn:hover span:last-child {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
 .header-nav .menu button {
   font-family: inherit;
   font-size: 100%;
@@ -836,11 +853,11 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .h2wrap-body ul.style-timeline {
   counter-reset: stepCount;
 }
-.h2wrap-body ul.style-timeline li:first-child:before {
+.h2wrap-body ul.style-timeline > li:first-child:before {
   background-color: #228e6c;
   color: rgb(226 232 240/1);
 }
-.h2wrap-body ul.style-timeline li::before {
+.h2wrap-body ul.style-timeline > li::before {
   color: #228e6c;
   background-color: var(--color-canvas-default);
   counter-increment: stepCount;
@@ -856,10 +873,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   top: -1px;
   left: -14px;
 }
-.h2wrap-body ul.style-timeline li:last-child {
+.h2wrap-body ul.style-timeline > li:last-child {
   border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
 }
-.h2wrap-body ul.style-timeline li {
+.h2wrap-body ul.style-timeline > li {
   border-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 25px !important;
@@ -867,7 +884,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   margin-left: 30px;
   border-left-color: #46c69e96;
 }
-.h2wrap-body ul.style-timeline li > pre {
+.h2wrap-body ul.style-timeline > li > pre {
   padding: 0 !important;
   padding-top: 10px !important;
   height: initial !important;
@@ -1185,9 +1202,9 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   width: 1rem;
   text-align: right;
   margin-right: 16px;
-  margin-left: -8px;
   color: var(--color-fg-subtle);
   content: attr(line);
+  white-space: nowrap;
 }
 /* 代码高亮 End */
 
@@ -1196,6 +1213,174 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   color: rgb(100 116 139/1);
   background-color: var(--color-canvas-subtle);
   text-align: center;
+  font-size: 0.75rem;
+}
+
+body.search {
+  overflow: hidden;
+}
+#mysearch {
+  transition: all 0.3s;
+  display: none;
+}
+#mysearch.show .mysearch-box {
+  background-color: var(--color-canvas-default);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 35px 60px -15px rgba(0, 0, 0, 0.3);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  max-width: 1024px;
+  width: 100%;
+  height: 100%;
+}
+#mysearch.show .mysearch-result > * {
+  overflow-y: auto;
+  padding: 0.6rem;
+}
+#mysearch.show .mysearch-result > :last-child {
+  background-color: var(--color-neutral-muted);
+  border-bottom-right-radius: 0.5rem;
+}
+#mysearch.show .mysearch-result {
+  display: flex;
+  flex: 1;
+  height: calc(100% - 3.5rem);
+}
+#mysearch.show {
+  background-color: var(--color-neutral-muted);
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mysearch-input input::placeholder {
+  font-weight: normal;
+  font-size: 1.3rem;
+}
+.mysearch-input {
+  height: 3.5rem;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--color-neutral-muted);
+}
+.mysearch-input > :first-child {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.mysearch-input > :first-child svg {
+  margin-left: 1rem;
+  font-size: 1.3rem;
+  position: absolute;
+  color: var(--primary-color);
+}
+.mysearch-input > :first-child input {
+  flex: 1;
+  height: 100%;
+  padding-left: 2.9rem;
+  font-size: 1.6rem;
+  color: var(--color-fg-default);
+  border: 0;
+  font-weight: 800;
+  background: transparent;
+  outline: 0;
+}
+#mysearch-close:hover {
+  color: var(--primary-color);
+}
+#mysearch-close {
+  background-color: transparent;
+  color: var(--color-fg-default);
+  border: 0;
+  padding: 0 1.6rem;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.3s;
+}
+
+#mysearch-menu a + a {
+  margin: 0.2rem 0;
+}
+#mysearch-menu a {
+  display: flex;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+  transition: all 0.3s;
+  white-space: pre-wrap;
+  text-decoration: none;
+  color: var(--color-fg-default);
+  align-items: center;
+  justify-content: space-between;
+}
+#mysearch-menu a > sup {
+  color: var(--color-fg-subtle);
+  font-size: 0.7rem;
+}
+#mysearch-menu a:hover,
+#mysearch-menu a.active {
+  background-color: var(--color-neutral-muted);
+  border-radius: 0.5rem;
+}
+#mysearch-menu {
+  width: 25rem;
+}
+#mysearch-content {
+  flex: 1;
+}
+#mysearch-content ol li div a:hover {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+#mysearch-content ol li div a {
+  padding: 0.125rem 0.5rem;
+  border-radius: 100px;
+  margin: 0.1rem 0.2rem;
+  color: var(--color-fg-subtle);
+}
+#mysearch-content ol li div {
+  margin-left: -1.54rem;
+  padding-top: 0.82rem;
+}
+#mysearch-content ol li > a:hover {
+  text-decoration: underline;
+}
+#mysearch-content ol li > a {
+  font-weight: bold;
+}
+#mysearch-content ol li a {
+  font-size: 0.85rem;
+  white-space: nowrap;
+  display: inline-block;
+  text-decoration: none;
+  color: var(--color-fg-default);
+  transition: all 0.3s;
+}
+#mysearch-content ol li {
+  word-break: break-all;
+  white-space: pre-wrap;
+  padding-bottom: 1.56rem;
+}
+#mysearch-content ol {
+  list-style: auto;
+  padding-left: 1.75rem;
+}
+#mysearch-content h3 {
+  padding-bottom: 1.3rem;
+  text-align: center;
+  padding-top: 1.5rem;
+  color: var(--color-fg-subtle);
+  max-width: 23rem;
+  margin: 0 auto;
+  font-size: 0.85rem;
 }
 
 @media (min-width: 1024px) {
@@ -1206,6 +1391,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   .h2wrap-body > .wrap {
     margin-bottom: 0;
   }
+  #mysearch.show {
+    padding-bottom: 5rem;
+    padding-top: 4rem;
+  }
 }
 @media (375px <= width <= 1024px) {
   .header-nav .title {

scripts/utils/anchorPoint.mjs

@@ -1,49 +0,0 @@
-const scripts = `
-if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
-  window.onhashchange = function () {
-    anchorPoint()
-    updateAnchor()
-  };
-}
-function anchorPoint() {
-  const hash = window.location.hash?.replace(/^#/, '') || '';
-  const elm = document.getElementById(decodeURIComponent(hash));
-  Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
-  if (elm?.tagName === 'H3') {
-    elm?.parentElement?.parentElement?.classList.add('active');
-  }
-}
-anchorPoint();
-
-function updateAnchor(element) {
-  const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
-  anchorContainer.forEach((tocanchor) => {
-    tocanchor.classList.remove('is-active-link');
-  });
-  const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
-  if (anchor) {
-    anchor.classList.add('is-active-link');
-  }
-}
-// toc 定位
-updateAnchor()
-const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
-anchor.forEach((item) => {
-  item.addEventListener('click', (e) => {
-    updateAnchor()
-  })
-})
-`;
-
-export function anchorPoint() {
-  return {
-    type: 'element',
-    tagName: 'script',
-    children: [
-      {
-        type: 'text',
-        value: scripts,
-      },
-    ],
-  };
-}

scripts/utils/darkMode.mjs

@@ -1,28 +1,15 @@
 import path from 'path';
 import { getSVGNode } from './getSVGNode.mjs';
 
-const scripts = `
-  const LOCAL_NANE = '_dark_mode_theme_'
-  const rememberedValue = localStorage.getItem(LOCAL_NANE);
-  if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
-    document.documentElement.setAttribute('data-color-mode', rememberedValue);
-  }
-  const button = document.querySelector('#darkMode');
-  button.onclick = () => {
-    const theme = document.documentElement.dataset.colorMode;
-    const mode = theme === 'light' ? 'dark' : 'light';
-    document.documentElement.setAttribute('data-color-mode', mode);
-    localStorage.setItem(LOCAL_NANE, mode);
-  }
-`;
-
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
 
-export function darkMode() {
+export function darkMode({ homePath = '', isHome } = {}) {
+  const relativePath = homePath.replace(/[\\/]?index.html$/, isHome ? '' : '/');
   const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
   const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
   const sunNode = getSVGNode(iconSunPath);
   const moonNode = getSVGNode(iconMoonPath);
+  const darkJSUrl = relativePath + 'js/dark.js';
   return [
     {
       type: 'element',
@@ -36,12 +23,9 @@ export function darkMode() {
     {
       type: 'element',
       tagName: 'script',
-      children: [
-        {
-          type: 'text',
-          value: scripts,
-        },
-      ],
+      properties: {
+        src: darkJSUrl,
+      },
     },
   ];
 }

scripts/utils/getTocsTree.mjs

@@ -10,7 +10,12 @@ export function getTocsTitleNode(arr = [], result = []) {
   arr.forEach(({ tagName, type, properties, children }) => {
     if (/^h[23456]/.test(tagName)) {
       const num = titleNum(tagName);
-      const props = { 'aria-hidden': 'true', class: `leve${num} tocs-link`, href: '#' + (properties.id || '') };
+      const props = {
+        'aria-hidden': 'true',
+        class: `leve${num} tocs-link`,
+        'data-num': num,
+        href: '#' + (properties.id || ''),
+      };
       const title = getCodeString(children || []);
       result.push({ tagName: 'a', type, properties: props, children: [{ type: 'text', value: title || ' ' }] });
     } else if (children?.length > 0) {

scripts/utils/homeCardIcons.mjs

@@ -1,7 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
+import { getCodeString } from 'rehype-rewrite';
 import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 
+const resultHomeCard = {};
+const COLOR_REG = /background:(\s+)?rgb\(([\d]+\s+[\d]+\s+[\d]+(\s+)?)\);?/gi;
+
 export function homeCardIcons(node, parent, isHome) {
   if (
     isHome &&
@@ -22,16 +26,23 @@ export function homeCardIcons(node, parent, isHome) {
   ) {
     node.children = node.children.map((child) => {
       const href = child.properties?.href;
-      if (href) {
+      if (href && href.endsWith('.md')) {
         const iconName = path.basename(href, '.md');
         const iconPath = path.resolve(ICONS_PATH, `${iconName}.svg`);
         const iconDefaultPath = path.resolve(ICONS_PATH, `list.svg`);
         const iconExist = fs.existsSync(iconPath);
+        let color = '';
+        child.properties.style = child.properties.style.replace(COLOR_REG, (str) => {
+          color = str.replace(COLOR_REG, '$2');
+          return str.replace(/(\);)/, '/ var(--bg-opacity)$1');
+        });
+        const tags = child.properties['data-lang'];
         const labelNode = {
           type: 'element',
           tagName: 'span',
           children: child.children,
         };
+        const title = getCodeString(child.children);
         if (iconExist) {
           const svgNode = getSVGNode(iconPath);
           child.children = [...svgNode, labelNode];
@@ -39,8 +50,15 @@ export function homeCardIcons(node, parent, isHome) {
           const svgNode = getSVGNode(iconDefaultPath);
           child.children = [...svgNode, labelNode];
         }
+        resultHomeCard[iconName] = {
+          md: iconName,
+          title: title,
+          rgb: color,
+          tags: tags ? tags.split('/') : [],
+        };
       }
       return child;
     });
   }
+  return resultHomeCard;
 }

scripts/utils/rehypeTitle.mjs

@@ -10,6 +10,8 @@ export function rehypeTitle(node, iconName) {
     if (iconExist) {
       const svgNode = getSVGNode(iconPath);
       node.children = [...svgNode, ...node.children];
+      // 如果存在返回图标名称
+      return iconName;
     } else {
       const svgNode = getSVGNode(iconDefaultPath);
       node.children = [...svgNode, ...node.children];

scripts/watch.mjs

@@ -1,20 +1,32 @@
 import path from 'path';
 import chokidar from 'chokidar';
 import { getStat } from 'recursive-readdir-files';
-import { run, DOCS, createHTML } from './index.mjs';
+import { run, DOCS, createHTML, copyCSSFile, copyJSFile } from './index.mjs';
 
 (async () => {
   await run();
   const homeMdPath = path.relative(process.cwd(), 'README.md');
-  const watcher = chokidar.watch([DOCS, homeMdPath], {
+  const cssDirPath = path.relative(process.cwd(), 'scripts/style');
+  const jsDirPath = path.relative(process.cwd(), 'scripts/js');
+  const watcher = chokidar.watch([DOCS, homeMdPath, cssDirPath, jsDirPath], {
     ignored: /(^|[\/\\])\../, // ignore dotfiles
     persistent: true,
   });
 
   watcher
-    .on('change', async (path) => {
-      const stats = await getStat(path);
-      createHTML([stats]);
+    .on('change', async (filepath) => {
+      if (filepath.endsWith('.md')) {
+        const stats = await getStat(filepath);
+        createHTML([stats]);
+      }
+      if (filepath.endsWith('.css')) {
+        copyCSSFile(filepath);
+        console.log(`♻️ \x1b[32;1m ${path.relative(cssDirPath, filepath)} \x1b[0m`);
+      }
+      if (filepath.endsWith('.js')) {
+        copyJSFile(filepath);
+        console.log(`♻️ \x1b[32;1m ${path.relative(jsDirPath, filepath)} \x1b[0m`);
+      }
     })
     .on('error', (error) => console.log(`Watcher error: ${error}`));
 })();