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