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

docs/awk.md

@@ -74,7 +74,7 @@ awk -F: '{print $1 "=" $6}' /etc/passwd
 
 查看: [Awk 变量](#awk-变量)
 
-### awk 程序示例
+### Awk 程序示例
 <!--rehype:wrap-class=row-span-2 col-span-2-->
 
 ```shell
@@ -153,6 +153,7 @@ Awk 变量
 `FILENAME`     | 文件名
 
 ### 表达式
+<!--rehype:wrap-class=row-span-2-->
 
 :- | :-
 :- | :-
@@ -173,6 +174,7 @@ Awk 变量
 `ORS=NR%5?",":"\n"`  | 连接记录
 
 ### 示例
+<!--rehype:wrap-class=row-span-2-->
 
 打印总和和平均值
 
@@ -213,6 +215,16 @@ awk 'BEGIN {
         print RLENGTH }'
 ```
 
+### 仅限 GNU awk
+
+:- | :-
+:- | :-
+`ENVIRON`     | 环境变量
+`IGNORECASE`  | 忽略大小写
+`CONVFMT`     | 转换格式
+`ERRNO`       | 系统错误
+`FIELDWIDTHS` | 固定宽度字段
+
 ### 环境变量
 
 :- | :-
@@ -226,16 +238,6 @@ awk 'BEGIN {
 `SUBSEP`  | 多维数组分隔符 _(default "\034")_
 `ARGIND`  | 参数索引
 
-### 仅限 GNU awk
-
-:- | :-
-:- | :-
-`ENVIRON`     | 环境变量
-`IGNORECASE`  | 忽略大小写
-`CONVFMT`     | 转换格式
-`ERRNO`       | 系统错误
-`FIELDWIDTHS` | 固定宽度字段
-
 ### 定义变量
 
 ```shell

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/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.13.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;
@@ -624,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%;
@@ -650,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;
@@ -673,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;
 }
@@ -686,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);
@@ -700,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;
@@ -713,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 {
@@ -842,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,21 +114,30 @@ 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'];
-        panle.children = panle.children.concat({
+        if (Array.isArray(panle)) {
-          type: 'element',
+          panle = panle.concat(resultChilds);
-          tagName: 'div',
+        } else if (panle.children) {
-          properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
+          panle.children = panle.children.concat({
-          children: [...resultChilds],
+            type: 'element',
-        });
+            tagName: 'div',
+            properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
+            children: [...resultChilds],
+          });
+        }
+      }
+      if (Array.isArray(panle)) {
+        result = result.concat(panle);
+      } else {
+        result.push(panle);
       }
-      result.push(panle);
     }
 
     n++;