通过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-19 19:15:47

    vue中methods watch和compute的区别和联系

    首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比: 1.methods和(watch/computed)的对比

  • 2020-03-19 19:50:31

    用vue做的跟随鼠标移动的div

    随鼠标移动的动画效果,之前一直使用angular和react,没怎么接触过vue,先做一个vue的简单例子,然后再整合。

  • 2020-03-20 13:35:55

    随便想到,群聊天的数据库简单设计

    拆分成两个表,一个是消息的流水表,一个是每个人的配置表。 记录每个群下面的这个用户的最后读取的消息last_msg_id,然后在计算消息未读数据。 这样优化之后数据将减少好多,数量是 m+n条数据。不在是成倍增长了。

  • 2020-03-20 13:39:50

    类似与微信朋友圈功能数据库如何实现

    每次发圈子的时候,给关注我的每个uuid,发一个内容id。 大概表的设计就是 uuid,idlist 这样的,idlist是按照时间顺序的。 然后定期删除idlist过多的老圈子。

  • 2020-03-21 00:11:38

    Android卡片布局(圆角阴影)的几种实现及分析

    在开发中,为了界面美观,圆角view和阴影效果是开发中经常遇到的UI场景,比如银行卡效果,卡片式itemView布局,Banner图等,开发中我们通过各种方式实现了这种效果,但是哪种方案最好呢,接下来本文将比较几种常见的圆角阴影布局实现,并从内存占用角度分析它们的优缺点.

  • 2020-03-21 12:05:24

    android 自定义组件,使用AttributeSet

    首先要在res/values目录下建立一个attrs.xml(名字可以自己定义)的文件,并在此文件中增加对控件的属性的定义.其xml文件如下所示:

  • 2020-03-21 12:09:59

    Android使用AttributeSet自定义控件的方法

    我们可以在attrs.xml中声明自己控件的属性,在布局xml文档中声明自己的命名空间,这时就可以对设置自己想要的值了,然后在AttributeSet这个属性中获取对应的值。好了不多说,我们来看下代码,一切尽在不言中:

  • 2020-03-22 21:16:07

    用vue做的跟随鼠标移动的div

    最近接到一个任务,就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果,之前一直使用angular和react,没怎么接触过vue,先做一个vue的简单例子,然后再整合。