vue使用showdown并实现代码区域高亮

前言：当我们想把makedown文档转译为html在网页上显示，并且能漂亮的展示出自己想要的网页形式，接下来我给大家介绍插件来达到我们所想要的功能。
注：下面安装及使用方式是基于vue进行滴。

1、安装showdown
npm install showdown --save

2、将showdown引入到使用的页面中

<template>
    <div v-html="htms"></div> 
</template>

<script>
import showdown from "showdown"
converter.setOption('tables', true);    // 将表格显示出来
export default {
    data() {
        return {
            htms: ""
        }
    },
    created() {
        this.setMakedown()
    },
    methods: {
        setMakedown() {
          this.htms = converter.makeHtml('# 这是一个标题')
        }
    }
}
</script>

最终展示效果

但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。

1、安装highlight
npm install highlight --save

2、 在main.js添加自定义指令

import hljs from "highlight.js"
import 'highlight.js/styles/default.css';

// 定义自定义指令 highlight 代码高亮
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

3、 将“ v-highlight ”添加到使用的div标签上

<template>
    <div v-html="htms" v-highlight></div> 
</template>

效果如下：