vue-markdown-html-loader
Convert Markdown file to Vue Component using markdown-it.inspire from vue-markdown-loader and virtual-file-loader and https://github.com/webpack/webpack/issues/5824.
Installation
npm i vue-markdown-html-loader -D
Feature
- Hot reload
- Write vue script
- Code highlight
Usage
webpack.config.js
file:
moduleexports = module: rules: test: /\.md$/ use: loader: 'vue-loader' loader: options: wrapper: 'article' markdownIt: langPrefix: 'lang-' html: true markdownItPlugins: iterator 'link_converter' 'link_open' tokensidxtag = 'u-link' iterator 'link_converter' 'link_close' tokensidxtag = 'u-link' { return ` # added by preprocess `; } ;
Options
wrapper
You can customize wrapper tag no matter html element tag or vue component tag. Default is 'section'
test: /\.md$/ loader: 'vue-markdown-html-loader' options: wrapper: 'article'
markdownIt
reference markdown-it
module: rules: test: /\.md$/ loader: 'vue-markdown-html-loader' options: wrapper: 'article' markdownIt: langPrefix: 'lang-' html: true markdownItPlugins: iterator 'link_converter' 'link_open' tokensidxtag = 'u-link' iterator 'link_converter' 'link_close' tokensidxtag = 'u-link'
Or you can customize markdown-it
var markdown = html: true breaks: true markdown ; moduleexports = module: rules: test: /\.md$/ loader: 'vue-markdown-html-loader' options: markdownIt: markdown ;
License
MIT