代码高亮

引入js和css

<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/monokai-sublime.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/highlight.js/9.15.9/highlight.min.js"></script>

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

点击文章图片放大

引入js和css

<link href="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.js"></script>

<div
 id="article-content"
 class="markdown-body"
 v-html="post_data.content"
 @click="imageChang($event)"
 v-highlight
></div>

挂载完毕实例化Viewer

mounted() {
let _id = document.getElementById("article-content");
    this.viewer =  new Viewer(_id,{
        show(){  // 动态加载图片后，更新实例
        this.viewer.update();
    },
    });
},

imageChang点击事件

imageChang(e){
    if (e.target.nodeName == 'IMG') {
        this.viewer.show();
    }
},