第一种: 直接使用整个markdown文件作为vue组件或者页面
npm install markdown-it --save
2.新建markdownLoader.js文件(自定义loader)
const markdown = require('markdown-it');
function markLoader(src) {
const md = markdown({
html: true,
typographer: true,
});
const html = md.render(src);
return (
'<template>\n'
+ `<div class="markdown">${html}</div>\n`
+ '</template>\n'
);
}
module.exports = markLoader;
3.在vue.config.js(如果没有,在根目录下自行创建)文件中配置
module.exports = {
configureWebpack: config => {
config.module.rules.push({
// 处理markdown文件
test: /\.md$/,
use: [
{
loader: "vue-loader"
},
{
loader: require.resolve("./src/common/markdownLoader")
}
],
},
);
}
};
4.新建测试文件test.md
# woshimarkdown测试文件
5.在router.js中引入test.md文件
import Router from 'vue-router';
import Test from '@/docs/test.md'; // 自己创建的文件夹目录
Vue.use(Router);
export default new Router({
routes: [
{
path: '/test',
name: 'test',
component: Test,
},
],
});
6.保存后重新启动项目(尤其是修改自定义lodaer和vue.config.js配置文件,必须重新启动项目生效)
第二种: vue组建中部分代码块展示markdown语法(不推荐使用,类似于在vue中嵌入markdown编辑器):
原文链接
1.安装
npm install mavon-editor --save
2.引入
在 main.js 中引入以下字段：
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
如果引入css报错,参考该链接
3.使用
<template>
<div>
<mavon-editor
class="md"
:value="value"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
></mavon-editor>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
value: '### test' // markdown语法
};
},
};
</script>
// 注释
:value="detailContent.content"：引入要转换的内容
:subfield = "false"：开启单栏模式
:defaultOpen = "'preview'"：默认展示预览区域
:toolbarsFlag = "false"：关闭工具栏
:editable="false"：不允许编辑
scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)
:ishljs = "true"：开启代码高亮
