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