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

``bash
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.

`js
import React from 'react';
import ReactDOM from 'react-dom';
import MD from './README.md';

ReactDOM.render(, document.getElementById('container'));
`

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

Options

$3

default: demo

Specify demo dir, relative to your entry md file.

$3

Template dir for md2react-doc-loader.

You can get a demo template by:

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

then:

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

$3

See Babel config.

For compile markdown jsx.

LICENSE

MIT @PengJiyuan