安装highlight.js依赖

npm install highlight.js --save

在 main.js 文件中导入

import hljs from 'highlight.js' //导入代码高亮文件
// import 'highlight.js/styles/monokai-sublime.css'  //导入代码高亮样式
// import 'highlight.js/styles/tomorrow-night.css'  //导入代码高亮样式
import 'highlight.js/styles/tomorrow.css'  //导入代码高亮样式

在 main.js 文件中自定义指令

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

在 vue 文件中使用

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

至此，已经成功实现了代码高亮。