<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)
  })
})

<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>

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

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