1、安装 vue-markdown-loader
yarn add vue-markdown-loader -D
2、安装 github-markdown-css、highlight.js
yarn add github-markdown-css -D
yarn add highlight.js -D
3、在vue.config.js中配置webpack
module.exports = {
chainWebpack: config => {
config.module.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true
})
}
}
4、在main.js中引入样式文件
// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'
5、使用
<template>
<div class="content">
<!-- class的值必须包含 markdown-body -->
<article class="markdown-body"><md></md> </article>
</div>
</template>
<script>
import md from './index.md'
export default {
components :{md}
};
</script>