https://github.com/pengjiyuan/md2react-doc-loader
Webpack loader, Markdown to react demo document, for generate react component document.
https://github.com/pengjiyuan/md2react-doc-loader
Last synced: 3 months ago
JSON representation
Webpack loader, Markdown to react demo document, for generate react component document.
- Host: GitHub
- URL: https://github.com/pengjiyuan/md2react-doc-loader
- Owner: PengJiyuan
- License: mit
- Created: 2019-02-27T08:03:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T00:53:45.000Z (almost 5 years ago)
- Last Synced: 2025-02-09T02:06:13.779Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://webpack.js.org/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
### 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:
```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: {
...
}
}
}
```
### babelConfig [object]
See [Babel config](https://babeljs.io/docs/en/next/options).
For compile markdown jsx.
## LICENSE
[MIT](./LICENSE) @[PengJiyuan](https://github.com/PengJiyuan)