第一步:
npm install highlight.js
第二步 在mian.js中加入
// 代码高亮的js import hljs from 'highlight.js' import 'highlight.js/styles/dracula.css' //样式文件 // 定义一个全局指令 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) })
<template> <div v-highlight> <h2>java代码</h2> <pre> <code> 代码块 </code> </pre> </div> </template>