效果图
具体使用
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>