JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q38440F
  • License ISC

Package Exports

  • react-code-markdown-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-code-markdown-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 目录的文档并自动加入解析