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.效果图
