前端页面插曲代码块 highlight.js

 

 

第一步：

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>