feat: update quickreference.md.

docs/quickreference.md

@@ -1,7 +1,7 @@
 Quick Reference 备忘清单
 ===
 
-这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！
+这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与[贡献](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)！
 
 入门
 ---
@@ -72,7 +72,6 @@ HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静
 ```
 <!--rehype:className=wrap-text -->
 
-
 #### 参数说明
 
 类 | 说明
@@ -584,6 +583,25 @@ H2 部分
 
 `<!--rehype:className=cols-4-->`
 
+### 列表步骤
+<!--rehype:wrap-class=row-span-2-->
+
+- **重命名为 new_name**
+  ```bash
+  $ git branch -m <new_name>
+  ```
+- 推送和**重置**
+  ```bash
+  $ git push origin -u <new_name>
+  ```
+- 删除远程分支
+  ```bash
+  $ git push origin --delete <old>
+  ```
+<!--rehype:className=style-timeline-->
+
+`<!--rehype:className=style-timeline-->`
+
 ### 没有标记
 
 - Item 1
@@ -592,10 +610,22 @@ H2 部分
 - Item 4
 - Item 5
 - Item 6
+- Item 7
+- Item 8
+- Item 9
 <!--rehype:className=cols-3 style-none-->
 
 `<!--rehype:className=cols-3 style-none-->`
 
+### 圆圈标记
+
+- Item 1
+- Item 2
+- Item 3
+<!--rehype:className=style-round-->
+
+`<!--rehype:className=style-round-->`
+
 H2 部分 - 5列效果展示
 ---
 <!--rehype:body-class=cols-5-->

scripts/assets/xpath.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M10 2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H8v2h5V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H8v6h5v-1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1H7a1 1 0 0 1-1-1V8H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6zm9 16h-4v2h4v-2zm0-8h-4v2h4v-2zM9 4H5v2h4V4z"/>
+</svg>

scripts/style.css

@@ -576,6 +576,55 @@ body:not(.home) .h2wrap > h2 a::after {
   position: relative;
 }
 
+.h2wrap-body ul.style-timeline {
+  counter-reset: stepCount;
+}
+.h2wrap-body ul.style-timeline li:first-child:before {
+  background-color: #228e6c;
+  color: rgb(226 232 240/1);
+}
+.h2wrap-body ul.style-timeline li::before {
+  color: #228e6c;
+  background-color: #fff;
+  counter-increment: stepCount;
+  content: counter(stepCount);
+  border-radius: initial;
+  border-radius: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.30rem;
+  border: 2px solid #228e6c;
+  top: -1px;
+  left: -14px;
+}
+.h2wrap-body ul.style-timeline li:last-child {
+  border-image: linear-gradient(to bottom,#228e6c,rgba(0,0,0,0)) 1 100%;
+}
+.h2wrap-body ul.style-timeline li {
+  border-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 25px !important;
+  border-left: 2px solid #228e6c;
+  margin-left: 30px;
+}
+.h2wrap-body ul.style-timeline li > pre {
+  padding: 0 !important;
+  padding-top: 10px !important;
+  height: initial !important;
+}
+
+.h2wrap-body ul.style-round li::before {
+  border-radius: 9999px;
+  border-width: 2px;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-color: #228e6c;
+  background: transparent;
+  top: 14px;
+}
+
 .wrap-body ul:last-child {
   margin-bottom: 0;
 }