https://github.com/skidxjq/react-for-markdown-loader
🚕 webpack loader plugin for a Markdown file
https://github.com/skidxjq/react-for-markdown-loader
plugin react webpack
Last synced: 2 days ago
JSON representation
🚕 webpack loader plugin for a Markdown file
- Host: GitHub
- URL: https://github.com/skidxjq/react-for-markdown-loader
- Owner: skidxjq
- Created: 2017-08-12T08:05:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-07T08:49:20.000Z (over 8 years ago)
- Last Synced: 2025-10-19T22:39:33.209Z (9 months ago)
- Topics: plugin, react, webpack
- Language: JavaScript
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-for-markdown-loader
> Convert Markdown file to React Component using markdown-it.
## Installation
```bash
npm i react-for-markdown-loader -D
```
## Feature
- Hot reload
- Write React script
- Code highlight
## Usage
`webpack.config.js` file:
```javascript
module.exports = {
module: {
loaders: [{
test: /\.md/,
loader: 'react-for-markdown-loader'
}]
}
};
```
## Options
reference [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options)
```javascript
{
// markdown-it config
preset: 'default',
breaks: true,
preprocess: function(markdownIt, source) {
// do any thing
return source
},
use: [
/* markdown-it plugin */
require('markdown-it-xxx'),
/* or */
[require('markdown-it-xxx'), 'this is options']
]
}
```
Or you can customize markdown-it
```javascript
var markdown = require('markdown-it')({
html: true,
breaks: true
})
markdown
.use(plugin1)
.use(plugin2, opts, ...)
.use(plugin3);
module.exports = {
module: {
loaders: [{
test: /\.md/,
loader: 'react-for-markdown-loader'
}]
}
};
```
## Run Example
```
git clone https://github.com/skidxjq/react-for-markdown-loader
cd react-for-markdown-loader
npm run example
open http://localhost:8080
```
## Note
Resource references can only use **absolute path**