vue使用showdown並實現代碼區域高亮

前言：當咱們想把makedown文檔轉譯爲html在網頁上顯示，而且能漂亮的展現出本身想要的網頁形式，接下來我給你們介紹插件來達到咱們所想要的功能。
注：下面安裝及使用方式是基於vue進行滴。

一、安裝showdown
npm install showdown --save

二、將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>

最終展現效果

可是這時有個問題出現，若是咱們去添加代碼塊兒時，代碼是統一顏色，代碼塊也沒有背景色，同時也沒有高亮樣式，接下來咱們解決代碼沒有高亮問題。

一、安裝highlight
npm install highlight --save

二、 在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)
  })
})

三、 將「 v-highlight 」添加到使用的div標籤上

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

效果以下：