Vue-代码高亮

需求

在vue前端项目中,需要代码在界面中高亮显示.

解决方案

使用highlight.js

  1. 安装
npm install highlight.js --save
  1. 封装成Vue插件

// 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;
  1. 全局引入自定义插件
// highlight.js代码高亮插件

//在src/main.js中:

import Highlight from './utils/highlight'; // from 路径是highlight.js的路径,纯属自定义
Vue.use(Highlight);
  1. 使用

<div id="codeView" v-highlight>
    <pre><code v-html="code"></code></pre>
</div>

参考

链接


Vue      Vue

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

Vue-axios-文件上传 上一篇
Vue-elementui-实现图片预览 下一篇