https://github.com/ken1987/vue-markdown-es6-loader
Converting Markdown to Vue single-file component loader for Webpack.
https://github.com/ken1987/vue-markdown-es6-loader
markdown vue vue-loader webpack webpack-loader
Last synced: about 2 months ago
JSON representation
Converting Markdown to Vue single-file component loader for Webpack.
- Host: GitHub
- URL: https://github.com/ken1987/vue-markdown-es6-loader
- Owner: ken1987
- Created: 2017-03-02T12:15:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-09T02:43:32.000Z (over 9 years ago)
- Last Synced: 2025-06-30T18:03:07.956Z (about 1 year ago)
- Topics: markdown, vue, vue-loader, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 28.3 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# vue-markdown-es6-loader
Converting Markdown to Vue single-file component loader for Webpack.
## notes
* node >= 6.0.0
* npm >= 3.0.0
* webpack >= 2.0.0
* output es6 module
## install
``` shell
npm i vue-markdown-es6-loader
```
## webpack 2.x config
```js
{
module: {
rules: [{
test: /\.vue\.md$/,
use: [{
loader: 'vue-loader',
options: {
js: 'babel-loader' // output es6 module
}
}, {
loader: 'vue-markdown-es6-loader',
options: {
prefix: '
',
postfix: '',
highlightStyle: 'default'
}
}]
}]
}
}
```
## options
### prefix
* Type: string
* Default: `
`
* Details:
Element tag of output start.
> Vue warn: Component template should contain exactly one root element
### postfix
* Type: string
* Default: `
`
* Details:
Element tag of output end.
> Vue warn: Component template should contain exactly one root element
### highlightStyle
* Type: string
* Default: `default`
* Optional: refer to [style filename][2]
* Details:
[`highlight.js`][1] style.
* markedOptions
* Type: string
* Optional: refer to [marked options][3]
* Details:
A markdown parser options.
## usage
* use `.vue` in markdown
* set code type to `vue`
* write path into code area
> \`\`\` vue
>
> ./code.vue
>
> \`\`\`
* reslute
``` html
...
import vmd14884628711531 from './code.vue';
export default {
components:{
vmd14884628711531
}
};
import 'highlight.js/styles/default.css'
```
## TODO
* Verify `prefix` and `postfix` are closed
* asynchronous read file
[1]: https://github.com/isagalaev/highlight.js
[2]: https://github.com/isagalaev/highlight.js/tree/master/src/styles
[3]: https://github.com/chjj/marked