vue 中 用showdown預覽markdown文件，並用highlight.js 實現代碼高亮

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