如何在 vue 中实现代码高亮?
# 安装highlight.js依赖
npm install highlight.js --save
1
# 在 main.js 文件中导入
import hljs from 'highlight.js' //导入代码高亮文件
// import 'highlight.js/styles/monokai-sublime.css' //导入代码高亮样式
// import 'highlight.js/styles/tomorrow-night.css' //导入代码高亮样式
import 'highlight.js/styles/tomorrow.css' //导入代码高亮样式
1
2
3
4
2
3
4
# 在 main.js 文件中自定义指令
//自定义一个代码高亮指令
Vue.directive('highlight',function (el) {
let highlight = el.querySelectorAll('pre code');
highlight.forEach((block)=>{
hljs.highlightBlock(block)
})
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 在 vue 文件中使用
<template>
<div v-highlight v-html="content"></div>
</template>
1
2
3
2
3
至此,已经成功实现了代码高亮。
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13