docs: update README

README.md

@@ -80,4 +80,5 @@ module.exports = {
 - 🥦 CI/CD：使用 `Chromatic` + `GitActions` 持续集成和部署
 
 #### 🔨 部署
+
 ![chromatic](https://user-images.githubusercontent.com/18121040/132154705-126869b5-fa9b-4ea8-80fd-f6aba5c81288.png)

package.json

@@ -97,6 +97,7 @@
     "react-overlays": "^5.1.1",
     "react-refresh": "^0.8.3",
     "react-transition-group": "^4.3.0",
+    "rehype-highlight": "^5.0.0",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.0.5",
@@ -118,7 +119,7 @@
     "react-dom": ">=16.8.0"
   },
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "npm run storybook",
     "lint": "eslint --ext js,ts,tsx src --max-warnings 5",
     "clean": "rimraf ./dist",
     "build": "npm run clean && npm run build-ts && npm run build:css && npm run build-css",
@@ -155,7 +156,6 @@
     ]
   },
   "devDependencies": {
-    "date-fns": "^2.25.0",
     "@storybook/addon-a11y": "^6.3.4",
     "@storybook/addon-actions": "6.3.4",
     "@storybook/addon-docs": "^6.3.4",
@@ -187,6 +187,7 @@
     "css-loader": "^4.2.1",
     "cz-conventional-changelog": "^3.3.0",
     "date-fn": "^0.0.2",
+    "date-fns": "^2.25.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
     "gulp-cssnano": "^2.1.3",
@@ -205,8 +206,9 @@
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
-    "react-markdown": "^5.0.3",
+    "react-markdown": "^7.0.1",
     "react-syntax-highlighter": "^13.5.1",
+    "remark-gfm": "^3.0.0",
     "rimraf": "^3.0.2",
     "sass-loader": "10.1.1",
     "ts-dedent": "^2.1.1",

src/introduction.md

@@ -2,55 +2,66 @@
 
 >使用 npm
 
-```javascript
+`
 npm install chocolate-ui --save
-```
+`
 
 >使用 yarn
 
-```javascript
+`
 yarn add chocolate-ui
-```
+`
 
 #### 📖 使用
 
-```javascript
-// 加载样式
-import 'chocolate-ui/dist/index.css'
+1、引入
 
-// 引入组件
-import { Button } from 'chocolate-ui'
-```
+`// 加载样式
+import 'chocolate-ui/dist/index.css'`
 
-#### 🚗 Tips
+`// 引入组件
+import { Button } from 'chocolate-ui'`
 
->在每个组件展示页右边的 `Controls` 栏中，可以查看组件的不同形态
+2、按需加载
 
-#### ✨ 技术栈
+`
+import Button from 'chocolate-ui/dist/components/button';
+`
 
-* 😁 typescript with React Hooks
-* 🍑 使用 react-testing-library 完成单元测试
-* 🦌 使用 storybook 本地调试和生成文档页面
-* 🥦 使用 react-doc-gen 自动生成文档
-* 🐳 使用 chromatic 发布
-* 🥭 使用第三方库扩充组件-(react-fontawesome, react-transition-group)
+`
+import 'chocolate-ui/dist/components/button/style';
+`
 
-#### 😊 谁在使用
+3、使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
 
-- 我自己 -> [chocolate-hooks](https://github.com/ChocolateUI/chocolate-hooks)
+~~~js
+// .babelrc.js
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-import',
+      {
+        libraryName: 'chocolate-ui',
+        libraryDirectory: 'dist/components',
+        style: true  // 导入 CSS 源文件，可以在编译期间进行优化
+      }
+    ],
+  ]
+}
+~~~
 
-#### 🎋 一些命令行
+#### 🚗 Tips
 
-~~~bash
-// 启动本地环境
-npm run stroybook
+>在每个组件展示页右边的 `Controls` 栏中，可以查看组件的不同形态
 
-// 单元测试
-npm test
+#### ✨ 技术栈
 
-// build 可发布静态文件
-npm run build
+- 😁 全部组件由 Typescript with React Hooks 编写
+- 🍑 使用 `react-testing-library` 完成单元测试
+- 🦌 使用 `Storybook` 本地调试和生成文档页面
+- ⚙️ 组件库打包使用 `Webpack` 和 `Gulp`
+- 🥦 CI/CD：使用 `Chromatic` + `GitActions` 持续集成和部署
 
-//发布到 npm
-npm run publish
-~~~
+#### 😊 谁在使用
+
+- 我自己的 hooks 集合 -> [chocolate-hooks](https://github.com/ChocolateUI/chocolate-hooks)

src/welcome.stories.tsx

@@ -5,6 +5,8 @@ import { FaGithub } from "react-icons/fa"
 import Introduction from './introduction.md'
 import { name, repository } from "../package.json"
 import "./styles/welcome.scss"
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
 
 storiesOf('Welcome page', module)
   .add("介绍", () => (
@@ -28,8 +30,12 @@ storiesOf('Welcome page', module)
         <p> 一个 Web 端的 React 组件库 </p>
         <p> 此刻尽丝滑！ </p>
       </div>
-      <ReactMarkDown
-        source={Introduction}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ReactMarkDown
+          rehypePlugins={[rehypeHighlight]}
+          remarkPlugins={[remarkGfm]}
+          children={Introduction}
+        /> 
+      </div>
     </>
   ), { info: { disable: true } })