From a723b97df5cb22a401786eea58675d6612fb6860 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 5 Oct 2022 14:46:37 +0800
Subject: [PATCH] doc: Update `react.md` cheatsheet.

---
 docs/quickreference.md | 29 +++++++++++++++++++++++++++++
 docs/react.md          | 28 ++++++++++++++--------------
 package.json           |  2 +-
 scripts/create.mjs     |  1 +
 scripts/style.css      | 13 +++++++++++++
 5 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/docs/quickreference.md b/docs/quickreference.md
index 528fcf7..0c6643e 100644
--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@@ -124,6 +124,24 @@ function () {}
 
 注释配置添加 `show-header` 类，放置在表格下面，表头将被展示出来。
 
+### 代码行高亮
+<!--rehype:wrap-class=row-span-2-->
+
+```jsx {1,4-5}
+import React from "react";
+import "./Student.css";
+
+export const Student = (
+  <div className="Student"></div>
+);
+```
+
+上面 `{1,4-5}` 行代码高亮，下面是 `Markdown` 代码示例
+
+```markdown
+  ```jsx {1,4-5}
+```
+
 ### Tooltips
 
 [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_<!--rehype:tooltips-->
@@ -147,6 +165,8 @@ function () {}
 <!--rehype:style=background:#e91e63;-->
 ```
 
+在 H3 标题下面添加样式标注 `<!--rehype:style=background:#e91e63;-->`
+
 ### 快捷键样式
 
 | Key | value | 
@@ -157,6 +177,15 @@ function () {}
 
 列表添加 `<!--rehype:className=shortcuts-->` 样式类，展示快捷键样式。
 
+### 代码行号
+
+```jsx showLineNumbers
+export const Student = (
+  <div className="Student"></div>
+);
+```
+
+
 ### 内置类样式
 
 :- | -
diff --git a/docs/react.md b/docs/react.md
index 7f2e309..cce3fdd 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -61,7 +61,7 @@ const Example = <Hello />;
 
 ### React 组件中的 CSS
 
-```jsx
+```jsx {2,5}
 import React from "react";
 import "./Student.css";
 
@@ -127,7 +127,7 @@ function Example() {
 
 函数 `AlertBox` 组件
 
-```jsx
+```jsx {4}
 function AlertBox(props) {
   return (
     <div className="alert-box">
@@ -145,7 +145,7 @@ function AlertBox(props) {
 
 Class `AlertBox` 组件，与函数组件 `AlertBox` 组件相同
 
-```jsx
+```jsx {5}
 class AlertBox extends React.Component {
   render () {
     return (
@@ -170,14 +170,12 @@ class AlertBox extends React.Component {
 
 函数中的 State，Hook 是 React 16.8 的新增特性
 
-```jsx
+```jsx {4,8}
 import { useState } from 'react';
 
 function Student() {
-  // 声明一个叫 "count" 的 state 变量
   const [count, setCount] = useState(0);
   const click = () => setCount(count + 1);
-
   return (
     <div>
       <p>您点击了 {count} 次</p>
@@ -197,13 +195,15 @@ function Student() {
 
 #### Class 中的 State
 
-```jsx
+```jsx {6,12,20}
 import React from 'react';
 
 class Student extends React.Component {
   constructor(props) {
     super(props);
     this.state = {count: 1};
+    // 确保函数可以访问组件属性（ES2015）
+    this.click = this.click.bind(this);
   }
   click() {
     const count = this.state.count;
@@ -312,7 +312,7 @@ render() {
 ### Fragment
 <!--rehype:wrap-class=row-span-2-->
 
-```jsx
+```jsx {1,6,9}
 import { Fragment } from 'react'
 import Avatar from './Avatar';
 import Profile from './Profile';
@@ -384,7 +384,7 @@ const ref = React.createRef();
 
 ### Class 组件内部使用 ref 属性
 
-```jsx
+```jsx {6,10}
 import {Component,createRef} from 'react'
 
 class MyComponent extends Component {
@@ -403,7 +403,7 @@ class MyComponent extends Component {
 
 ### 函数组件内部使用 ref 属性
 
-```jsx
+```jsx {3,9}
 function CustomTextInput(props) {
   // 这里必须声明 $input，这样 ref 才可以引用它
   const $input = useRef(null);
@@ -424,7 +424,7 @@ function CustomTextInput(props) {
 
 ### 严格模式 StrictMode
 
-```jsx
+```jsx {3,8}
 <div>
   <Header />
   <React.StrictMode>
@@ -956,7 +956,7 @@ function App() {
 
 ### 嵌入内部组件
 
-```jsx
+```jsx {2}
 import React from 'react';
 import UserAvatar from "./UserAvatar";
 
@@ -974,7 +974,7 @@ export default function UserProfile() {
 
 ### 嵌入外部组件
 
-```jsx
+```jsx {2}
 import React from 'react';
 import {Button} from 'uiw';
 export default function UserProfile() {
@@ -988,7 +988,7 @@ export default function UserProfile() {
 }
 ```
 
-注意：外部组件在 [npmjs.com](https://www.npmjs.com) 上找到，需要先安装导入
+注意：[uiw](http://npmjs.com/uiw) 组件在 [npmjs.com](https://www.npmjs.com) 上找到，需要先安装导入
 
 生命周期
 ---
diff --git a/package.json b/package.json
index 82a13fe..cf035f1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "keywords": [],
   "devDependencies": {
-    "@wcj/markdown-to-html": "^2.0.15",
+    "@wcj/markdown-to-html": "^2.1.0",
     "chokidar": "^3.5.3",
     "fs-extra": "^10.1.0",
     "recursive-readdir-files": "^2.3.0",
diff --git a/scripts/create.mjs b/scripts/create.mjs
index a8b3d0c..70b1b69 100644
--- a/scripts/create.mjs
+++ b/scripts/create.mjs
@@ -20,6 +20,7 @@ export function create(str = '', options = {}) {
   description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, '');
   const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: ''
   const mdOptions = {
+    showLineNumbers: false,
     hastNode: false,
     remarkPlugins: [remarkGemoji],
     rehypePlugins: [
diff --git a/scripts/style.css b/scripts/style.css
index 32d6e40..f8a4d13 100644
--- a/scripts/style.css
+++ b/scripts/style.css
@@ -763,6 +763,19 @@ body:not(.home) .h2wrap > h2 a::after {
 .token.italic { font-style: italic; }
 .token.entity { cursor: help; }
 
+.highlight-line {
+  background-color: var(--color-neutral-muted);
+  display: block;
+}
+.code-line.line-number::before {
+  display: inline-block;
+  width: 1rem;
+  text-align: right;
+  margin-right: 16px;
+  margin-left: -8px;
+  color: var(--color-fg-subtle);
+  content: attr(line);
+}
 /* 代码高亮 End */
 
 .footer-wrap {