在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();//显示tableconverter.setOption("tables", true);
3.在methods中创建方法
methods: {//转换markdown为html语言    compileMarkDown(val) {      return converter.makeHtml(val);
    },
 }
4.请求后端接口中的数据，并使用。
<div v-html="compileMarkDown(content)"></div>
5.实现代码高亮
// 安装highlight.jsnpm 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.效果图

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