vue 中 用showdown预览markdown文件，并用highlight.js 实现代码高亮

showdownGithub地址： https://github.com/showdownjs/showdown

在vue项目中，通过showdown 实现markdown文件的预览，highlight.js实现代码块的sql语句高亮。

1.安javascript教程装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.请求后端接口中的数据，并使用。

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
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

6.效果图