Webpack loader that parses markdown files and converts them to a React Component.
By extending md syntax, you can easily write react componet in .md
files.
install:
npm i -D md2react-loader
config your webpack and make sure you have installed babel-loader:
module: {
rules: [
{
test: /\.md$/,
use: [
'babel-loader',
{
loader: 'md2react-loader',
}
],
},
]
}
write your md files:
hello.md
--- imports: TestComponent: './testComponent.js' '{ Component1, Component2 }': './components.js' --- # Hello World This is an example component ```run <TestComponent /> ``` ```demo <HelloWorld who="World!!!" /> ```
app.js
import React, { PropTypes } from 'react';
/**
* use md just like a react component
*/
import Hello from 'hello.md'
export default (props) => {
return (
<div className="hello-world">
<Hello />
</div>
);
}
In the FrontMatter you should import the components you want to render with the component name as a key and it's path as the value。
Markdown syntax extension:
```run ```
- Use the run tag to code fenceblocks you want the loader to compile as Components this will just output the rendered component.
```demo ```
- Use the demo tag to code fenceblocks you want the loader to compile as Components this will output the usual highlighted code and the rendered component.
if you want to custom the output of code, you can just download the repo and change it.
- loader options:
- config dependencies
- config markdown render options
Inspired by react-markdown-loader
MIT (c) 2018