通过highlight.js在vue中实现代码高亮

2020-03-03 09:59:27

参考地址 通过highlight.js在vue中实现代码高亮

0. 前言

vue-cli3 项目中,通过highlight.js,实现页面中代码高亮。

请先了解highlight.js官网中的使用说明。

1. 安装

npm install highlight.js --save

2. 封装成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;

3. 全局引入自定义插件

src/main.js中:

// highlight.js代码高亮插件import Highlight from './utils/highlight'; // from 路径是highlight.js的路径,纯属自定义Vue.use(Highlight);

4. 使用

<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文件。



  • 2018-04-03 10:21:35

    jquery实时监听输入框值变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。

  • 2018-04-03 10:22:20

    JQuery如何监听DIV内容变化

    这几天在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成。$("#id").html()是获取不到我想要的内容。原因是当我们获取的时候内容还没有改变,所以获取不到,如果就想到监听这个DIV内容变化后,再来获取就个时候就能获取到了。于是产生新的问题,如何监听DIV的变化?

  • 2018-04-04 23:52:03

    PowerManager之PowerManager

    当你在做一些事情时,如果持续时间过长,那么一段时间后屏幕会灭掉,如果你想在你做这些事时屏幕始终保持点亮状态,那么你需要WakeLock的帮助。

  • 2018-04-07 23:35:16

    使用Intent传递对象的两种方式

    Intent 的用法相信你已经比较熟悉了,我们可以借助它来启动活动、发送广播、启动服务等。在进行上述操作的时候,我们还可以在Intent 中添加一些附加数据,以达到传值的效果,比如在FirstActivity 中添加如下代码:

  • 2018-04-10 14:59:59

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法),面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧

  • 2018-04-13 17:28:33

    jsoup 使用总结4--高级用法之 script js 脚本

    大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询;具体使用方法可以参考jsoup官网文档 那么你有没有实际操作过,查找script js 脚本呢,因为很多时候页面的内容是根据js动态生成的,或者数据是动态变更;那么这个时候,我们只是获取html页面中script js脚本之间的内容。