通过highlight.js在vue中实现代码高亮
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在 vue-cli3 项目中,通过highlight.js,实现页面中代码高亮。
请先了解highlight.js官网中的使用说明。
一、安装
npm install highlight.js --save
二、封装成vue插件
新建highlight.js文件,并添加:
// src/utils/highlight.js 文件路径,纯属自定义
// highlight.js 代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night.css'; // 代码高亮风格,选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件
let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
// 自定义指令 v-highlight
Vue.directive('highlight', {
// 被绑定元素插入父节点时调用
inserted: function(el) {
let blocks = el.querySelectorAll('pre code');
for (let i = 0; i < blocks.length; i++) {
Hljs.highlightBlock(blocks[i]);
}
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated: function(el) {
let blocks = el.querySelectorAll('pre code');
for (let i = 0; i < blocks.length; i++) {
Hljs.highlightBlock(blocks[i]);
}
}
})
};
export default Highlight;
三、全局引入自定义插件
在src/main.js中:
// highlight.js代码高亮插件
import Highlight from './utils/highlight'; // from 路径是highlight.js的路径,纯属自定义
Vue.use(Highlight);
四、使用
<div id="codeView" v-highlight>
<pre><code v-html="code"></code></pre>
</div>
code是代码的字符串形式,比如:
“0x0000000000400da0 <+0>:\tpush\t%rbx\n0x0000000000400da1 <+1>:\tcmp\t$0x1,%edi\n0x0000000000400da4 <+4>:\tjne\t0x400db6 <main+22>\n”
更换更多的代码高亮风格,需要切换highlight.js中导入的css文件。
五、效果展示
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)