Install Loader

npm i markdown-react-code-preview-loader -D

Configure Loader

// .kktrc.tsimportscopePluginOptionsfrom'@kkt/scope-plugin-options';import{LoaderConfOptions,WebpackConfiguration}from'kkt';import{mdCodeModulesLoader}from'markdown-react-code-preview-loader';exportdefault(conf:WebpackConfiguration,env:'development'|'production',options:LoaderConfOptions)=>{// ....conf=mdCodeModulesLoader(conf);// ....returnconf;};

importwebpackfrom'webpack';import{Options}from'markdown-react-code-preview-loader';/** * `mdCodeModulesLoader` method for adding * `markdown-react-code-preview-loader` to webpack config. * *@param {webpack.Configuration} config webpack config *@param {string[]} lang Parsing language *@param {Options} option Loader Options *@returns {webpack.Configuration} * **/exportdeclareconstmdCodeModulesLoader:(config:webpack.Configuration,lang?:string[],option?:Options)=>webpack.Configuration;

// .kktrc.tsimportwebpack,{Configuration}from'webpack';importscopePluginOptionsfrom'@kkt/scope-plugin-options';import{LoaderConfOptions}from'kkt';exportdefault(conf:Configuration,env:'development'|'production',options:LoaderConfOptions)=>{// ....config.module.rules.forEach((ruleItem)=>{if(typeofruleItem==='object'){if(ruleItem.oneOf){ruleItem.oneOf.unshift({test:/.md$/,use:[{loader:'markdown-react-code-preview-loader',options:{lang:["jsx","tsx"]},},],});}}});// ....returnconf;};

options parameter

import{PluginItem}from'@babel/core';import{OptionsasRemoveImportsOptions}from'babel-plugin-transform-remove-imports'exporttypeOptions={/**   * Language to parse code blocks, default: `["jsx","tsx"]`   */lang?:string[];/**   * Option settings for the babel (babel-plugin-transform-remove-imports) package   * https://github.com/uiwjs/babel-plugin-transform-remove-imports   */removeImports?:RemoveImportsOptions;/**   * Add babel plugins.   */babelPlugins?:PluginItem[];/**Do you want to parse the title*/isHeading?:boolean}

Used in the project

importmdObjfrom'markdown-react-code-preview-loader/README.md';// `README.md` raw string textmdObj.source// The component index object,// the React component converted from the markdown indexed example.// (need to configure meta)mdObj.components// The component source code index object, the sample source code indexed from markdown.// (need to configure meta)mdObj.data// This is the parsed header datamdObj.headings

{data:{77:{code:"\"use strict\";\n\nfunction ......"language:"jsx"name:77,meta:{},value:"impo....."},demo12:{code:"\"use strict\";\n\nfunction ......"language:"jsx"name:'demo12',meta:{},value:"impo....."}},components:{77:ƒ,demo12:ƒ},source:"# Alert 确认对话框....",headings:[{depth:1,value:"标题", ...},...]}

exporttypeCodeBlockItem={/** The code after the source code conversion. **/code?:string;/** original code block **/value?:string;/** code block programming language **/language?:string;/** The index name, which can be customized, can be a row number. */name?:string|number;/** The `meta` parameter is converted into an `object`. */meta?:Record<string,string>;};exporttypeCodeBlockData={source:string;components:Record<CodeBlockItem['name'],React.FC>;data:Record<CodeBlockItem['name'],CodeBlockItem>;headings?:HeadingItem[]};

isMeta

import{isMeta}from'markdown-react-code-preview-loader';isMeta('mdx:preview')// => trueisMeta('mdx:preview:demo12')// => trueisMeta('mdx:preview--demo12')// => false

getMetaId

import{getMetaId}from'markdown-react-code-preview-loader';getMetaId('mdx:preview')// => ''getMetaId('mdx:preview:demo12')// => 'demo12'

getURLParameters

import{getURLParameters}from'markdown-react-code-preview-loader';getURLParameters('name=Adam&surname=Smith')// => { name: 'Adam', surname: "Smith" }getURLParameters('mdx:preview:demo12')// => { }getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')// => { name: 'Adam', surname: "Smith" }getURLParameters('mdx:preview:demo12&code=true&boreder=0')// => { code: 'true', boreder: "0" }getURLParameters('mdx:preview:demo12?code=true&boreder=0')// => { code: 'true', boreder: "0" }

\```tsx mdx:preview:demo12&code=true&boreder=0import React from "react"const Demo = ()=>{  return <div>测试</div>}export default Demo\```

{  data:{    demo12:{      code:"\"use strict\";\n\nfunction ......"      language:"jsx"      name:'demo12',meta:{code:'true',boreder:'0'},value:"impo....."}},  components:{demo12:ƒ},source:"# Alert 确认对话框...."}

getCodeBlock

constgetCodeBlock:(child:MarkdownParseData['children'],opts?:Options)=>CodeBlockData['data'];

Configure meta ID

    Meta Tag         Meta ID   Meta Param    ┈┈┈┈┈┈┈┈         ┈┈┈┈┈┈┈   ┈┈┈┈┈┈┈┈┈┈╭┈┈┈┈┈┈┈┈━╲━━━━━━━━━━━━╱━━━━━━━╱━━━━━┈┈┈┈╮┆ ```jsx mdx:preview:demo12&boreder=0    ┆┆ import React from "react"              ┆┆ const Demo = () => <div>Test</div>     ┆┆ export default Demo                    ┆┆ ```                                    ┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

\```tsx mdx:previewimport React from "react"const Demo = ()=>{  return <div>测试</div>}export default Demo\```

\```tsx mdx:preview:demo12import React from "react"const Demo = ()=>{  return <div>测试</div>}export default Demo\```

\```tsx mdx:preview:demo12&code=true&boreder=0import React from "react"const Demo = ()=>{  return <div>测试</div>}export default Demo\```

Development

npm install# Install dependenciesnpm install --workspaces# Install sub packages dependenciesnpm run watchnpm run start

Contributors

License