md2react-doc-loader

This is a Webpack loader, will translate markdown to react component.

And if you specify demo folder, it will generate demo effect and code preview.

Install

npm i md2react-doc-loader -D

Usage

webpack documentation: Loaders

Within your webpack configuration object, you'll need to add the md2react-doc-loader to the list of modules, like so:

You should put babel-loader before md2react-doc-loader, because md2react-doc-loader's output is ES6 format and contains jsx.

import React from 'react';
import ReactDOM from 'react-dom';
import MD from './README.md';
 
ReactDOM.render(<MD />, document.getElementById('container'));

module: {
  rules: [
    {
      test: /\.md$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            ...
          }
        },
        {
          loader: 'md2react-doc-loader',
          options: {
            demoDir: 'demo',
            templateDir: 'src/templates',
            babelConfig: {
              ...
            }
          }
        }
      ]
    }
  ]
}

Options

demoDir [string]

default: demo

Specify demo dir, relative to your entry md file.

templateDir [string] !required

Template dir for md2react-doc-loader.

You can get a demo template by:

cp -R your/node_modules/md2react-doc-loader/templates path/to/templates

then:

{
  loader: 'md2react-doc-loader',
  options: {
    demoDir: 'demo',
    templateDir: 'path/to/templates',
    babelConfig: {
      ...
    }
  }
}

babelConfig [object]

See Babel config.

For compile markdown jsx.

LICENSE

MIT @PengJiyuan