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



  • 2020-03-06 22:28:05

    git中submodule子模块的添加、使用和删除

    执行成功后,git status会看到项目中修改了.gitmodules,并增加了一个新文件(为刚刚添加的路径) git diff --cached查看修改内容可以看到增加了子模块,并且新文件下为子模块的提交hash摘要 git commit提交即完成子模块的添加

  • 2020-03-09 21:34:48

    Android TV 包安装成功后找不到启动图标

    生成APK文件,用U盘插入到小米盒子上,然后点击安装,提示安装成功。 可是找不到启动图标,安装成功的弹窗也没有打开的选项。 而我之前测试装的一款手机应用是可以找到启动图标的。

  • 2020-03-09 21:37:10

    安卓Tv端App开发与手机端的开发的区别

    因为大部分电视机的配置一般都比手机低,但是电视机一般都是用来看视频的,所以在做视频解码的时候,因为电视机配置比较低,所以大多数手机运行流畅的播放器在电视机上面都会卡顿,或者出现一些其他的问题,经过我同事长时间的测试,认为百度播放器跟小米播放器比较适合电视机作为播放器开发使用。如果你们要选择一个播放器,要先拿一个demo去很多台不同类型的电视机去测试,因为网络上面的播放器在电视机卡的真的很多,先测试好了再使用可以节约大家的时间。

  • 2020-03-09 22:11:39

    聊聊真实的 Android TV 开发技术栈

    智能电视越来越普及了,华为说四月发布智能电视跳票了,一加也说今后要布局智能电视,在智能电视方向,小米已经算是先驱了。但是还有不少开发把智能电视简单的理解成手机屏幕的放大,其实这两者并不一样。