forked from SunLxy/md-loader
-
Notifications
You must be signed in to change notification settings - Fork 0
/
583.2c6ac73c.chunk.js
2 lines (2 loc) · 6.35 KB
/
583.2c6ac73c.chunk.js
1
2
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[583],{9583:function(n,e,o){o.r(e);e.default={source:"markdown-react-code-preview-loader\n===\n\n[](https://github.com/kktjs/markdown-react-code-preview-loader/actions/workflows/ci.yml)\n[](https://www.npmjs.com/package/markdown-react-code-preview-loader)\n[](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 RIOptions } 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?: RIOptions;\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.codeBlock // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)\n```\n\n```js\n{\n codeBlock: {\n 17: 'import React from ...',\n 77: 'import React from ...',\n demo12: 'import React from ...'\n },\n components: { 17: \u0192, 77: \u0192, demo12: \u0192 },\n languages: { 17: 'jsx', 77: 'jsx', demo12: 'jsx'},\n source: \"# Alert \u786e\u8ba4\u5bf9\u8bdd\u6846....\"\n}\n```\n\n```ts\nexport type CodeBlockData = {\n source: string;\n components: Record<string | number, React.FC>;\n codeBlock: Record<string | number, string>;\n languages: Record<string | number, string>;\n};\n```\n\n## getCodeBlockString \n\nPass the `markdown` file content string, and return the converted code block parsing data that needs to be previewed.\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\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.\n\n```markdown\n\\```tsx mdx:preview\nimport React from \"react\"\nconst Demo = ()=>{\n return <div>\u6d4b\u8bd5</div>\n}\n\nexport default Demo\n\\```\n```\n\n```markdown\n\\```tsx mdx:preview:demo12\nimport React from \"react\"\nconst Demo = ()=>{\n return <div>\u6d4b\u8bd5</div>\n}\n\nexport default Demo\n\\```\n```\n\n## Development\n\n```bash\nnpm install # Install dependencies\nnpm run hoist # Install sub packages dependencies\n\nnpm run watch:loader\nnpm run start\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n<a href=\"https://github.com/kktjs/markdown-react-code-preview-loader/graphs/contributors\">\n <img src=\"https://kktjs.github.io/markdown-react-code-preview-loader/CONTRIBUTORS.svg\" />\n</a>\n\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.",components:{},codeBlock:{},languages:{}}}}]);
//# sourceMappingURL=583.2c6ac73c.chunk.js.map