showdownGithub地址： https://github.com/showdownjs/showdown
在vue项目中，通过showdown 实现markdown文件的预览，highlight.js实现代码块的高亮。
1.安装showdown
npm install showdown --save
2.在组建中引入showdown
import showdown from "showdown";
var converter = new showdown.Converter();
//显示table
converter.setOption("tables", true);
3.在methods中创建方法
methods: {
//转换markdown为html语言
compileMarkDown(val) {
return converter.makeHtml(val);
},
}
4.请求后端接口中的数据，并使用。
<div v-html="compileMarkDown(content)"></div>
5.实现代码高亮
// 安装highlight.js
npm install highlight.js
// 引入文件
import hljs from "highlight.js";
import "highlight.js/styles/default.css"; //样式文件
// 注册局部指令 或全局指令
// 局部 定义自定义指令 v-highlight 代码高亮
directives: {
highlight: {
update(el) {
let blocks = el.querySelectorAll("pre code");
blocks.forEach((block) => {
hljs.highlightBlock(block);
});
},
},
},
// 在main.js中创建全局指令
// 定义自定义指令 v-highlight 代码高亮
// Vue.directive('highlight',function (el) {
// let blocks = el.querySelectorAll('pre code');
// blocks.forEach((block)=>{
// hljs.highlightBlock(block)
// })
// }),
// 在html中使用 v-highlight 代码高亮指令
<div v-html="compileMarkDown(content)" v-highlight></div>ID=?xoyzlub.html
6.完整代码
<template>
<div
class="content-markdwon"
v-html="compileMarkDown(content)"
v-highlight
>
</div>
</template>
<script>
import { lookDoc } from "@/api/filelist";
import showdown from "showdown";
import hljs from "highlight.js"
import 'highlight.js/styles/default.css';
var converter = new showdown.Converter();
//表格显示
converter.setOption("tables", true);
export default {
// 定义自定义指令 v-highlight 代码高亮
directives: {
highlight: {
update(el) {
let blocks = el.querySelectorAll("pre code");
blocks.forEach((block) => {
hljs.highlightBlock(block);
});
},
},
},
data() {
return {
content: "",
};
},
methods: {
getDocment(val) {
// 请求接口
lookDoc({ id: val }).then((res) => {
this.content = res.data.info[0].content;
});
},
// 转换markdown语法为html语法
compileMarkDown(val) {
return converter.makeHtml(val);
},
},
};
</script>
<style>
</style>
6.效果图
