https://github.com/blueoakjs/markdownit-loader
Webpack loader to translate markdown to HTML using markdownit
https://github.com/blueoakjs/markdownit-loader
Last synced: about 1 year ago
JSON representation
Webpack loader to translate markdown to HTML using markdownit
- Host: GitHub
- URL: https://github.com/blueoakjs/markdownit-loader
- Owner: BlueOakJS
- License: mit
- Created: 2017-03-06T15:01:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-25T16:35:01.000Z (almost 9 years ago)
- Last Synced: 2025-04-30T05:48:28.498Z (about 1 year ago)
- Language: JavaScript
- Size: 36.1 KB
- Stars: 12
- Watchers: 4
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markdownit-loader
> Convert Markdown file to HTML using markdown-it.
## Installation
```bash
npm i markdownit-loader --save-dev
```
## Features
- Hot reload
- Code highlighting using highlight.js
## Usage
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
`webpack.config.js` file (webpack 2.x):
```javascript
module.exports = {
module: {
rules: [{
test: /\.md/,
loader: 'markdownit-loader'
}]
}
};
```
### Passing options to markdown-it
See [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options) for a complete list of possible options.
```javascript
module.exports = {
module: {
rules: [
{
test: /\.md/,
use: [
{ loader: 'raw-loader' },
{
loader: 'markdownit-loader',
options: {
// markdown-it config
preset: 'default',
breaks: true,
preprocess: function(markdownIt, source) {
// do any thing
return source
},
use: [
/* markdown-it plugin */
'markdown-it-xxx',
/* or */
['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: {
rules: [
{
test: /\.md/,
use: [
{ loader: 'raw-loader' },
{
loader: 'markdownit-loader',
options: markdown
}
]
}
]
}
};
```
## Note
Resource references can only use **absolute path**
e.g.
webpack config
```javascript
resolve: {
alias: {
src: __dirname + '/src'
}
}
```
It'is work
```markdown
import Image from 'src/images/logo.png'
import Hello from 'src/components/hello.vue'
module.exports = {
}
```
Incorrect
```markdown
import Image from '../images/logo.png'
import Hello from './hello.vue'
module.exports = {
}
```
## Changelog
- 2.0.0: Changed how plugins are passed to markdown-it (breaking API change) to fix an issue with vue-loader (THANKS [Pooya Parsa](https://github.com/pi0))
## License
MIT