released v1.14.0

.github/ISSUE_TEMPLATE/cheatsheet-request.md

@@ -16,5 +16,5 @@ assignees: jaywcjlove
 提供参考资料地址
 ----
 
-- [参考地址 1](https://xxx.com)
+- [提供 参考地址 1](https://jaywcjlove.github.io/reference)
-- [官网地址](https://xxx.com)
+- [提供 官网地址](https://jaywcjlove.github.io/reference)

README.md

@@ -23,6 +23,7 @@ Quick Reference
 [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
 [INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
 [JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/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(103 61 156/var(\-\-bg\-opacity));-->
 [Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
@@ -36,6 +37,7 @@ Quick Reference
 [CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));-->
 [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));-->
 [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));-->
 [Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
@@ -50,7 +52,7 @@ Quick Reference
 [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));-->
+[Vue 3 ](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
 <!--rehype:class=home-card-->
 
 ## Nodejs
@@ -73,13 +75,14 @@ Quick Reference
 
 ## Linux 命令
 
+[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [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));-->
 [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));-->
+[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
-[htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[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));-->
 [Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
 [Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->

docs/awk.md

@@ -0,0 +1,788 @@
+Awk 备忘清单
+===
+
+这是 [GNU awk](https://www.gnu.org/software/gawk/manual/gawk.html) 的单页快速参考备忘单，其中涵盖了常用的 `awk` 表达式和命令。
+
+入门
+------
+
+### 试试
+
+该程序可用于选择文件中的特定记录并对其执行操作
+
+```shell
+$ awk -F: '{print $1, $NF}' /etc/passwd
+```
+
+----
+
+| - | -             | -                         |
+|---|---------------|---------------------------|
+|   | `-F:`         | 冒号作为分隔符   |
+|   | `{...}`       | awk 程序       |
+|   | `print`       | 打印当前记录   |
+|   | `$1`          | 第一个字段     |
+|   | `$NF`         | 最后一个字段   |
+|   | `/etc/passwd` | 输入数据文件   |
+
+### Awk 程序 
+
+```bash
+BEGIN          {<初始化>} 
+   <pattern 1> {<计划动作>} 
+   <pattern 2> {<计划动作>} 
+   ...
+END            {< 最后的动作 >}
+```
+
+#### 示例
+
+```bash
+awk '
+    BEGIN { print "\n>>>Start" }
+    !/(login|shutdown)/ { print NR, $0 }
+    END { print "<<<END\n" }
+' /etc/passwd
+```
+
+### 变量
+<!--rehype:wrap-class=row-span-2-->
+
+```bash
+          $1      $2/$(NF-1)    $3/$NF
+           ▼          ▼           ▼ 
+        ┌──────┬──────────────┬───────┐
+$0/NR ▶ │  ID  │  WEBSITE     │  URI  │
+        ├──────┼──────────────┼───────┤
+$0/NR ▶ │  1   │  baidu.com   │  awk  │
+        ├──────┼──────────────┼───────┤
+$0/NR ▶ │  2   │  google.com  │  25   │
+        └──────┴──────────────┴───────┘
+```
+---
+
+```shell
+# 第一个和最后一个字段
+awk -F: '{print $1,$NF}' /etc/passwd
+# 带行号
+awk -F: '{print NR, $0}' /etc/passwd
+# 倒数第二个字段
+awk -F: '{print $(NF-1)}' /etc/passwd
+# 自定义字符串
+awk -F: '{print $1 "=" $6}' /etc/passwd
+```
+
+查看: [Awk 变量](#awk-变量)
+
+### Awk 程序示例
+<!--rehype:wrap-class=row-span-2 col-span-2-->
+
+```shell
+awk 'BEGIN {print "hello world"}'        # 打印 "hello world"
+awk -F: '{print $1}' /etc/passwd         # -F: 指定字段分隔符
+# /pattern/ 仅对匹配的模式执行操作
+awk -F: '/root/ {print $1}' /etc/passwd                     
+# BEGIN 块在开始时执行一次
+awk -F: 'BEGIN { print "uid"} { print $1 }' /etc/passwd     
+# END 块在最后执行一次
+awk -F: '{print $1} END { print "-done-"}' /etc/passwd
+```
+
+### 条件
+
+```bash
+awk -F: '$3>30 {print $1}' /etc/passwd
+```
+
+查看: [Conditions 条件](#awk-条件)
+
+### 生成 1000 个空格
+
+```shell
+awk 'BEGIN{
+    while (a++ < 1000)
+        s=s " ";
+    print s
+}'
+```
+
+查看: [Loops](#awk-循环)
+
+### 数组 Arrays
+
+```shell
+awk 'BEGIN {
+   fruits["mango"] = "yellow";
+   fruits["orange"] = "orange"
+   for(fruit in fruits) {
+     print fruit " 的颜色是 " fruits[fruit]
+   }
+}'
+```
+
+查看: [Awk 数组](#awk-数组)
+
+### 函数 Functions
+
+```shell
+# => 5
+awk 'BEGIN{print length("hello")}'
+# => HELLO
+awk 'BEGIN{print toupper("hello")}'
+# => hel
+awk 'BEGIN{print substr("hello", 1, 3)}'
+```
+
+查看: [Functions](#awk-函数)
+
+Awk 变量
+---------
+
+### 内置变量
+
+:- | :-
+:- | :-
+`$0`           | 全线
+`$1, $2...$NF` | 第一个，第二个……最后一个字段
+`NR`           | 记录总数(`N`umber of `R`ecords)
+`NF`           | N个字段(`N`number of `F`ields)
+`OFS`          | `O`utput `F`ield `S`eparator<br> 输出字段分隔符 _(default " ")_
+`FS`           | input `F`ield `S`eparator <br> 输入字段分隔符 _(default " ")_
+`ORS`          | `O`utput `R`ecord `S`eparator <br> 输出记录分隔符 _(default "\n")_
+`RS`           | input `R`ecord `S`eparator <br> 输入记录分隔符 _(default "\n")_
+`FILENAME`     | 文件名
+
+### 表达式
+<!--rehype:wrap-class=row-span-2-->
+
+:- | :-
+:- | :-
+`$1 == "root"`       | 第一个字段等于根
+`{print $(NF-1)}`    | 倒数第二个字段
+`NR!=1{print $0}`    | 从第 2 条记录开始
+`NR > 3`             | 从第 4 条记录开始
+`NR == 1`            | 第一次记录
+`END{print NR}`      | 总记录
+`BEGIN{print OFMT}`  | 输出格式
+`{print NR, $0}`     | 行号
+`{print NR "  " $0}` | 行号(选项卡)
+`{$1 = NR; print}`   | 用行号替换第一个字段
+`$NF > 4`            | 最后一个字段 > 4
+`NR % 2 == 0`        | 甚至记录
+`NR==10, NR==20`     | 记录 10 到 20
+`BEGIN{print ARGC}`  | 总 `arguments`
+`ORS=NR%5?",":"\n"`  | 连接记录
+
+### 示例
+<!--rehype:wrap-class=row-span-2-->
+
+打印总和和平均值
+
+```shell
+awk -F: '{sum += $3}
+     END { print sum, sum/NR }
+' /etc/passwd
+```
+
+打印参数
+
+```shell
+awk 'BEGIN {
+    for (i = 1; i < ARGC; i++)
+        print ARGV[i] }' a b c
+```
+
+输出字段分隔符为逗号
+
+```shell
+awk 'BEGIN { FS=":";OFS=","}
+    {print $1,$2,$3,$4}' /etc/passwd
+```
+
+匹配位置
+
+```shell
+awk 'BEGIN {
+    if (match("One Two Three", "Tw"))
+        print RSTART }'
+```
+
+匹配时长
+
+```shell
+awk 'BEGIN {
+    if (match("One Two Three", "re"))
+        print RLENGTH }'
+```
+
+### 仅限 GNU awk
+
+:- | :-
+:- | :-
+`ENVIRON`     | 环境变量
+`IGNORECASE`  | 忽略大小写
+`CONVFMT`     | 转换格式
+`ERRNO`       | 系统错误
+`FIELDWIDTHS` | 固定宽度字段
+
+### 环境变量
+
+:- | :-
+:- | :-
+`ARGC`    | 数字或参数
+`ARGV`    | 参数数组
+`FNR`     | 文件记录数(`F`ile `N`umber of `R`ecords)
+`OFMT`    | 数字格式 _(default "%.6g")_
+`RSTART`  | 字符串中的位置
+`RLENGTH` | 比赛时长
+`SUBSEP`  | 多维数组分隔符 _(default "\034")_
+`ARGIND`  | 参数索引
+
+### 定义变量
+
+```shell
+awk -v var1="Hello" -v var2="Wold" '
+    END {print var1, var2}
+' </dev/null
+```
+
+#### 使用 shell 变量
+
+```shell
+awk -v varName="$PWD" '
+    END {print varName}' </dev/null
+```
+
+
+Awk 运算符
+---------
+
+### 运算符
+
+:- | :-
+:- | :-
+`{print $1}`     | 第一个字段
+`$2 == "foo"`    | 等于
+`$2 != "foo"`    | 不等于
+`"foo" in array` | 在数组中
+
+#### 正则表达式
+
+:- | :-
+:- | :-
+| `/regex/`       | 行匹配|
+| `!/regex/`      | 行不匹配|
+| `$1 ~ /regex/`  | 字段匹配|
+| `$1 !~ /regex/` | 字段不匹配|
+
+#### 更多条件
+
+:- | :-
+:- | :-
+`($2 <= 4 \|\| $3 < 20)` | 或者
+`($1 == 4 && $3 < 20)`   | 和
+
+### 运算符
+
+#### 算术运算
+
+- `+`
+- `-`  
+- `*`  
+- `/`  
+- `%`  
+- `++` 
+- `--` 
+<!--rehype:className=cols-3 style-none-->
+
+#### 速记作业
+
+- `+=` 
+- `-=` 
+- `*=` 
+- `/=` 
+- `%=` 
+<!--rehype:className=cols-3 style-none-->
+
+#### 比较运算符
+
+- `==`
+- `!=`
+- `<`
+- `>`
+- `<=`
+- `>=`
+<!--rehype:className=cols-3 style-none-->
+
+### 示例
+
+```shell
+awk 'BEGIN {
+    if ("foo" ~ "^fo+$")
+        print "Fooey!";
+}'
+```
+
+#### 不匹配
+
+```shell
+awk 'BEGIN {
+    if ("boo" !~ "^fo+$")
+        print "Boo!";
+}'
+```
+
+#### 如果在数组中
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("foo" in assoc)
+        print "Fooey!";
+}'
+```
+
+Awk 函数
+----------
+
+### 常用功能
+<!--rehype:wrap-class=col-span-2-->
+
+函数 | 描述
+:- | :-
+`index(s,t)`          | 字符串 `s` 中出现字符串 `t` 的位置，如果未找到则为 `0`
+`length(s)`           | 字符串 `s` 的长度(如果没有 `arg`，则为 `$0`)
+`rand`                | `0` 到 `1` 之间的随机数
+`substr(s,index,len)` | 返回从索引开始的 `s` 的 `len-char` 子字符串(从 `1` 开始计数)
+`srand`               | 为 `rand` 设置种子并返回之前的种子
+`int(x)`              | 将 `x` 截断为整数值
+`split(s,a,fs)`       | 将字符串 `s` 拆分为数组 `a` 由 `fs` 拆分，返回 `a` 的长度
+`match(s,r)`          | 字符串 `s` 中出现正则表达式 `r` 的位置，如果未找到，则为 `0`
+`sub(r,t,s)`          | 将 `t` 替换为字符串 `s` 中第一次出现的正则表达式 `r`(如果未给出 `s`，则替换为 `$0`)
+`gsub(r,t,s)`         | 用 `t` 替换字符串 `s` 中所有出现的正则表达式 `r`
+`system(cmd)`         | 执行cmd并返回退出状态
+`tolower(s)`          | 字符串 `s` 转小写
+`toupper(s)`          | 字符串 `s` 转大写
+`getline`             | 将 `$0` 设置为当前输入文件中的下一个输入记录
+
+
+### 用户定义函数
+
+```shell
+awk '
+    # 返回最小数量
+    function find_min(num1, num2){
+       if (num1 < num2)
+       return num1
+       return num2
+    }
+    # 返回最大数量
+    function find_max(num1, num2){
+       if (num1 > num2)
+       return num1
+       return num2
+    }
+    # 主功能
+    function main(num1, num2){
+       result = find_min(num1, num2)
+       print "Minimum =", result
+      
+       result = find_max(num1, num2)
+       print "Maximum =", result
+    }
+    # 脚本执行从这里开始
+    BEGIN {
+       main(10, 60)
+    }
+'
+```
+
+Awk 数组
+---------
+
+### 带索引的数组
+
+```shell
+awk 'BEGIN {
+    arr[0] = "foo";
+    arr[1] = "bar";
+    print(arr[0]); # => foo
+    delete arr[0];
+    print(arr[0]); # => ""
+}'
+```
+
+### 带键的数组
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    print("baz" in assoc); # => 0
+    print("foo" in assoc); # => 1
+}'
+```
+
+
+### 带拆分的数组
+
+```shell
+awk 'BEGIN {
+    split("foo:bar:baz", arr, ":");
+    for (key in arr)
+        print arr[key];
+}'
+```
+
+### 带有排序的数组
+
+```shell
+awk 'BEGIN {
+    arr[0] = 3
+    arr[1] = 2
+    arr[2] = 4
+    n = asort(arr)
+    for (i = 1; i <= n ; i++)
+        print(arr[i])
+}'
+```
+
+### 多维
+
+```shell
+awk 'BEGIN {
+    multidim[0,0] = "foo";
+    multidim[0,1] = "bar";
+    multidim[1,0] = "baz";
+    multidim[1,1] = "boo";
+}'
+```
+
+### 多维迭代
+
+```shell
+awk 'BEGIN {
+    array[1,2]=3;
+    array[2,3]=5;
+    for (comb in array) {
+        split(comb,sep,SUBSEP);
+        print sep[1], sep[2], 
+        array[sep[1],sep[2]]
+    }
+}'
+```
+
+Awk 条件
+----------
+
+### if-else 语句
+
+```shell
+awk -v count=2 'BEGIN {
+    if (count == 1)
+        print "Yes";
+    else
+        print "Huh?";
+}'
+```
+
+#### 三元运算符
+
+```shell
+awk -v count=2 'BEGIN {
+    print (count==1) ? "Yes" : "Huh?";
+}'
+```
+
+### 存在
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("foo" in assoc)
+        print "Fooey!";
+}'
+```
+
+#### 不存在
+
+```shell
+awk 'BEGIN {
+    assoc["foo"] = "bar";
+    assoc["bar"] = "baz";
+    if ("Huh" in assoc == 0 )
+        print "Huh!";
+}'
+```
+
+### switch
+
+```shell
+awk -F: '{
+    switch (NR * 2 + 1) {
+        case 3:
+        case "11":
+            print NR - 1
+            break
+        case /2[[:digit:]]+/:
+            print NR
+        default:
+            print NR + 1
+        case -1:
+            print NR * -1
+    }
+}' /etc/passwd
+```
+
+
+Awk 循环
+----------
+
+### for...i
+
+```shell
+awk 'BEGIN {
+    for (i = 0; i < 10; i++)
+        print "i=" i;
+}'
+```
+
+#### 1 到 100 之间的 2 的幂
+
+```shell
+awk 'BEGIN {
+    for (i = 1; i <= 100; i *= 2)
+        print i
+}'
+```
+
+### for...in
+
+```shell
+awk 'BEGIN {
+    assoc["key1"] = "val1"
+    assoc["key2"] = "val2"
+    for (key in assoc)
+        print assoc[key];
+}'
+```
+
+#### Arguments
+
+```shell
+awk 'BEGIN {
+    for (argnum in ARGV)
+        print ARGV[argnum];
+}' a b c
+```
+
+### 示例
+<!--rehype:wrap-class=row-span-3-->
+
+#### 反向记录
+
+```shell
+awk -F: '{ x[NR] = $0 }
+    END {
+        for (i = NR; i > 0; i--)
+        print x[i]
+    }
+' /etc/passwd
+```
+
+#### 反向字段
+
+```shell
+awk -F: '{
+    for (i = NF; i > 0; i--)
+        printf("%s ",$i);
+    print ""
+}' /etc/passwd
+```
+
+#### 按记录求和
+
+```shell
+awk -F: '{
+    s=0;
+    for (i = 1; i <= NF; i++)
+        s += $i;
+    print s
+}' /etc/passwd
+```
+
+#### 总结整个文件
+
+```shell
+awk -F: '
+    {for (i = 1; i <= NF; i++)
+        s += $i;
+    };
+    END{print s}
+' /etc/passwd
+```
+
+### while
+<!--rehype:wrap-class=row-span-2-->
+
+```shell
+awk 'BEGIN {
+    while (a < 10) {
+        print "- " " concatenation: " a
+        a++;
+    }
+}'
+```
+
+#### do...while
+
+```shell
+awk '{
+    i = 1
+    do {
+        print $0
+        i++
+    } while (i <= 5)
+}' /etc/passwd
+```
+
+### Break
+
+```shell
+awk 'BEGIN {
+    break_num = 5
+    for (i = 0; i < 10; i++) {
+        print i
+        if (i == break_num)
+            break
+    }
+}'
+```
+
+### Continue
+
+```shell
+awk 'BEGIN {
+    for (x = 0; x <= 10; x++) {
+        if (x == 5 || x == 6)
+            continue
+        printf "%d ", x
+    }
+    print ""
+}'
+```
+
+Awk 格式化打印
+---------
+
+### 用法
+
+#### 右对齐
+
+```shell
+awk 'BEGIN{printf "|%10s|\n", "hello"}'
+# |     hello|
+```
+
+#### 左对齐
+
+```shell
+awk 'BEGIN{printf "|%-10s|\n", "hello"}'
+# |hello     |
+```
+
+### 通用说明符
+
+特征符 | 描述
+:- | :-
+`c`           | ASCII 字符
+`d`           | 十进制整数
+`e`, `E`, `f` | 浮点格式
+`o`           | 无符号八进制值
+`s`           | 细绳
+`%`           | 文字百分比
+
+### Space 空间
+
+```shell
+awk -F: '{
+    printf "%-10s %s\n", $1, $(NF-1)
+}' /etc/passwd | head -n 3
+```
+
+输出
+
+```shell
+root       /root
+bin        /bin
+daemon     /sbin
+```
+
+### Header 标题头
+
+```shell
+awk -F: 'BEGIN {
+    printf "%-10s %s\n", "User", "Home"
+    printf "%-10s %s\n", "----","----"}
+    { printf "%-10s %s\n", $1, $(NF-1) }
+' /etc/passwd | head -n 5
+```
+
+输出
+
+```shell
+User       Home
+----       ----
+root       /root
+bin        /bin
+daemon     /sbin
+```
+
+各种各样的
+-------------
+
+### 正则表达式元字符
+- `\`
+- `^`
+- `$`
+- `.`
+- `[`
+- `]`
+- `|`
+- `(`
+- `)`
+- `*`
+- `+`
+- `?`
+<!--rehype:className=cols-3 style-none-->
+
+### 转义序列
+
+:- | :-
+:- | :-
+`\b` | 退格
+`\f` | 换页
+`\n` | 换行(换行)
+`\r` | 回车
+`\t` | 水平选项卡
+`\v` | 垂直选项卡
+
+### 运行脚本
+
+```shell
+$ cat demo.awk
+#!/usr/bin/awk -f
+BEGIN { x = 23 }
+      { x += 2 }
+END   { print x }
+$ awk -f demo.awk /etc/passwd
+69
+```
+
+另见
+--------
+
+- [GNU awk 用户指南](https://www-zeuthen.desy.de/dv/documentation/unixguide/infohtml/gawk/gawk.html) _(www-zeuthen.desy.de)_
+- [AWK cheatsheet](https://gist.github.com/Rafe/3102414) _(gist.github.com)_

docs/chmod.md

@@ -277,7 +277,8 @@ $ find /path -type f -exec chmod 644 {} \;
 * [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
 
 <!--rehype:ignore:start-->
-### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+---
 <!--rehype:ignore:end-->
 
 ```html preview

docs/css.md

@@ -262,14 +262,14 @@ p:first-child {
 
 选择器 | 说明
 :- | :-
-`a[target]`          | 带有 <yel>target</yel> 属性
+`a[target]`          | 带有 <yel>target</yel> 属性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attr)
-`a[target="_blank"]` | 在新标签中打开
+`a[target="_blank"]` | 在新标签中打开 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
-`a[href^="/index"]`  | 以 <yel>/index</yel> 开头
+`a[href^="/index"]`  | 以 <yel>/index</yel> 开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_4)
-`[class\|="chair"]`   | 以<yel>chair</yel>开头
+`[class\|="chair"]`   | 以<yel>chair</yel>开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_3)
-`[class*="chair"]`   | 包含<yel>chair</yel>
+`[class*="chair"]`   | 包含<yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_6)
-`[title~="chair"]`   | 包含单词 <yel>chair</yel>
+`[title~="chair"]`   | 包含单词 <yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_2)
-`a[href$=".doc"]`    | 以 <yel>.doc</yel> 结尾
+`a[href$=".doc"]`    | 以 <yel>.doc</yel> 结尾 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_5)
-`[type="button"]`    | 指定类型
+`[type="button"]`    | 指定类型 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
 
 另见: [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)
 
@@ -282,6 +282,19 @@ p:first-child {
 `a:hover   ` | 鼠标悬停链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover)
 `a:visited ` | 访问链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited)
 
+---
+
+```css
+/* 未访问链接 */
+a:link { color: blue; }        
+/* 已访问链接 */
+a:visited { color: purple; }   
+/* 用户鼠标悬停 */
+a:hover { background: yellow; }
+/* 激活链接 */
+a:active { color: red; }       
+```
+
 ### 伪类
 
 选择器 | 说明
@@ -297,6 +310,10 @@ p:first-child {
 `div:empty`       | 没有子元素的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty)
 `p:lang(en)`      | 带有 en 语言属性的 P [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang)
 `:not(span)`      | 不是跨度的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
+`:host`           | shadowDOM 中选择自定义元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root)
+`::backdrop`      | 处于全屏模式的元素样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop)
+`::marker`        | `li` 项目符号或者数字 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker)
+`::file-selector-button`      | type="file" `input` 按钮 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::file-selector-button)
 
 ### 输入伪类
 
@@ -305,6 +322,8 @@ p:first-child {
 `input:checked`       | 检查 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)
 `input:disabled`      | 禁用 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled)
 `input:enabled`       | 启用的 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled)
+`input:default`       | 有默认值的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default)
+`input:blank`         | 空的输入框 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:blank)
 `input:focus`         | `input` 有焦点 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus)
 `input:in-range`      | 范围内的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range)
 `input:out-of-range`  | `input` 值超出范围 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range)
@@ -331,6 +350,11 @@ p:first-child {
 `p:nth-last-of-type(2)` | ...从后面 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type)
 `p:only-of-type`        | 其父级的唯一性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type)
 `p:only-child`          | 其父母的唯一孩子 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child)
+`:is(header, div) p`    | 可以选择的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is)
+`:where(header, div) p` | 与 `:is` 相同 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where)
+`a:has(> img)`          | 包含 `img` 元素的 `a` 元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has)
+`::first-letter`        | 第一行的第一个字母 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-letter)
+`::first-line`          | 第一行应用样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-line)
 
 CSS 字体
 ------

docs/es6.md

@@ -0,0 +1,727 @@
+ES2015+ 备忘清单
+===
+
+快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性
+
+常用
+---
+
+### 块范围
+<!--rehype:wrap-class=row-span-2-->
+
+#### Let
+
+```js {2,4}
+function fn () {
+  let x = 0
+  if (true) {
+    let x = 1 // 只在这个`if`里面
+  }
+}
+```
+
+#### Const
+
+```js
+const a = 1
+```
+
+`let` 是新的 `var`。 常量(`const`) 就像 `let` 一样工作，但不能重新分配。
+请参阅：[Let 和 const](https://babeljs.io/learn-es2015/#let--const)
+
+### 反引号字符串
+<!--rehype:wrap-class=row-span-2-->
+
+#### 插值
+
+```js
+const message = `Hello ${name}`
+```
+
+#### 多行字符串
+
+```js
+const str = `
+hello
+world
+`
+```
+
+模板和多行字符串。
+请参阅：[模板字符串](https://babeljs.io/learn-es2015/#template-strings)
+
+### 二进制和八进制文字
+
+```js
+let bin = 0b1010010
+let oct = 0o755
+```
+
+请参阅：[二进制和八进制文字](https://babeljs.io/learn-es2015/#binary-and-octal-literals)
+
+### 指数运算符
+
+```js {1}
+const byte = 2 ** 8
+// 同: Math.pow(2, 8)
+```
+
+### 新方法
+
+#### 新的字符串方法
+
+```js
+"hello".repeat(3)
+"hello".includes("ll")
+"hello".startsWith("he")
+"hello".padStart(8) // "   hello"
+"hello".padEnd(8) // "hello   " 
+"hello".padEnd(8, '!') // hello!!!
+"\u1E9B\u0323".normalize("NFC")
+```
+
+#### 新的数字方法
+
+```js
+Number.EPSILON
+Number.isInteger(Infinity) // false
+Number.isNaN("NaN") // false
+```
+
+#### 新的 Math 方法
+
+```js
+Math.acosh(3) // 1.762747174039086
+Math.hypot(3, 4) // 5
+Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
+```
+
+#### 新的 Array 方法
+
+```js
+// 返回一个真实的数组
+Array.from(document.querySelectorAll("*"))
+// 类似于 new Array(...)，但没有特殊的单参数行为
+Array.of(1, 2, 3)
+```
+
+请参阅: [新方法](https://babeljs.io/learn-es2015/#math--number--string--object-apis)
+
+### 类
+
+```js
+class Circle extends Shape {
+```
+
+#### 构造函数
+
+```js {1}
+  constructor (radius) {
+    this.radius = radius
+  }
+```
+
+#### 方法
+
+```js {1}
+  getArea () {
+    return Math.PI * 2 * this.radius
+  }
+```
+
+#### 调用超类方法
+
+```js {2}
+  expand (n) {
+    return super.expand(n) * Math.PI
+  }
+```
+
+#### 静态方法
+
+```js {1}
+  static createFromDiameter(diameter) {
+    return new Circle(diameter / 2)
+  }
+}
+```
+
+原型的语法糖。
+请参阅: [类](https://babeljs.io/learn-es2015/#classes)
+
+
+Promises
+--------
+
+### 做出承诺
+
+```js {1}
+new Promise((resolve, reject) => {
+  if (ok) { resolve(result) }
+  else { reject(error) }
+})
+```
+
+用于异步编程。
+请参阅：[Promises](https://babeljs.io/learn-es2015/#promises)
+
+### 使用 Promises
+
+```js {2,3}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+```
+
+### 在 finally 中使用 Promise
+
+```js {4}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+  .finally(() => {
+    /* 独立于成功/错误的逻辑 */
+  })
+```
+
+当承诺被履行或被拒绝时，处理程序被调用
+
+### Promise 函数
+
+```js
+Promise.all(···)
+Promise.race(···)
+Promise.reject(···)
+Promise.resolve(···)
+```
+
+### Async-await
+
+```js {2,3}
+async function run () {
+  const user = await getUser()
+  const tweets = await getTweets(user)
+  return [user, tweets]
+}
+```
+
+`async` 函数是使用函数的另一种方式。
+请参阅：[异步函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
+
+解构 Destructuring
+-------------
+
+### 解构赋值
+
+#### Arrays
+
+```js {1}
+const [first, last] = ['Nikola', 'Tesla']
+```
+
+#### Objects
+
+```js {1}
+let {title, author} = {
+  title: 'The Silkworm',
+  author: 'R. Galbraith'
+}
+```
+
+支持匹配数组和对象。
+请参阅：[解构](https://babeljs.io/learn-es2015/#destructuring)
+
+### 默认值
+
+```js
+const scores = [22, 33]
+const [math = 50, sci = 50, arts = 50] = scores
+```
+----
+```js
+// Result:
+// math === 22, sci === 33, arts === 50
+```
+
+可以在解构数组或对象时分配默认值
+
+### 函数参数
+
+```js {1}
+function greet({ name, greeting }) {
+  console.log(`${greeting}, ${name}!`)
+}
+```
+----
+```js
+greet({ name: 'Larry', greeting: 'Ahoy' })
+```
+
+对象和数组的解构也可以在函数参数中完成
+
+### 默认值
+
+```js {1}
+function greet({ name = 'Rauno' } = {}) {
+  console.log(`Hi ${name}!`);
+}
+```
+----
+```js
+greet() // Hi Rauno!
+greet({ name: 'Larry' }) // Hi Larry!
+```
+
+### 重新分配键
+
+```js {1}
+function printCoordinates({ left: x, top: y }) {
+  console.log(`x: ${x}, y: ${y}`)
+}
+```
+----
+```js
+printCoordinates({ left: 25, top: 90 })
+```
+
+此示例将 `x` 分配给 `left` 键的值
+
+### 循环
+
+```js {1}
+for (let {title, artist} of songs) {
+  ···
+}
+```
+
+赋值表达式也在循环中工作
+
+### 对象解构
+
+```js {1}
+const { id, ...detail } = song;
+```
+
+使用 `rest(...)` 运算符单独提取一些键和对象中的剩余键
+
+扩展运算符 Spread
+------
+
+### 对象扩展
+
+#### 与对象扩展
+
+```js {2}
+const options = {
+  ...defaults,
+  visible: true
+}
+```
+
+#### 没有对象扩展
+
+```js
+const options = Object.assign(
+  {}, defaults,
+  { visible: true })
+```
+
+对象扩展运算符允许您从其他对象构建新对象。
+请参阅：[对象传播](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+### 数组扩展
+
+#### 具有数组扩展
+
+```js {2,3}
+const users = [
+  ...admins,
+  ...editors,
+  'rstacruz'
+]
+```
+
+#### 没有数组扩展
+
+```js
+const users = admins
+  .concat(editors)
+  .concat([ 'rstacruz' ])
+```
+
+扩展运算符允许您以相同的方式构建新数组。
+请参阅：[扩展运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+函数 Functions
+---------
+
+### 函数参数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 默认参数
+
+```js {1}
+function greet (name = 'Jerry') {
+  return `Hello ${name}`
+}
+```
+
+#### Rest 参数
+
+```js {1}
+function fn(x, ...y) {
+  // y 是一个数组
+  return x * y.length
+}
+```
+
+#### 扩展
+
+```js {1}
+fn(...[1, 2, 3])
+// 与 fn(1, 2, 3) 相同
+```
+
+Default(默认), rest, spread(扩展)。
+请参阅：[函数参数](https://babeljs.io/learn-es2015/#default--rest--spread)
+
+### 箭头函数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 箭头函数
+
+```js {1}
+setTimeout(() => {
+  ···
+})
+```
+
+#### 带参数
+
+```js {1}
+readFile('text.txt', (err, data) => {
+  ...
+})
+```
+
+#### 隐式返回
+
+```js {1,4,5,6}
+arr.map(n => n*2)
+// 没有花括号 = 隐式返回
+// 同: arr.map(function (n) { return n*2 })
+arr.map(n => ({
+  result: n*2
+}))
+// 隐式返回对象需要在对象周围加上括号
+```
+
+类似函数，但保留了 `this`。
+请参阅：[箭头函数](https://babeljs.io/learn-es2015/#arrows-and-lexical-this)
+
+### 参数设置默认值
+
+```js
+function log(x, y = 'World') {
+  console.log(x, y);
+}
+
+log('Hello')          // Hello World
+log('Hello', 'China') // Hello China
+log('Hello', '')      // Hello
+```
+
+### 与解构赋值默认值结合使用
+
+```js
+function foo({x, y = 5} = {}) {
+  console.log(x, y);
+}
+
+foo() // undefined 5
+```
+
+### name 属性
+
+```js
+function foo() {}
+foo.name // "foo"
+```
+
+Objects
+-------
+
+### 速记语法
+
+```js
+module.exports = { hello, bye }
+```
+同下: 
+```js
+module.exports = {
+  hello: hello, bye: bye
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 方法
+
+```js {2}
+const App = {
+  start () {
+    console.log('running')
+  }
+}
+// 同: App = { start: function () {···} }
+```
+
+请参阅：[对象文字增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### Getters and setters
+
+```js {2,5}
+const App = {
+  get closed () {
+    return this.status === 'closed'
+  },
+  set closed (value) {
+    this.status = value ? 'closed' : 'open'
+  }
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 计算属性名称
+
+```js {3}
+let event = 'click'
+let handlers = {
+  [`on${event}`]: true
+}
+// 同: handlers = { 'onclick': true }
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 提取值
+
+```js {3,5}
+const fatherJS = { age: 57, name: "张三" }
+Object.values(fatherJS)
+// [57, "张三"]
+Object.entries(fatherJS)
+// [["age", 57], ["name", "张三"]]
+```
+
+Modules 模块
+-------
+
+### Imports 导入
+
+```js
+import 'helpers'
+// 又名: require('···')
+```
+---
+```js
+import Express from 'express'
+// 又名: const Express = require('···').default || require('···')
+```
+---
+```js
+import { indent } from 'helpers'
+// 又名: const indent = require('···').indent
+```
+---
+```js
+import * as Helpers from 'helpers'
+// 又名: const Helpers = require('···')
+```
+---
+```js
+import { indentSpaces as indent } from 'helpers'
+// 又名: const indent = require('···').indentSpaces
+```
+
+`import` 是新的 `require()`。
+请参阅：[Module imports](https://babeljs.io/learn-es2015/#modules)
+
+### Exports 导出
+
+```js
+export default function () { ··· }
+// 又名: module.exports.default = ···
+```
+----
+```js
+export function mymethod () { ··· }
+// 又名: module.exports.mymethod = ···
+```
+----
+```js
+export const pi = 3.14159
+// 又名: module.exports.pi = ···
+```
+
+----
+
+```js
+const firstName = 'Michael';
+const lastName = 'Jackson';
+const year = 1958;
+export { firstName, lastName, year };
+```
+
+----
+
+```js
+export * from "lib/math";
+```
+
+`export` 是新的`module.exports`。
+请参阅：[Module exports](https://babeljs.io/learn-es2015/#modules)
+
+### `as` 关键字重命名
+
+```js {2,8,12-14}
+import {
+  lastName as surname // 导入重命名
+} from './profile.js';
+
+function v1() { ... }
+function v2() { ... }
+
+export { v1 as default };
+// 等同于 export default v1;
+
+export {
+  v1 as streamV1,           // 导出重命名
+  v2 as streamV2,           // 导出重命名
+  v2 as streamLatestVersion // 导出重命名
+};
+```
+
+### 动态加载模块
+
+```js
+button.addEventListener('click', event => {
+  import('./dialogBox.js')
+    .then(dialogBox => {
+      dialogBox.open();
+    })
+    .catch(error => {
+      /* Error handling */
+    })
+});
+```
+
+[ES2020提案](https://github.com/tc39/proposal-dynamic-import) 引入 `import()` 函数
+
+### import() 允许模块路径动态生成
+
+```js
+const main = document.querySelector('main')
+
+import(`./modules/${someVariable}.js`)
+  .then(module => {
+    module.loadPageInto(main);
+  })
+  .catch(err => {
+    main.textContent = err.message;
+  });
+```
+
+### import.meta
+
+[ES2020](https://github.com/tc39/proposal-import-meta) 为 `import` 命令添加了一个元属性 `import.meta`，返回当前模块的元信息
+
+```js
+new URL('data.txt', import.meta.url)
+```
+
+Node.js 环境中，`import.meta.url`返回的总是本地路径，即 `file:URL` 协议的字符串，比如 `file:///home/user/foo.js`
+
+
+Generators
+----------
+
+### Generator 函数
+
+```js
+function* idMaker () {
+  let id = 0
+  while (true) { yield id++ }
+}
+```
+---
+```js
+let gen = idMaker()
+gen.next().value  // → 0
+gen.next().value  // → 1
+gen.next().value  // → 2
+```
+
+情况很复杂。
+请参阅：[Generators](https://babeljs.io/learn-es2015/#generators)
+
+### For..of + 迭代器(iterator)
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+let fibonacci = {
+  [Symbol.iterator]() {
+    let pre = 0, cur = 1;
+    return {
+      next() {
+        [pre, cur] = [cur, pre + cur];
+        return { done: false, value: cur }
+      }
+    }
+  }
+}
+
+for (var n of fibonacci) {
+  // 在 1000 处截断序列
+  if (n > 1000) break;
+  console.log(n);
+}
+```
+
+用于迭代生成器和数组。
+请参阅：[For..of iteration](https://babeljs.io/learn-es2015/#iterators--forof)
+
+### 与 Iterator 接口的关系
+
+```js
+var gen = {};
+gen[Symbol.iterator] = function* () {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+[...gen] // => [1, 2, 3]
+```
+
+`Generator` 函数赋值给 `Symbol.iterator` 属性，从而使得 `gen` 对象具有了 `Iterator` 接口，可以被 `...` 运算符遍历了
+
+
+### Symbol.iterator 属性
+
+```js
+function* gen() { /* some code */ }
+var g = gen();
+
+g[Symbol.iterator]() === g // true
+```
+
+`gen` 是一个 `Generator` 函数，调用它会生成一个遍历器对象`g`。它的 `Symbol.iterator` 属性，也是一个遍历器对象生成函数，执行后返回它自己
+
+另见
+---
+
+- [Learn ES2015](https://babeljs.io/docs/en/learn/) _(babeljs.io)_
+- [ECMAScript 6 功能概述](https://github.com/lukehoban/es6features#readme) _(github.com)_
+- [ECMAScript 6 入门教程 (阮一峰)](https://es6.ruanyifeng.com/) _(ruanyifeng.com)_

docs/java.md

@@ -0,0 +1,774 @@
+Java 备忘清单
+===
+
+该备忘单是针对 Java 初学者的速成课程，有助于复习 Java 语言的基本语法。
+
+入门
+--------
+
+### Hello.java
+<!--rehype:wrap-class=row-span-2-->
+
+```java
+public class Hello {
+  // 主要方法
+  public static void main(String[] args)
+  {
+    // 输出: Hello, world!
+    System.out.println("Hello, world!");
+  }
+}
+```
+
+编译和运行
+
+```shell
+$ javac Hello.java
+$ java Hello
+Hello, world!
+```
+
+### 变量 Variables
+
+```java
+int num = 5;
+float floatNum = 5.99f;
+char letter = 'D';
+boolean bool = true;
+String site = "quickref.me";
+```
+
+### 原始数据类型
+<!--rehype:wrap-class=row-span-2-->
+
+| 数据类型 | 大小   | 默认 | 范围               |
+|-----------|--------|---------|---------------------|
+| `byte`    | 1 byte | 0       | -128 ^to^ 127       |
+| `short`   | 2 byte | 0       | -2^15^ ^to^ 2^15^-1 |
+| `int`     | 4 byte | 0       | -2^31^ ^to^ 2^31^-1 |
+| `long`    | 8 byte | 0       | -2^63^ ^to^ 2^63^-1 |
+| `float`   | 4 byte | 0.0f    | _N/A_               |
+| `double`  | 8 byte | 0.0d    | _N/A_               |
+| `char`    | 2 byte | \\u0000 | 0 ^to^ 65535        |
+| `boolean` | _N/A_  | false   | true / false        |
+<!--rehype:className=show-header-->
+
+### 字符串 Strings
+
+```java
+String first = "John";
+String last = "Doe";
+String name = first + " " + last;
+System.out.println(name);
+```
+
+查看: [Strings](#java-字符串)
+
+### 循环 Loops
+
+```java
+String word = "QuickRef";
+for (char c: word.toCharArray()) {
+  System.out.print(c + "-");
+}
+// 输出: Q-u-i-c-k-R-e-f-
+```
+查看: [Loops](#java-循环)
+
+### 数组 Arrays
+
+```java
+char[] chars = new char[10];
+chars[0] = 'a'
+chars[1] = 'b'
+String[] letters = {"A", "B", "C"};
+int[] mylist = {100, 200};
+boolean[] answers = {true, false};
+```
+查看: [Arrays](#java-数组)
+
+### Swap
+
+```java
+int a = 1;
+int b = 2;
+System.out.println(a + " " + b); // 1 2
+int temp = a;
+a = b;
+b = temp;
+System.out.println(a + " " + b); // 2 1
+```
+
+### Type Casting
+
+```java
+// Widening
+// byte<short<int<long<float<double
+int i = 10;
+long l = i;               // 10
+// Narrowing 
+double d = 10.02;
+long l = (long)d;         // 10
+String.valueOf(10);       // "10"
+Integer.parseInt("10");   // 10
+Double.parseDouble("10"); // 10.0
+```
+
+### 条件语句 Conditionals
+
+```java
+int j = 10;
+if (j == 10) {
+  System.out.println("I get printed");
+} else if (j > 10) {
+  System.out.println("I don't");
+} else {
+  System.out.println("I also don't");
+}
+```
+
+查看: [Conditionals](#java-conditionals)
+
+### 用户输入
+```java
+Scanner in = new Scanner(System.in);
+String str = in.nextLine();
+System.out.println(str);
+int num = in.nextInt();
+System.out.println(num);
+```
+
+Java 字符串
+-------
+
+### 基本的
+
+```java
+String str1 = "value"; 
+String str2 = new String("value");
+String str3 = String.valueOf(123);
+```
+
+### 字符串连接
+
+```java
+String s = 3 + "str" + 3;     // 3str3
+String s = 3 + 3 + "str";     // 6str
+String s = "3" + 3 + "str";   // 33str
+String s = "3" + "3" + "23";  // 3323
+String s = "" + 3 + 3 + "23"; // 3323
+String s = 3 + 3 + 23;        // 29
+```
+
+### 字符串生成器
+<!--rehype:wrap-class=row-span-3-->
+
+```java
+StringBuilder sb = new StringBuilder(10);
+```
+
+---
+
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+|   |   |   |   |   |   |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.append("Reference");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| R | e | f | e | r | e | n | c | e |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.delete(3, 9);
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| R | e | f |   |   |   |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.insert(0, "My ");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| M | y |   | R | e | f |   |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+---
+
+```java
+sb.append("!");
+```
+---
+```java
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
+| M | y |   | R | e | f | ! |   |   |
+└───┴───┴───┴───┴───┴───┴───┴───┴───┘
+0   1   2   3   4   5   6   7   8   9
+```
+
+### 比较
+
+```java
+String s1 = new String("QuickRef"); 
+String s2 = new String("QuickRef"); 
+s1 == s2          // false
+s1.equals(s2)     // true
+"AB".equalsIgnoreCase("ab")  // true
+```
+
+### 操纵
+
+```java
+String str = "Abcd";
+str.toUpperCase();     // ABCD
+str.toLowerCase();     // abcd
+str.concat("#");       // Abcd#
+str.replace("b", "-"); // A-cd
+"  abc ".trim();       // abc
+"ab".toCharArray();    // {'a', 'b'}
+```
+
+### 信息
+
+```java
+String str = "abcd";
+str.charAt(2);       // c
+str.indexOf("a")     // 0
+str.indexOf("z")     // -1
+str.length();        // 4
+str.toString();      // abcd
+str.substring(2);    // cd
+str.substring(2,3);  // c
+str.contains("c");   // true
+str.endsWith("d");   // true
+str.startsWith("a"); // true
+str.isEmpty();       // false
+```
+
+### 不可变
+
+```java
+String str = "hello";
+str.concat("world");
+// 输出: hello
+System.out.println(str);
+```
+
+---
+
+```java
+String str = "hello";
+String concat = str.concat("world");
+// 输出: helloworld
+System.out.println(concat);
+```
+
+一旦创建就不能修改，任何修改都会创建一个新的String
+
+Java 数组
+-------
+
+### 申明 Declare
+
+```java
+int[] a1;
+int[] a2 = {1, 2, 3};
+int[] a3 = new int[]{1, 2, 3};
+int[] a4 = new int[3];
+a4[0] = 1;
+a4[2] = 2;
+a4[3] = 3;
+```
+
+### 修改 Modify
+
+```java
+int[] a = {1, 2, 3};
+System.out.println(a[0]); // 1
+a[0] = 9;
+System.out.println(a[0]); // 9
+System.out.println(a.length); // 3
+```
+
+### 循环 (读 & 写)
+
+```java
+int[] arr = {1, 2, 3};
+for (int i=0; i < arr.length; i++) {
+    arr[i] = arr[i] * 2;
+    System.out.print(arr[i] + " ");
+}
+// 输出: 2 4 6
+```
+
+### Loop (Read)
+
+```java
+String[] arr = {"a", "b", "c"};
+for (int a: arr) {
+    System.out.print(a + " ");
+}
+// 输出: a b c 
+```
+
+### Multidimensional Arrays
+
+```java
+int[][] matrix = { {1, 2, 3}, {4, 5} };
+int x = matrix[1][0];  // 4
+// [[1, 2, 3], [4, 5]]
+Arrays.deepToString(matrix)
+for (int i = 0; i < a.length; ++i) {
+  for(int j = 0; j < a[i].length; ++j) {
+    System.out.println(a[i][j]);
+  }
+}
+// 输出: 1 2 3 4 5 6 7 
+```
+
+### Sort
+
+```java
+char[] chars = {'b', 'a', 'c'};
+Arrays.sort(chars);
+// [a, b, c]
+Arrays.toString(chars);
+```
+
+Java 条件语句
+-----------
+
+### 运算符
+<!--rehype:wrap-class=row-span-3-->
+
+- `+` _(加法运算符(也用于字符串连接))_
+- `-` _(减法运算符)_
+- `*` _(乘法运算符)_
+- `/` _(分区运算符)_
+- `%` _(余数运算符)_
+- `=` _(简单赋值运算符)_
+- `++` _(增量运算符；将值增加 1)_
+- `--` _(递减运算符；将值减 1)_
+- `!` _(逻辑补码运算符；反转布尔值)_
+<!--rehype:className=style-round-->
+
+----
+
+- `==` _(等于)_
+- `!=` _(不等于)_
+- `>` _(比...更棒)_
+- `>=` _(大于或等于)_
+- `<` _(少于)_
+- `<=` _(小于或等于)_
+<!--rehype:className=cols-2 style-round-->
+
+----
+
+- `&&` _条件与_
+- `||` _条件或_
+- [?:](#三元运算符) _三元(if-then-else 语句的简写)_
+<!--rehype:className=style-round-->
+
+----
+
+- `instanceof` _(将对象与指定类型进行比较)_
+<!--rehype:className=style-round-->
+
+----
+
+- `~` _(一元按位补码)_
+- `<<` _(签名左移)_
+- `>>` _(有符号右移)_
+- `>>>` _(无符号右移)_
+- `&` _(按位与)_
+- `^` _(按位异或)_
+- `|` _(按位包含 OR)_
+<!--rehype:className=cols-2 style-round-->
+
+### If else
+
+```java
+int k = 15;
+if (k > 20) {
+  System.out.println(1);
+} else if (k > 10) {
+  System.out.println(2);
+} else {
+  System.out.println(3);
+}
+```
+
+### Switch
+<!--rehype:wrap-class=row-span-2-->
+
+```java
+int month = 3;
+String str;
+switch (month) {
+  case 1:
+    str = "January";
+    break;
+  case 2:
+    str = "February";
+    break;
+  case 3:
+    str = "March";
+    break;
+  default:
+    str = "Some other month";
+    break;
+}
+// 输出: Result March
+System.out.println("Result " + str);
+```
+
+### 三元运算符
+
+```java
+int a = 10;
+int b = 20;
+int max = (a > b) ? a : b;
+// 输出: 20
+System.out.println(max);
+```
+
+Java 循环
+----
+
+### For 循环
+
+```java
+for (int i = 0; i < 10; i++) {
+  System.out.print(i);
+}
+// 输出: 0123456789
+```
+
+------
+
+```java
+for (int i = 0,j = 0; i < 3; i++,j--) {
+  System.out.print(j + "|" + i + " ");
+}
+// 输出: 0|0 -1|1 -2|2
+```
+
+### 增强的 For 循环
+
+```java
+int[] numbers = {1,2,3,4,5};
+for (int number: numbers) {
+  System.out.print(number);
+}
+// 输出: 12345
+```
+
+用于循环数组或列表
+
+### While 循环
+
+```java
+int count = 0;
+while (count < 5) {
+  System.out.print(count);
+  count++;
+}
+// 输出: 01234
+```
+
+### Do While 循环
+
+```java
+int count = 0;
+do {
+  System.out.print(count);
+  count++;
+} while (count < 5);
+// 输出: 01234
+```
+
+### 继续声明
+
+```java
+for (int i = 0; i < 5; i++) {
+  if (i == 3) {
+    continue;
+  }
+  System.out.print(i);
+}
+// 输出: 01245
+```
+
+### 中断语句
+
+```java
+for (int i = 0; i < 5; i++) {
+  System.out.print(i);
+  if (i == 3) {
+    break;
+  }
+}
+// 输出: 0123
+```
+
+Java 框架搜集
+--------------------
+
+### Java 搜集
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+搜集 | Interface   | 有序 | 已排序 | 线程安全 | 复制 | Nullable
+:-|:-|:-|:-|:-|:-|:-
+[ArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html)                                    | List        | Y       | _N_    | _N_         | Y         | Y                  
+[Vector](https://docs.oracle.com/javase/8/docs/api/java/util/Vector.html)                                          | List        | Y       | _N_    | Y           | Y         | Y                  
+[LinkedList](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedList.html)                                  | List, Deque | Y       | _N_    | _N_         | Y         | Y                  
+[CopyOnWriteArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArrayList.html)   | List        | Y       | _N_    | Y           | Y         | Y                  
+[HashSet](https://docs.oracle.com/javase/8/docs/api/java/util/HashSet.html)                                        | Set         | _N_     | _N_    | _N_         | _N_       | One `null`         
+[LinkedHashSet](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashSet.html)                            | Set         | Y       | _N_    | _N_         | _N_       | One `null`         
+[TreeSet](https://docs.oracle.com/javase/8/docs/api/java/util/TreeSet.html)                                        | Set         | Y       | Y      | _N_         | _N_       | _N_                
+[CopyOnWriteArraySet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArraySet.html)     | Set         | Y       | _N_    | Y           | _N_       | One `null`         
+[ConcurrentSkipListSet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListSet.html) | Set         | Y       | Y      | Y           | _N_       | _N_                
+[HashMap](https://docs.oracle.com/javase/8/docs/api/java/util/HashMap.html)                                        | Map         | _N_     | _N_    | _N_         | _N (key)_ | One `null` _(key)_ 
+[HashTable](https://docs.oracle.com/javase/8/docs/api/java/util/Hashtable.html)                                    | Map         | _N_     | _N_    | Y           | _N (key)_ | _N (key)_          
+[LinkedHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashMap.html)                            | Map         | Y       | _N_    | _N_         | _N (key)_ | One `null` _(key)_ 
+[TreeMap](https://docs.oracle.com/javase/8/docs/api/java/util/TreeMap.html)                                        | Map         | Y       | Y      | _N_         | _N (key)_ | _N (key)_          
+[ConcurrentHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentHashMap.html)         | Map         | _N_     | _N_    | Y           | _N (key)_ | _N_                
+[ConcurrentSkipListMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListMap.html) | Map         | Y       | Y      | Y           | _N (key)_ | _N_                
+[ArrayDeque](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayDeque.html)                                  | Deque       | Y       | _N_    | _N_         | Y         | _N_                
+[PriorityQueue](https://docs.oracle.com/javase/8/docs/api/java/util/PriorityQueue.html)                            | Queue       | Y       | _N_    | _N_         | Y         | _N_                
+[ConcurrentLinkedQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedQueue.html) | Queue       | Y       | _N_    | Y           | Y         | _N_                
+[ConcurrentLinkedDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedDeque.html) | Deque       | Y       | _N_    | Y           | Y         | _N_                
+[ArrayBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ArrayBlockingQueue.html)       | Queue       | Y       | _N_    | Y           | Y         | _N_                
+[LinkedBlockingDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/LinkedBlockingDeque.html)     | Deque       | Y       | _N_    | Y           | Y         | _N_                
+[PriorityBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/PriorityBlockingQueue.html) | Queue       | Y       | _N_    | Y           | Y         | _N_                
+<!--rehype:className=show-header-->
+
+### ArrayList
+
+```java
+List<Integer> nums = new ArrayList<>();
+// 添加
+nums.add(2);
+nums.add(5);
+nums.add(8);
+// 检索
+System.out.println(nums.get(0));
+// 为循环迭代编制索引
+for (int i = 0; i < nums.size(); i++) {
+    System.out.println(nums.get(i));
+}
+nums.remove(nums.size() - 1);
+nums.remove(0); // 非常慢
+for (Integer value : nums) {
+    System.out.println(value);
+}
+```
+
+### HashMap
+
+```java
+Map<Integer, String> m = new HashMap<>();
+m.put(5, "Five");
+m.put(8, "Eight");
+m.put(6, "Six");
+m.put(4, "Four");
+m.put(2, "Two");
+// 检索
+System.out.println(m.get(6));
+// Lambda forEach
+m.forEach((key, value) -> {
+    String msg = key + ": " + value;
+    System.out.println(msg);
+});
+```
+
+### HashSet
+
+```java
+Set<String> set = new HashSet<>();
+if (set.isEmpty()) {
+    System.out.println("Empty!");
+}
+set.add("dog");
+set.add("cat");
+set.add("mouse");
+set.add("snake");
+set.add("bear");
+if (set.contains("cat")) {
+    System.out.println("Contains cat");
+}
+set.remove("cat");
+for (String element : set) {
+    System.out.println(element);
+}
+```
+
+### ArrayDeque
+
+```java
+Deque<String> a = new ArrayDeque<>();
+// 使用 add()
+a.add("Dog");
+// 使用 addFirst()
+a.addFirst("Cat");
+// 使用 addLast()
+a.addLast("Horse");
+// [Cat, Dog, Horse]
+System.out.println(a);
+// 访问元素
+System.out.println(a.peek());
+// 移除元素
+System.out.println(a.pop());
+```
+
+杂项 Misc
+----
+
+### 访问修饰符
+<!--rehype:wrap-class=col-span-2-->
+
+| 修饰符    | Class | Package | Subclass | World |
+|-------------|-------|---------|----------|-------|
+| public      | Y     | Y       | Y        | Y     |
+| protected   | Y     | Y       | Y        | _N_   |
+| no modifier | Y     | Y       | _N_      | _N_   |
+| private     | Y     | _N_     | _N_      | _N_   |
+<!--rehype:className=show-header-->
+
+### 常用表达
+
+```java
+String text = "I am learning Java";
+// 删除所有空格
+text.replaceAll("\\s+", "");
+// 拆分字符串
+text.split("\\|");
+text.split(Pattern.quote("|"));
+```
+
+查看: [Regex in java](./regex.md#java-中的正则表达式)
+
+### 注释 Comment
+
+```java
+// 我是单行注释！
+ 
+/*
+而我是一个
+多行注释！
+*/
+/**
+  * 这个
+  * 是
+  * 文档
+  * 注释
+ */
+```
+
+### 关键字
+<!--rehype:wrap-class=col-span-2-->
+
+- abstract
+- continue
+- for
+- new
+- switch
+- assert
+- default
+- goto
+- package
+- synchronized
+- boolean
+- do
+- if
+- private
+- this
+- break
+- double
+- implements
+- protected
+- throw
+- byte
+- else
+- import
+- public
+- throws
+- case
+- enum
+- instanceof
+- return
+- transient
+- catch
+- extends
+- int
+- short
+- try
+- char
+- final
+- interface
+- static
+- void
+- class
+- finally
+- long
+- strictfp
+- volatile
+- const
+- float
+- native
+- super
+- while
+<!--rehype:className=cols-7 style-none-->
+
+### 数学方法
+
+方法 | 说明
+:-|:-
+`Math.max(a,b)`       | `a` 和 `b` 的最大值
+`Math.min(a,b)`       | `a` 和 `b` 的最小值
+`Math.abs(a)`         | 绝对值
+`Math.sqrt(a)`        | `a` 的平方根
+`Math.pow(a,b)`       | `b` 的幂
+`Math.round(a)`       | 最接近的整数
+`Math.sin(ang)`       | 正弦
+`Math.cos(ang)`       | `ang` 的余弦
+`Math.tan(ang)`       | `ang` 的切线
+`Math.asin(ang)`      | `ang` 的反正弦
+`Math.log(a)`         | `a` 的自然对数
+`Math.toDegrees(rad)` | 以度为单位的角度弧度
+`Math.toRadians(deg)` | 以弧度为单位的角度度
+
+### Try/Catch/Finally
+
+```java
+try {
+  // something
+} catch (Exception e) {
+  e.printStackTrace();
+} finally {
+  System.out.println("always printed");
+}
+```
+
+另见
+---
+
+- [Java 官网](https://www.java.com/zh-CN/) _(java.com)_

docs/quickreference.md

@@ -232,10 +232,16 @@ const school = <div>学校</div>;
 
 ```
   ```html preview
-  这里是你的 HTML 代码
+  <b>这里是你的 HTML 代码</b>
   \```
 ```
 
+---
+
+```html preview
+<b>这里是你的 HTML 代码</b>
+```
+
 上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcj/reference",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",
@@ -21,7 +21,7 @@
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.1.1",
+    "@wcj/markdown-to-html": "^2.1.2",
     "chokidar": "^3.5.3",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.1",

scripts/assets/java.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512" height="1em" width="1em">
+  <path d="M277.74 312.9c9.8-6.7 23.4-12.5 23.4-12.5s-38.7 7-77.2 10.2c-47.1 3.9-97.7 4.7-123.1 1.3-60.1-8 33-30.1 33-30.1s-36.1-2.4-80.6 19c-52.5 25.4 130 37 224.5 12.1zm-85.4-32.1c-19-42.7-83.1-80.2 0-145.8C296 53.2 242.84 0 242.84 0c21.5 84.5-75.6 110.1-110.7 162.6-23.9 35.9 11.7 74.4 60.2 118.2zm114.6-176.2c.1 0-175.2 43.8-91.5 140.2 24.7 28.4-6.5 54-6.5 54s62.7-32.4 33.9-72.9c-26.9-37.8-47.5-56.6 64.1-121.3zm-6.1 270.5a12.19 12.19 0 0 1-2 2.6c128.3-33.7 81.1-118.9 19.8-97.3a17.33 17.33 0 0 0-8.2 6.3 70.45 70.45 0 0 1 11-3c31-6.5 75.5 41.5-20.6 91.4zM348 437.4s14.5 11.9-15.9 21.2c-57.9 17.5-240.8 22.8-291.6.7-18.3-7.9 16-19 26.8-21.3 11.2-2.4 17.7-2 17.7-2-20.3-14.3-131.3 28.1-56.4 40.2C232.84 509.4 401 461.3 348 437.4zM124.44 396c-78.7 22 47.9 67.4 148.1 24.5a185.89 185.89 0 0 1-28.2-13.8c-44.7 8.5-65.4 9.1-106 4.5-33.5-3.8-13.9-15.2-13.9-15.2zm179.8 97.2c-78.7 14.8-175.8 13.1-233.3 3.6 0-.1 11.8 9.7 72.4 13.6 92.2 5.9 233.8-3.3 237.1-46.9 0 0-6.4 16.5-76.2 29.7zM260.64 353c-59.2 11.4-93.5 11.1-136.8 6.6-33.5-3.5-11.6-19.7-11.6-19.7-86.8 28.8 48.2 61.4 169.5 25.9a60.37 60.37 0 0 1-21.1-12.8z"/>
+</svg>

scripts/create.mjs

@@ -48,11 +48,18 @@ export function create(str = '', options = {}) {
     ],
     filterPlugins: (type, plugins = []) => {
       if (type === 'rehype') {
+        let rehypePrism = null;
         const dt = plugins.filter((plug) => {
-          return /(rehypeRaw)/.test(plug.name) ? false : true;
+          if (Array.isArray(plug) && /(rehypePrism)/.test(plug[0].name)) {
+            rehypePrism = plug;
+          }
+          return /(rehypeRaw|rehypePrism)/.test(plug.name) ? false : true;
         });
         // 放在 rehypeDocument 前面
         dt.unshift(rehypeRaw);
+        if (rehypePrism) {
+          dt.unshift(rehypePrism);
+        }
         dt.unshift(rehypePreviewHTML);
         return dt;
       }

scripts/style.css

@@ -169,16 +169,16 @@ pur {
   color: var(--color-prettylights-syntax-entity);
 }
 
-.wrap-body > p > code,
+:is(.h3wrap-body, .wrap-body) p > code,
-.wrap-body > ul li > code,
+:is(.h3wrap-body, .wrap-body) ul li > code,
-.wrap-body tbody td code {
+:is(.h3wrap-body, .wrap-body) tbody td code {
   --text-opacity: 1;
   color: rgb(5 150 105 / var(--text-opacity));
 }
 
-.wrap-body em,
+:is(.h3wrap-body, .wrap-body) em,
-.wrap-body sup,
+:is(.h3wrap-body, .wrap-body) sup,
-.wrap-body sub {
+:is(.h3wrap-body, .wrap-body) sub {
   color: var(--color-fg-subtle);
 }
 
@@ -240,7 +240,7 @@ table td:first-child > code {
 }
 table td > del,
 table td:first-child > del > code,
-.wrap-body p > del > code {
+.h3wrap-body p > del > code {
   color: var(--color-danger-fg);
 }
 
@@ -365,6 +365,21 @@ body.home .max-container a.home-button:visited:hover {
   gap: 2rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.home-card a.contributing {
+  position: relative;
+}
+.home-card a.contributing::after {
+  color: var(--color-fg-muted);
+  content: '👆待完善需要您的参与';
+  display: block;
+  position: absolute;
+  font-size: 10px;
+  left: 5px;
+  bottom: -15px;
+}
+.home-card a.contributing:hover:after {
+  color: var(--color-fg-muted);
+}
 
 [data-color-mode*='light'] body .home-card a {
   --text-opacity: 0.75;
@@ -576,6 +591,7 @@ a.text-grey {
 
 .menu-tocs > .menu-modal a.leve2 {
   font-weight: bold;
+  color: var(--color-fg-default);
 }
 
 .menu-tocs > .menu-modal a.leve3 {
@@ -623,6 +639,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   display: initial;
 }
 
+.wrap.h3body-exist .wrap-header.h3wrap {
+  flex: initial;
+}
+
+.wrap.h3body-exist > .h3wrap-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .wrap-header.h3wrap {
   z-index: 0;
   width: 100%;
@@ -649,7 +675,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 }
 
 .wrap-header.h3wrap > .wrap-body p,
-.wrap-header.h4wrap > .wrap-body p {
+.h3wrap-body p {
   margin: 0px;
   width: 100%;
   padding-left: 1rem;
@@ -672,7 +698,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   border-radius: 0.5rem 0.5rem 0 0;
 }
 
-.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child {
+.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child,
+.h3wrap-body p:not(:first-child):last-child {
   margin-top: auto;
   border-radius: 0 0 0.5rem 0.5rem;
 }
@@ -685,7 +712,9 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   flex-direction: column;
 }
 
-.h4wrap > h4 {
+.h3wrap-body > h4,
+.h3wrap-body > h5,
+.h3wrap-body > h6 {
   border-color: transparent;
   background-color: var(--color-neutral-muted);
   color: var(--color-fg-default);
@@ -699,12 +728,12 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   text-align: center;
 }
 
-.h4wrap > .wrap-body ul,
+.h3wrap .wrap-body > ul,
-.h4wrap > .wrap-body ol,
+.h3wrap .wrap-body > ol,
-.h4wrap > .wrap-body dl,
+.h3wrap .wrap-body > dl,
-.h3wrap > .wrap-body ul,
+.h3wrap-body > ul,
-.h3wrap > .wrap-body ol,
+.h3wrap-body > ol,
-.h3wrap > .wrap-body dl {
+.h3wrap-body > dl {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: grid;
@@ -712,10 +741,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.h4wrap > .wrap-body ul + hr {
-  margin-bottom: 0;
-}
-
 .h3wrap > .wrap-body ul:not(:last-child),
 .h3wrap > .wrap-body ol,
 .h3wrap > .wrap-body dl {
@@ -841,7 +866,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
 }
 
-.h2wrap-body > .wrap .wrap-body > *:last-child {
+.h3wrap-body > *:last-child {
   border-radius: 0 0 0.5rem 0.5rem;
 }
 

scripts/utils/anchorPoint.mjs

@@ -11,8 +11,6 @@ function anchorPoint() {
   Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
   if (elm?.tagName === 'H3') {
     elm?.parentElement?.parentElement?.classList.add('active');
-    const box = elm?.parentElement?.parentElement;
-    console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
   }
 }
 anchorPoint();
@@ -23,7 +21,6 @@ function updateAnchor(element) {
     tocanchor.classList.remove('is-active-link');
   });
   const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
-  console.log('anchor', anchor)
   if (anchor) {
     anchor.classList.add('is-active-link');
   }

scripts/utils/getTocsTree.mjs

@@ -81,8 +81,11 @@ export function getTocsTree(arr = [], result = []) {
     }
     if (toc.number === level && titleNum(toc.tagName) === level) {
       const header = getHeader(data.slice(n), level);
+      const childs = getChilds([...data.slice(n + 1)], level);
+      const resultChilds = getTocsTree(childs);
       const wrapCls = ['wrap'];
       const headerCls = ['wrap-header', `h${level}wrap`];
+      wrapCls.push(`h${level}body-${resultChilds.length === 0 ? 'not-' : ''}exist`);
 
       if (level === 1) wrapCls.push('max-container');
       const wrapStyle = toc.properties['wrap-style'];
@@ -90,7 +93,7 @@ export function getTocsTree(arr = [], result = []) {
       const wrapClass = toc.properties['wrap-class'];
       if (wrapClass) wrapCls.push(wrapClass);
       delete toc.properties['wrap-class'];
-      const panle = {
+      let panle = {
         type: 'element',
         tagName: 'div',
         properties: { class: wrapCls, style: wrapStyle },
@@ -111,13 +114,17 @@ export function getTocsTree(arr = [], result = []) {
           },
         ],
       };
-      const childs = getChilds([...data.slice(n + 1)], level);
+      if (titleNum(toc.tagName) > 3) {
-      const resultChilds = getTocsTree(childs);
+        panle = [toc, ...header];
+      }
       if (resultChilds.length > 0) {
         const bodyStyle = toc.properties['body-style'];
         delete toc.properties['body-style'];
         const bodyClass = toc.properties['body-class'];
         delete toc.properties['body-class'];
+        if (Array.isArray(panle)) {
+          panle = panle.concat(resultChilds);
+        } else if (panle.children) {
           panle.children = panle.children.concat({
             type: 'element',
             tagName: 'div',
@@ -125,8 +132,13 @@ export function getTocsTree(arr = [], result = []) {
             children: [...resultChilds],
           });
         }
+      }
+      if (Array.isArray(panle)) {
+        result = result.concat(panle);
+      } else {
         result.push(panle);
       }
+    }
 
     n++;
   }