markdown-react-code-preview-loader
\ No newline at end of file
+markdown-react-code-preview-loader
\ No newline at end of file
diff --git a/static/js/54.1cf3e479.chunk.js b/static/js/54.1cf3e479.chunk.js
new file mode 100644
index 0000000..490a34d
--- /dev/null
+++ b/static/js/54.1cf3e479.chunk.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[54],{2054:function(e,n,o){o.r(n),n.default={components:{},data:{},source:"markdown-react-code-preview-loader\n===\n\n[![CI](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml/badge.svg)](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/markdown-react-code-preview-loader.svg)](https://www.npmjs.com/package/markdown-react-code-preview-loader)\n[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/markdown-react-code-preview-loader/file/README.md)\n\nIndex example text in Markdown, converted to React components. The current package is the `loader` of `webpack`, which loads the `markdown` document by configuring the current `loader`, returning a `JS` object containing the `markdown` text, the example index in the `markdown` text.\n\n## Install Loader\n\n```bash\nnpm i markdown-react-code-preview-loader -D\n```\n\n## Configure Loader\n\nAfter installing the dependency (loader), we need to configure the `loader` into the `webpack` configuration. Learn how to use the configuration `loader` by using two configuration methods in `kkt`.\n\n**\u2460 The first method, use the mdCodeModulesLoader method**\n\n`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\n\n```ts\n// .kktrc.ts\nimport scopePluginOptions from '@kkt/scope-plugin-options';\nimport { LoaderConfOptions, WebpackConfiguration } from 'kkt';\nimport { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';\n\nexport default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {\n // ....\n conf = mdCodeModulesLoader(conf);\n // ....\n return conf;\n};\n```\n\n```ts\nimport webpack from 'webpack';\nimport { Options } from 'markdown-react-code-preview-loader';\n/**\n * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\n * @param {webpack.Configuration} config webpack config\n * @param {string[]} lang Parsing language\n * @param {Options} option Loader Options\n * @returns {webpack.Configuration}\n * **/\nexport declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;\n```\n\n**\u2461 The second method is to manually add the configuration**\n\nThe configuration and usage methods are consistent in Webpack.\n\n```ts\n// .kktrc.ts\nimport webpack, { Configuration } from 'webpack';\nimport scopePluginOptions from '@kkt/scope-plugin-options';\nimport { LoaderConfOptions } from 'kkt';\n\nexport default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {\n // ....\n config.module.rules.forEach((ruleItem) => {\n if (typeof ruleItem === 'object') {\n if (ruleItem.oneOf) {\n ruleItem.oneOf.unshift({\n test: /.md$/,\n use: [\n {\n loader: 'markdown-react-code-preview-loader',\n options: { lang:[\"jsx\",\"tsx\"] },\n },\n ],\n });\n }\n }\n });\n // ....\n return conf;\n};\n```\n\n### options parameter\n\n```ts\nimport { PluginItem } from '@babel/core';\nimport { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'\nexport type Options = {\n /**\n * Language to parse code blocks, default: `[\"jsx\",\"tsx\"]`\n */\n lang?: string[];\n /**\n * Option settings for the babel (babel-plugin-transform-remove-imports) package\n * https://github.com/uiwjs/babel-plugin-transform-remove-imports\n */\n removeImports?: RemoveImportsOptions;\n /**\n * Add babel plugins.\n */\n babelPlugins?: PluginItem[];\n}\n```\n\n## Used in the project\n\nAfter adding `loader`, use the method to load `markdown` text in the project project:\n\n```jsx\nimport mdObj from 'markdown-react-code-preview-loader/README.md';\n\nmdObj.source // => `README.md` raw string text\nmdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)\nmdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\n```\n\n```js\n{\n data: {\n 77: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 77,\n meta: {},\n value: \"impo.....\"\n },\n demo12: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 'demo12',\n meta: {},\n value: \"impo.....\"\n }\n },\n components: { 77: \u0192, demo12: \u0192 },\n source: \"# Alert \u786e\u8ba4\u5bf9\u8bdd\u6846....\"\n}\n```\n\n```ts\nexport type CodeBlockItem = {\n /** The code after the source code conversion. **/\n code?: string;\n /** original code block **/\n value?: string;\n /** code block programming language **/\n language?: string;\n /** The index name, which can be customized, can be a row number. */\n name?: string | number;\n /** The `meta` parameter is converted into an `object`. */\n meta?: Record;\n};\n\nexport type CodeBlockData = {\n source: string;\n components: Record;\n data: Record;\n};\n```\n\n## isMeta\n\n```js\nimport { isMeta } from 'markdown-react-code-preview-loader';\n\nisMeta('mdx:preview') // => true\nisMeta('mdx:preview:demo12') // => true\nisMeta('mdx:preview--demo12') // => false\n```\n\n## getMetaId\n\n```js\nimport { getMetaId } from 'markdown-react-code-preview-loader';\n\ngetMetaId('mdx:preview') // => ''\ngetMetaId('mdx:preview:demo12') // => 'demo12'\n```\n\n## getURLParameters\n\n```js\nimport { getURLParameters } from 'markdown-react-code-preview-loader';\n\ngetURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: \"Smith\" }\ngetURLParameters('mdx:preview:demo12') // => { }\ngetURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: \"Smith\" }\ngetURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: \"0\" }\ngetURLParameters('mdx:preview:demo12?code=true&boreder=0') // => { code: 'true', boreder: \"0\" }\n```\n\n```markdown\n\\```tsx mdx:preview:demo12&code=true&boreder=0\nimport React from \"react\"\nconst Demo = ()=>{\n return
\u6d4b\u8bd5
\n}\n\nexport default Demo\n\\```\n```\n\n```js\n{\n data: {\n demo12: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 'demo12',\n meta: { code: 'true', boreder: '0' },\n value: \"impo.....\"\n }\n },\n components: { demo12: \u0192 },\n source: \"# Alert \u786e\u8ba4\u5bf9\u8bdd\u6846....\"\n}\n```\n\n## getCodeBlock \n\n```ts\nconst getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];\n```\n\n## Configure meta ID\n\nNote \u26a0\ufe0f: You need to add a special `meta` identifier to the code block example, and `loader` will index the `react` example for code conversion.\n\n```\n Meta Tag Meta ID Meta Param\n \u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508 \u2508\u2508\u2508\u2508\u2508\u2508\u2508 \u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\n\u256d\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2501\u2572\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2571\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2571\u2501\u2501\u2501\u2501\u2501\u2508\u2508\u2508\u2508\u256e\n\u2506 ```jsx mdx:preview:demo12&boreder=0 \u2506\n\u2506 import React from \"react\" \u2506\n\u2506 const Demo = () =>
Test
\u2506\n\u2506 export default Demo \u2506\n\u2506 ``` \u2506\n\u2570\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u256f\n```\n\n1. `mdx:` special identifier prefix\n2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.\n3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.\n4. `mdx:preview:&code=true&border=0` pass the parameters for the rendering layer to use.\n\n```markdown\n\\```tsx mdx:preview\nimport React from \"react\"\nconst Demo = ()=>{\n return
\n}\n\nexport default Demo\n\\```\n```\n\n## Development\n\n```bash\nnpm install # Install dependencies\nnpm install --workspaces # Install sub packages dependencies\n\nnpm run watch\nnpm run start\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\n \n\n\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.",headings:[{depth:1,value:"markdown-react-code-preview-loader",children:[{depth:2,value:"Install Loader"},{depth:2,value:"Configure Loader",children:[{depth:3,value:"options parameter"}]},{depth:2,value:"Used in the project"},{depth:2,value:"isMeta"},{depth:2,value:"getMetaId"},{depth:2,value:"getURLParameters"},{depth:2,value:"getCodeBlock"},{depth:2,value:"Configure meta ID"},{depth:2,value:"Development"},{depth:2,value:"Contributors",children:[{depth:3,value:"License"}]}]}]}}}]);
+//# sourceMappingURL=54.1cf3e479.chunk.js.map
\ No newline at end of file
diff --git a/static/js/54.1cf3e479.chunk.js.map b/static/js/54.1cf3e479.chunk.js.map
new file mode 100644
index 0000000..1357ee3
--- /dev/null
+++ b/static/js/54.1cf3e479.chunk.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"static/js/54.1cf3e479.chunk.js","mappings":"6GACA,WACIA,WAAY,CAAG,EACfC,KAAM,CAAC,EACPC,OAAQ,64SACRC,SAAS,CAAC,CAAC,MAAQ,EAAE,MAAQ,qCAAqC,SAAW,CAAC,CAAC,MAAQ,EAAE,MAAQ,kBAAkB,CAAC,MAAQ,EAAE,MAAQ,mBAAmB,SAAW,CAAC,CAAC,MAAQ,EAAE,MAAQ,uBAAuB,CAAC,MAAQ,EAAE,MAAQ,uBAAuB,CAAC,MAAQ,EAAE,MAAQ,UAAU,CAAC,MAAQ,EAAE,MAAQ,aAAa,CAAC,MAAQ,EAAE,MAAQ,oBAAoB,CAAC,MAAQ,EAAE,MAAQ,gBAAgB,CAAC,MAAQ,EAAE,MAAQ,qBAAqB,CAAC,MAAQ,EAAE,MAAQ,eAAe,CAAC,MAAQ,EAAE,MAAQ,eAAe,SAAW,CAAC,CAAC,MAAQ,EAAE,MAAQ,gB","sources":["../../core/README.md"],"sourcesContent":["\nexport default {\n components: { },\n data: {},\n source: \"markdown-react-code-preview-loader\\n===\\n\\n[![CI](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml/badge.svg)](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\\n[![npm version](https://img.shields.io/npm/v/markdown-react-code-preview-loader.svg)](https://www.npmjs.com/package/markdown-react-code-preview-loader)\\n[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/markdown-react-code-preview-loader/file/README.md)\\n\\nIndex example text in Markdown, converted to React components. The current package is the `loader` of `webpack`, which loads the `markdown` document by configuring the current `loader`, returning a `JS` object containing the `markdown` text, the example index in the `markdown` text.\\n\\n## Install Loader\\n\\n```bash\\nnpm i markdown-react-code-preview-loader -D\\n```\\n\\n## Configure Loader\\n\\nAfter installing the dependency (loader), we need to configure the `loader` into the `webpack` configuration. Learn how to use the configuration `loader` by using two configuration methods in `kkt`.\\n\\n**① The first method, use the mdCodeModulesLoader method**\\n\\n`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n\\n```ts\\n// .kktrc.ts\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions, WebpackConfiguration } from 'kkt';\\nimport { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';\\n\\nexport default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n conf = mdCodeModulesLoader(conf);\\n // ....\\n return conf;\\n};\\n```\\n\\n```ts\\nimport webpack from 'webpack';\\nimport { Options } from 'markdown-react-code-preview-loader';\\n/**\\n * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n * @param {webpack.Configuration} config webpack config\\n * @param {string[]} lang Parsing language\\n * @param {Options} option Loader Options\\n * @returns {webpack.Configuration}\\n * **/\\nexport declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;\\n```\\n\\n**② The second method is to manually add the configuration**\\n\\nThe configuration and usage methods are consistent in Webpack.\\n\\n```ts\\n// .kktrc.ts\\nimport webpack, { Configuration } from 'webpack';\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions } from 'kkt';\\n\\nexport default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n config.module.rules.forEach((ruleItem) => {\\n if (typeof ruleItem === 'object') {\\n if (ruleItem.oneOf) {\\n ruleItem.oneOf.unshift({\\n test: /.md$/,\\n use: [\\n {\\n loader: 'markdown-react-code-preview-loader',\\n options: { lang:[\\\"jsx\\\",\\\"tsx\\\"] },\\n },\\n ],\\n });\\n }\\n }\\n });\\n // ....\\n return conf;\\n};\\n```\\n\\n### options parameter\\n\\n```ts\\nimport { PluginItem } from '@babel/core';\\nimport { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'\\nexport type Options = {\\n /**\\n * Language to parse code blocks, default: `[\\\"jsx\\\",\\\"tsx\\\"]`\\n */\\n lang?: string[];\\n /**\\n * Option settings for the babel (babel-plugin-transform-remove-imports) package\\n * https://github.com/uiwjs/babel-plugin-transform-remove-imports\\n */\\n removeImports?: RemoveImportsOptions;\\n /**\\n * Add babel plugins.\\n */\\n babelPlugins?: PluginItem[];\\n}\\n```\\n\\n## Used in the project\\n\\nAfter adding `loader`, use the method to load `markdown` text in the project project:\\n\\n```jsx\\nimport mdObj from 'markdown-react-code-preview-loader/README.md';\\n\\nmdObj.source // => `README.md` raw string text\\nmdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)\\nmdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\\n```\\n\\n```js\\n{\\n data: {\\n 77: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 77,\\n meta: {},\\n value: \\\"impo.....\\\"\\n },\\n demo12: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 'demo12',\\n meta: {},\\n value: \\\"impo.....\\\"\\n }\\n },\\n components: { 77: ƒ, demo12: ƒ },\\n source: \\\"# Alert 确认对话框....\\\"\\n}\\n```\\n\\n```ts\\nexport type CodeBlockItem = {\\n /** The code after the source code conversion. **/\\n code?: string;\\n /** original code block **/\\n value?: string;\\n /** code block programming language **/\\n language?: string;\\n /** The index name, which can be customized, can be a row number. */\\n name?: string | number;\\n /** The `meta` parameter is converted into an `object`. */\\n meta?: Record;\\n};\\n\\nexport type CodeBlockData = {\\n source: string;\\n components: Record;\\n data: Record;\\n};\\n```\\n\\n## isMeta\\n\\n```js\\nimport { isMeta } from 'markdown-react-code-preview-loader';\\n\\nisMeta('mdx:preview') // => true\\nisMeta('mdx:preview:demo12') // => true\\nisMeta('mdx:preview--demo12') // => false\\n```\\n\\n## getMetaId\\n\\n```js\\nimport { getMetaId } from 'markdown-react-code-preview-loader';\\n\\ngetMetaId('mdx:preview') // => ''\\ngetMetaId('mdx:preview:demo12') // => 'demo12'\\n```\\n\\n## getURLParameters\\n\\n```js\\nimport { getURLParameters } from 'markdown-react-code-preview-loader';\\n\\ngetURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: \\\"Smith\\\" }\\ngetURLParameters('mdx:preview:demo12') // => { }\\ngetURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: \\\"Smith\\\" }\\ngetURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: \\\"0\\\" }\\ngetURLParameters('mdx:preview:demo12?code=true&boreder=0') // => { code: 'true', boreder: \\\"0\\\" }\\n```\\n\\n```markdown\\n\\\\```tsx mdx:preview:demo12&code=true&boreder=0\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return
测试
\\n}\\n\\nexport default Demo\\n\\\\```\\n```\\n\\n```js\\n{\\n data: {\\n demo12: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 'demo12',\\n meta: { code: 'true', boreder: '0' },\\n value: \\\"impo.....\\\"\\n }\\n },\\n components: { demo12: ƒ },\\n source: \\\"# Alert 确认对话框....\\\"\\n}\\n```\\n\\n## getCodeBlock \\n\\n```ts\\nconst getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];\\n```\\n\\n## Configure meta ID\\n\\nNote ⚠️: You need to add a special `meta` identifier to the code block example, and `loader` will index the `react` example for code conversion.\\n\\n```\\n Meta Tag Meta ID Meta Param\\n ┈┈┈┈┈┈┈┈ ┈┈┈┈┈┈┈ ┈┈┈┈┈┈┈┈┈┈\\n╭┈┈┈┈┈┈┈┈━╲━━━━━━━━━━━━╱━━━━━━━╱━━━━━┈┈┈┈╮\\n┆ ```jsx mdx:preview:demo12&boreder=0 ┆\\n┆ import React from \\\"react\\\" ┆\\n┆ const Demo = () =>
Test
┆\\n┆ export default Demo ┆\\n┆ ``` ┆\\n╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯\\n```\\n\\n1. `mdx:` special identifier prefix\\n2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.\\n3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.\\n4. `mdx:preview:&code=true&border=0` pass the parameters for the rendering layer to use.\\n\\n```markdown\\n\\\\```tsx mdx:preview\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return
\\n}\\n\\nexport default Demo\\n\\\\```\\n```\\n\\n## Development\\n\\n```bash\\nnpm install # Install dependencies\\nnpm install --workspaces # Install sub packages dependencies\\n\\nnpm run watch\\nnpm run start\\n```\\n\\n## Contributors\\n\\nAs always, thanks to our amazing contributors!\\n\\n\\n \\n\\n\\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\\n\\n### License\\n\\nLicensed under the MIT License.\",\n headings:[{\"depth\":1,\"value\":\"markdown-react-code-preview-loader\",\"children\":[{\"depth\":2,\"value\":\"Install Loader\"},{\"depth\":2,\"value\":\"Configure Loader\",\"children\":[{\"depth\":3,\"value\":\"options parameter\"}]},{\"depth\":2,\"value\":\"Used in the project\"},{\"depth\":2,\"value\":\"isMeta\"},{\"depth\":2,\"value\":\"getMetaId\"},{\"depth\":2,\"value\":\"getURLParameters\"},{\"depth\":2,\"value\":\"getCodeBlock\"},{\"depth\":2,\"value\":\"Configure meta ID\"},{\"depth\":2,\"value\":\"Development\"},{\"depth\":2,\"value\":\"Contributors\",\"children\":[{\"depth\":3,\"value\":\"License\"}]}]}]\n }"],"names":["components","data","source","headings"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/54.be7d1758.chunk.js b/static/js/54.be7d1758.chunk.js
deleted file mode 100644
index 9197c9e..0000000
--- a/static/js/54.be7d1758.chunk.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[54],{42054:function(e,n,o){o.r(n),n.default={components:{},data:{},source:"markdown-react-code-preview-loader\n===\n\n[![CI](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml/badge.svg)](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/markdown-react-code-preview-loader.svg)](https://www.npmjs.com/package/markdown-react-code-preview-loader)\n[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/markdown-react-code-preview-loader/file/README.md)\n\nIndex example text in Markdown, converted to React components. The current package is the `loader` of `webpack`, which loads the `markdown` document by configuring the current `loader`, returning a `JS` object containing the `markdown` text, the example index in the `markdown` text.\n\n## Install Loader\n\n```bash\nnpm i markdown-react-code-preview-loader -D\n```\n\n## Configure Loader\n\nAfter installing the dependency (loader), we need to configure the `loader` into the `webpack` configuration. Learn how to use the configuration `loader` by using two configuration methods in `kkt`.\n\n**\u2460 The first method, use the mdCodeModulesLoader method**\n\n`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\n\n```ts\n// .kktrc.ts\nimport scopePluginOptions from '@kkt/scope-plugin-options';\nimport { LoaderConfOptions, WebpackConfiguration } from 'kkt';\nimport { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';\n\nexport default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {\n // ....\n conf = mdCodeModulesLoader(conf);\n // ....\n return conf;\n};\n```\n\n```ts\nimport webpack from 'webpack';\nimport { Options } from 'markdown-react-code-preview-loader';\n/**\n * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\n * @param {webpack.Configuration} config webpack config\n * @param {string[]} lang Parsing language\n * @param {Options} option Loader Options\n * @returns {webpack.Configuration}\n * **/\nexport declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;\n```\n\n**\u2461 The second method is to manually add the configuration**\n\nThe configuration and usage methods are consistent in Webpack.\n\n```ts\n// .kktrc.ts\nimport webpack, { Configuration } from 'webpack';\nimport scopePluginOptions from '@kkt/scope-plugin-options';\nimport { LoaderConfOptions } from 'kkt';\n\nexport default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {\n // ....\n config.module.rules.forEach((ruleItem) => {\n if (typeof ruleItem === 'object') {\n if (ruleItem.oneOf) {\n ruleItem.oneOf.unshift({\n test: /.md$/,\n use: [\n {\n loader: 'markdown-react-code-preview-loader',\n options: { lang:[\"jsx\",\"tsx\"] },\n },\n ],\n });\n }\n }\n });\n // ....\n return conf;\n};\n```\n\n### options parameter\n\n```ts\nimport { PluginItem } from '@babel/core';\nimport { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'\nexport type Options = {\n /**\n * Language to parse code blocks, default: `[\"jsx\",\"tsx\"]`\n */\n lang?: string[];\n /**\n * Option settings for the babel (babel-plugin-transform-remove-imports) package\n * https://github.com/uiwjs/babel-plugin-transform-remove-imports\n */\n removeImports?: RemoveImportsOptions;\n /**\n * Add babel plugins.\n */\n babelPlugins?: PluginItem[];\n}\n```\n\n## Used in the project\n\nAfter adding `loader`, use the method to load `markdown` text in the project project:\n\n```jsx\nimport mdObj from 'markdown-react-code-preview-loader/README.md';\n\nmdObj.source // => `README.md` raw string text\nmdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)\nmdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\n```\n\n```js\n{\n data: {\n 77: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 77,\n meta: {},\n value: \"impo.....\"\n },\n demo12: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 'demo12',\n meta: {},\n value: \"impo.....\"\n }\n },\n components: { 77: \u0192, demo12: \u0192 },\n source: \"# Alert \u786e\u8ba4\u5bf9\u8bdd\u6846....\"\n}\n```\n\n```ts\nexport type CodeBlockItem = {\n /** The code after the source code conversion. **/\n code?: string;\n /** original code block **/\n value?: string;\n /** code block programming language **/\n language?: string;\n /** The index name, which can be customized, can be a row number. */\n name?: string | number;\n /** The `meta` parameter is converted into an `object`. */\n meta?: Record;\n};\n\nexport type CodeBlockData = {\n source: string;\n components: Record;\n data: Record;\n};\n```\n\n## isMeta\n\n```js\nimport { isMeta } from 'markdown-react-code-preview-loader';\n\nisMeta('mdx:preview') // => true\nisMeta('mdx:preview:demo12') // => true\nisMeta('mdx:preview--demo12') // => false\n```\n\n## getMetaId\n\n```js\nimport { getMetaId } from 'markdown-react-code-preview-loader';\n\ngetMetaId('mdx:preview') // => ''\ngetMetaId('mdx:preview:demo12') // => 'demo12'\n```\n\n## getURLParameters\n\n```js\nimport { getURLParameters } from 'markdown-react-code-preview-loader';\n\ngetURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: \"Smith\" }\ngetURLParameters('mdx:preview:demo12') // => { }\ngetURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: \"Smith\" }\ngetURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: \"0\" }\ngetURLParameters('mdx:preview:demo12?code=true&boreder=0') // => { code: 'true', boreder: \"0\" }\n```\n\n```markdown\n\\```tsx mdx:preview:demo12&code=true&boreder=0\nimport React from \"react\"\nconst Demo = ()=>{\n return
\u6d4b\u8bd5
\n}\n\nexport default Demo\n\\```\n```\n\n```js\n{\n data: {\n demo12: {\n code: \"\\\"use strict\\\";\\n\\nfunction ......\"\n language: \"jsx\"\n name: 'demo12',\n meta: { code: 'true', boreder: '0' },\n value: \"impo.....\"\n }\n },\n components: { demo12: \u0192 },\n source: \"# Alert \u786e\u8ba4\u5bf9\u8bdd\u6846....\"\n}\n```\n\n## getCodeBlock \n\n```ts\nconst getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];\n```\n\n## Configure meta ID\n\nNote \u26a0\ufe0f: You need to add a special `meta` identifier to the code block example, and `loader` will index the `react` example for code conversion.\n\n```\n Meta Tag Meta ID Meta Param\n \u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508 \u2508\u2508\u2508\u2508\u2508\u2508\u2508 \u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\n\u256d\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2501\u2572\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2571\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2571\u2501\u2501\u2501\u2501\u2501\u2508\u2508\u2508\u2508\u256e\n\u2506 ```jsx mdx:preview:demo12&boreder=0 \u2506\n\u2506 import React from \"react\" \u2506\n\u2506 const Demo = () =>
Test
\u2506\n\u2506 export default Demo \u2506\n\u2506 ``` \u2506\n\u2570\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u2508\u256f\n```\n\n1. `mdx:` special identifier prefix\n2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.\n3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.\n4. `mdx:preview:&code=true&border=0` pass the parameters for the rendering layer to use.\n\n```markdown\n\\```tsx mdx:preview\nimport React from \"react\"\nconst Demo = ()=>{\n return
\n}\n\nexport default Demo\n\\```\n```\n\n## Development\n\n```bash\nnpm install # Install dependencies\nnpm install --workspaces # Install sub packages dependencies\n\nnpm run watch\nnpm run start\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\n \n\n\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License."}}}]);
-//# sourceMappingURL=54.be7d1758.chunk.js.map
\ No newline at end of file
diff --git a/static/js/54.be7d1758.chunk.js.map b/static/js/54.be7d1758.chunk.js.map
deleted file mode 100644
index 808e99f..0000000
--- a/static/js/54.be7d1758.chunk.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"static/js/54.be7d1758.chunk.js","mappings":"8GACA,WACIA,WAAY,CAAG,EACfC,KAAM,CAAC,EACPC,OAAQ,64S","sources":["../../core/README.md"],"sourcesContent":["\nexport default {\n components: { },\n data: {},\n source: \"markdown-react-code-preview-loader\\n===\\n\\n[![CI](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml/badge.svg)](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\\n[![npm version](https://img.shields.io/npm/v/markdown-react-code-preview-loader.svg)](https://www.npmjs.com/package/markdown-react-code-preview-loader)\\n[![npm unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/markdown-react-code-preview-loader/file/README.md)\\n\\nIndex example text in Markdown, converted to React components. The current package is the `loader` of `webpack`, which loads the `markdown` document by configuring the current `loader`, returning a `JS` object containing the `markdown` text, the example index in the `markdown` text.\\n\\n## Install Loader\\n\\n```bash\\nnpm i markdown-react-code-preview-loader -D\\n```\\n\\n## Configure Loader\\n\\nAfter installing the dependency (loader), we need to configure the `loader` into the `webpack` configuration. Learn how to use the configuration `loader` by using two configuration methods in `kkt`.\\n\\n**① The first method, use the mdCodeModulesLoader method**\\n\\n`mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n\\n```ts\\n// .kktrc.ts\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions, WebpackConfiguration } from 'kkt';\\nimport { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';\\n\\nexport default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n conf = mdCodeModulesLoader(conf);\\n // ....\\n return conf;\\n};\\n```\\n\\n```ts\\nimport webpack from 'webpack';\\nimport { Options } from 'markdown-react-code-preview-loader';\\n/**\\n * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.\\n * @param {webpack.Configuration} config webpack config\\n * @param {string[]} lang Parsing language\\n * @param {Options} option Loader Options\\n * @returns {webpack.Configuration}\\n * **/\\nexport declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;\\n```\\n\\n**② The second method is to manually add the configuration**\\n\\nThe configuration and usage methods are consistent in Webpack.\\n\\n```ts\\n// .kktrc.ts\\nimport webpack, { Configuration } from 'webpack';\\nimport scopePluginOptions from '@kkt/scope-plugin-options';\\nimport { LoaderConfOptions } from 'kkt';\\n\\nexport default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {\\n // ....\\n config.module.rules.forEach((ruleItem) => {\\n if (typeof ruleItem === 'object') {\\n if (ruleItem.oneOf) {\\n ruleItem.oneOf.unshift({\\n test: /.md$/,\\n use: [\\n {\\n loader: 'markdown-react-code-preview-loader',\\n options: { lang:[\\\"jsx\\\",\\\"tsx\\\"] },\\n },\\n ],\\n });\\n }\\n }\\n });\\n // ....\\n return conf;\\n};\\n```\\n\\n### options parameter\\n\\n```ts\\nimport { PluginItem } from '@babel/core';\\nimport { Options as RemoveImportsOptions } from 'babel-plugin-transform-remove-imports'\\nexport type Options = {\\n /**\\n * Language to parse code blocks, default: `[\\\"jsx\\\",\\\"tsx\\\"]`\\n */\\n lang?: string[];\\n /**\\n * Option settings for the babel (babel-plugin-transform-remove-imports) package\\n * https://github.com/uiwjs/babel-plugin-transform-remove-imports\\n */\\n removeImports?: RemoveImportsOptions;\\n /**\\n * Add babel plugins.\\n */\\n babelPlugins?: PluginItem[];\\n}\\n```\\n\\n## Used in the project\\n\\nAfter adding `loader`, use the method to load `markdown` text in the project project:\\n\\n```jsx\\nimport mdObj from 'markdown-react-code-preview-loader/README.md';\\n\\nmdObj.source // => `README.md` raw string text\\nmdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)\\nmdObj.data // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\\n```\\n\\n```js\\n{\\n data: {\\n 77: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 77,\\n meta: {},\\n value: \\\"impo.....\\\"\\n },\\n demo12: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 'demo12',\\n meta: {},\\n value: \\\"impo.....\\\"\\n }\\n },\\n components: { 77: ƒ, demo12: ƒ },\\n source: \\\"# Alert 确认对话框....\\\"\\n}\\n```\\n\\n```ts\\nexport type CodeBlockItem = {\\n /** The code after the source code conversion. **/\\n code?: string;\\n /** original code block **/\\n value?: string;\\n /** code block programming language **/\\n language?: string;\\n /** The index name, which can be customized, can be a row number. */\\n name?: string | number;\\n /** The `meta` parameter is converted into an `object`. */\\n meta?: Record;\\n};\\n\\nexport type CodeBlockData = {\\n source: string;\\n components: Record;\\n data: Record;\\n};\\n```\\n\\n## isMeta\\n\\n```js\\nimport { isMeta } from 'markdown-react-code-preview-loader';\\n\\nisMeta('mdx:preview') // => true\\nisMeta('mdx:preview:demo12') // => true\\nisMeta('mdx:preview--demo12') // => false\\n```\\n\\n## getMetaId\\n\\n```js\\nimport { getMetaId } from 'markdown-react-code-preview-loader';\\n\\ngetMetaId('mdx:preview') // => ''\\ngetMetaId('mdx:preview:demo12') // => 'demo12'\\n```\\n\\n## getURLParameters\\n\\n```js\\nimport { getURLParameters } from 'markdown-react-code-preview-loader';\\n\\ngetURLParameters('name=Adam&surname=Smith') // => { name: 'Adam', surname: \\\"Smith\\\" }\\ngetURLParameters('mdx:preview:demo12') // => { }\\ngetURLParameters('mdx:preview:demo12&name=Adam&surname=Smith') // => { name: 'Adam', surname: \\\"Smith\\\" }\\ngetURLParameters('mdx:preview:demo12&code=true&boreder=0') // => { code: 'true', boreder: \\\"0\\\" }\\ngetURLParameters('mdx:preview:demo12?code=true&boreder=0') // => { code: 'true', boreder: \\\"0\\\" }\\n```\\n\\n```markdown\\n\\\\```tsx mdx:preview:demo12&code=true&boreder=0\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return
测试
\\n}\\n\\nexport default Demo\\n\\\\```\\n```\\n\\n```js\\n{\\n data: {\\n demo12: {\\n code: \\\"\\\\\\\"use strict\\\\\\\";\\\\n\\\\nfunction ......\\\"\\n language: \\\"jsx\\\"\\n name: 'demo12',\\n meta: { code: 'true', boreder: '0' },\\n value: \\\"impo.....\\\"\\n }\\n },\\n components: { demo12: ƒ },\\n source: \\\"# Alert 确认对话框....\\\"\\n}\\n```\\n\\n## getCodeBlock \\n\\n```ts\\nconst getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];\\n```\\n\\n## Configure meta ID\\n\\nNote ⚠️: You need to add a special `meta` identifier to the code block example, and `loader` will index the `react` example for code conversion.\\n\\n```\\n Meta Tag Meta ID Meta Param\\n ┈┈┈┈┈┈┈┈ ┈┈┈┈┈┈┈ ┈┈┈┈┈┈┈┈┈┈\\n╭┈┈┈┈┈┈┈┈━╲━━━━━━━━━━━━╱━━━━━━━╱━━━━━┈┈┈┈╮\\n┆ ```jsx mdx:preview:demo12&boreder=0 ┆\\n┆ import React from \\\"react\\\" ┆\\n┆ const Demo = () =>
Test
┆\\n┆ export default Demo ┆\\n┆ ``` ┆\\n╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯\\n```\\n\\n1. `mdx:` special identifier prefix\\n2. `mdx:preview` Controls whether to perform example indexing, and obtain the required example object through the corresponding line number.\\n3. `mdx:preview:demo12` Uniquely identified by `demo12`, accurately obtain the `example code` or `example component object` of the index.\\n4. `mdx:preview:&code=true&border=0` pass the parameters for the rendering layer to use.\\n\\n```markdown\\n\\\\```tsx mdx:preview\\nimport React from \\\"react\\\"\\nconst Demo = ()=>{\\n return
\n );\n }\n}\nexport default Demo;\n```\n\n### Custom button\n\nThere are two buttons in this dialog box. After clicking **OK button** or **cancel button**, this dialog box will close and the ~~`onconfirm`~~ or ~~`OnCancel`~~ event will not be triggered. Because these two buttons are custom buttons. You can define `classname = "w-alert-footer"` for the object outside the custom button, and the default style will be displayed.\n\n```jsx mdx:preview:base23\nimport React from "react";\nimport ReactDOM from "react-dom";\nimport { Alert, ButtonGroup, Button } from "uiw";\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n };\n }\n onClick(type) {\n this.setState({ visible: !this.state.visible });\n }\n onClosed(type) {\n this.setState({ visible: false });\n }\n render() {\n return (\n
\\n );\\n }\\n}\\nexport default Demo;\\n```\\n\\n### Custom button\\n\\nThere are two buttons in this dialog box. After clicking **OK button** or **cancel button**, this dialog box will close and the ~~`onconfirm`~~ or ~~`OnCancel`~~ event will not be triggered. Because these two buttons are custom buttons. You can define `classname = \\\"w-alert-footer\\\"` for the object outside the custom button, and the default style will be displayed.\\n\\n```jsx mdx:preview:base23\\nimport React from \\\"react\\\";\\nimport ReactDOM from \\\"react-dom\\\";\\nimport { Alert, ButtonGroup, Button } from \\\"uiw\\\";\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n visible: false,\\n };\\n }\\n onClick(type) {\\n this.setState({ visible: !this.state.visible });\\n }\\n onClosed(type) {\\n this.setState({ visible: false });\\n }\\n render() {\\n return (\\n
\n );\n }\n}\nexport default Demo;\n```\n\n### Custom button\n\nThere are two buttons in this dialog box. After clicking **OK button** or **cancel button**, this dialog box will close and the ~~`onconfirm`~~ or ~~`OnCancel`~~ event will not be triggered. Because these two buttons are custom buttons. You can define `classname = "w-alert-footer"` for the object outside the custom button, and the default style will be displayed.\n\n```jsx mdx:preview:base23\nimport React from "react";\nimport ReactDOM from "react-dom";\nimport { Alert, ButtonGroup, Button } from "uiw";\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n };\n }\n onClick(type) {\n this.setState({ visible: !this.state.visible });\n }\n onClosed(type) {\n this.setState({ visible: false });\n }\n render() {\n return (\n
\\n );\\n }\\n}\\nexport default Demo;\\n```\\n\\n### Custom button\\n\\nThere are two buttons in this dialog box. After clicking **OK button** or **cancel button**, this dialog box will close and the ~~`onconfirm`~~ or ~~`OnCancel`~~ event will not be triggered. Because these two buttons are custom buttons. You can define `classname = \\\"w-alert-footer\\\"` for the object outside the custom button, and the default style will be displayed.\\n\\n```jsx mdx:preview:base23\\nimport React from \\\"react\\\";\\nimport ReactDOM from \\\"react-dom\\\";\\nimport { Alert, ButtonGroup, Button } from \\\"uiw\\\";\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n visible: false,\\n };\\n }\\n onClick(type) {\\n this.setState({ visible: !this.state.visible });\\n }\\n onClosed(type) {\\n this.setState({ visible: false });\\n }\\n render() {\\n return (\\n