在VueCli中使用highlight.js实现代码高亮

效果图

具体使用

1、npm安装

下载所需要的js包

npm install highlight.js

使用

修改main.js

import Vue from 'vue'
import App from './App.vue'

// 代码高亮的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)
  })
})


Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

在页面中使用

在需要进行代码高亮的div上加上 v-highlight 指令即可

<template>
  <div v-highlight>
     <h2>java代码</h2>
    <pre>
        <!-- class="java" 也可以不加，会自动识别，但会有点差别 -->
        <code>
            @Test
            void testGetAll(){
                List stus = stuService.queryAllStu();
                stus.forEach(e -> {
                    System.out.println(e);
                });
            }
        </code>
    </pre>
    <h2>C#代码</h2>
    <pre>
        <code class="c#">
            //在panel中打开指定窗体，调用该方法时，只需传入一个窗体对象即可
            private void OpenFrm(Form frm)
            {
                frm.TopLevel = false;//取消非顶级窗体
                frm.WindowState = FormWindowState.Maximized;//将窗体最大化
                frm.FormBorderStyle = FormBorderStyle.None;//设为无边框
                frm.Parent = this.palParent;//指定该窗体的父窗体
                frm.Show();//展示窗体115
            }
        </code>
    </pre>
  </div>
</template>

<script>

export default {
  name: "App"
};
</script>

<style>

</style>