vue-markdownit-loader
支持在 vue template 模版中使用 markdown 语法
安装
npm install vue-markdownit-loader --save-dev
特征
- Hot reload
- 使用 Hightlight 语法高亮
- 支持嵌套标签的方式使用
使用方式
安装并引入你喜欢的 markdown 样式文件,这里以 github-markdown-css 为例
npm install github-markdown-css --save
如果你要使用 highlight.js 高亮语法,也要引入 highlight.js/styles/github.css
HightLight Styles
webpack.config.js
file (webpack 2.x):
moduleexports = module: rules: test: /\.vue$/ loader: 'vue-loader' options: loaders: md: "vue-markdownit-loader" test: /\.md/ loader: 'vue-markdownit-loader' ;
xxxx.vue
markdown text markdown text >
Passing options to vue-markdownit-loader
- 可以传 tagName 给 vue-markdownit-loader,它将解析 内的 markdown文本 默认值:Markdown
- 可以传 tab=[number] 给 vue-markdownit-loader,它将所有缩进解析为指定的空格数量 默认值:2
moduleexports = module: rules: test: /\.vue$/ loader: 'vue-loader' options: loaders: md: "vue-markdownit-loader?tagName=Markdown&tab=2" test: /\.md/ loader: 'vue-markdownit-loader' ;
Passing options to vue-markdown-it
See markdown-it for a complete list of possible options.
moduleexports = module: rules: test: /\.md/ use: loader: 'raw-loader' loader: 'vue-markdownit-loader' options: // markdown-it config preset: 'default' breaks: true { // do any thing return source } use: /* markdown-it plugin */ /* or */ 'this is options' ;
Or you can customize markdown-it
var markdown = html: true breaks: true markdown ; moduleexports = module: rules: test: /\.md/ use: loader: 'raw-loader' loader: 'vue-markdownit-loader' options: markdown ;