Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-code-markdown-loader

0.0.25 • Public • Published

react-code-markdown-loader

这是一个webpack-loader,它能够将markdown文件解析为 React 组件。

组件的功能和目前许多的markdown-loader类似,但该loader不同的是,它更倾向于包含源码的文档渲染。

如果你的 markdown 文件的目录中,包含 demo 子目录,该loader可以自动扫描目录下的所有md文件,并将它们引入到该文档中。

Usage

webpack.config.js:

export default = {
  module: {
    rules: [
      {
        test: /\.md?$/,
        use: [
          'babel-loader',
          {
            'react-code-markdown-loader',
            options: {
              // auto scan demo/*.md
              autoScanDemo: true,
              // Wrapper will contain the md-doc jsx
              markdownWrapper: 'path/to/your/wrapper',
              // add custom props to your Wrapper: <MarkdownWrapper nav={idList} wrapperProp="value" >{markdownJSX}</MarkdownWrapper>
              markdownWrapperProps: ['nav={idList}', 'wrapperProp="value"'],
            },
          },
        ],
      },
      // ...other rules
    ]
  }
  // ...other config
}

Options

markdownWrapper

自定义 Markdown 包裹组件,可用自定义样式覆盖

markdownWrapperProps

添加自定义属性到你的MarkdownWrapper上

autoScanDemo

是否自动扫描 demo 目录的文档并自动加入解析

Install

npm i react-code-markdown-loader

DownloadsWeekly Downloads

71

Version

0.0.25

License

ISC

Unpacked Size

53.4 kB

Total Files

51

Last publish

Collaborators

  • avatar