doc: Update README.md

Author: jaywcjlove

core/README.md

@@ -3,51 +3,15 @@ markdown-react-code-preview-loader
 
 当前包是 `webpack` 的 `loader`，通过配置当前 `loader` 加载 `markdown` 文档，返回一个 `JS` 对象，包含 `markdown` 文本，`markdown` 文本中的示例索引。
 
-## 安装使用
+## 安装 Loader
 
 ```bash
 npm i markdown-react-code-preview-loader -D
 ```
 
-添加 `loader` 之后，在项目工程中加载 `markdown` 文本使用方法：
+## 配置 Loader
 
-```jsx
-import mdObj from 'markdown-react-code-preview-loader/README.md';
-
-mdObj.source       // => `README.md` 原始字符串文本
-mdObj.components   // => 组件索引对象，从 markdown 索引到的示例转换成的 React 组件。(需要配置 meta)
-mdObj.codeBlock    // => 组件源码索引对象，从 markdown 索引到的示例源码。(需要配置 meta)
-```
-
-```js
-{
-  codeBlock: {
-    17: 'import React from ...',
-    77: 'import React from ...',
-    base23: 'import React from ...'
-  },
-  components: { 17: ƒ, 77: ƒ, base23: ƒ },
-  languages: { 17: 'jsx', 77: 'jsx', base23: 'jsx'},
-  source: "# Alert 确认对话框...."
-}
-```
-
-```ts
-export type CodeBlockData = {
-  source: string;
-  components: Record<string | number, React.FC>;
-  codeBlock: Record<string | number, string>;
-  languages: Record<string | number, string>;
-};
-```
-
-## getCodeBlockString 
-
-传递 `markdown` 文件内容字符串，返回转换好的需要预览的代码块解析数据。
-
-## mdCodeModulesLoader
-
-当前方法是 `webpack` 的 `loader`，通过在 kkt 中两种配置方法，了解如何使用配置 loader。
+安装依赖(loader)之后，我们需要将 `loader` 配置到 `webpack` 配置中，通过在 `kkt` 中两种配置方法，了解如何使用配置 `loader`。
 
 **第 ① 种方法，使用 mdCodeModulesLoader 方法**
 
@@ -99,9 +63,47 @@ export default (conf: Configuration, env: 'development' | 'production', options:
 
 - lang: 需要解析代码块的语言，默认: `["jsx","tsx"]`
 
-## Markdown 设置 meta 值
+## 使用
+
+添加 `loader` 之后，在项目工程中加载 `markdown` 文本使用方法：
+
+```jsx
+import mdObj from 'markdown-react-code-preview-loader/README.md';
+
+mdObj.source       // => `README.md` 原始字符串文本
+mdObj.components   // => 组件索引对象，从 markdown 索引到的示例转换成的 React 组件。(需要配置 meta)
+mdObj.codeBlock    // => 组件源码索引对象，从 markdown 索引到的示例源码。(需要配置 meta)
+```
+
+```js
+{
+  codeBlock: {
+    17: 'import React from ...',
+    77: 'import React from ...',
+    base23: 'import React from ...'
+  },
+  components: { 17: ƒ, 77: ƒ, base23: ƒ },
+  languages: { 17: 'jsx', 77: 'jsx', base23: 'jsx'},
+  source: "# Alert 确认对话框...."
+}
+```
+
+```ts
+export type CodeBlockData = {
+  source: string;
+  components: Record<string | number, React.FC>;
+  codeBlock: Record<string | number, string>;
+  languages: Record<string | number, string>;
+};
+```
+
+## getCodeBlockString 
+
+传递 `markdown` 文件内容字符串，返回转换好的需要预览的代码块解析数据。
+
+## 配置 meta 标识
 
-需要在代码块示例中添加特殊的 `meta` 标识，`loader` 才会去索引对于的 `react` 示例，进行代码转换。
+注意：需要在代码块示例中添加特殊的 `meta` 标识，`loader` 才会去索引对于的 `react` 示例，进行代码转换。
 
 1. `mdx:` 特殊标识前缀
 2. `mdx:preview` 控制是否进行进行示例索引，通过对应所在行号，获取需要的示例对象。