在vue2 中使用highlightjs、实现代码高亮、显示代码行数。

0、准备工作

1、引入hightlightjs， 自行npm

npm install highlight.js --save

2、下载hightlightjs-line-number.js 由于 要在vue2中使用 显示行号所以要使用改进版、以下链接会说明原由 gitee.com/zhou-jian-g…

下载完成后可以放入到 /assets/js/highlight-line-number 中

1、在vue2项目中使用

main.js 中加入 highlight.js

// 代码高亮
import 'highlight.js/styles/atom-one-dark.css'
import VueHighlightJS from 'vue-highlightjs'
import Vue from 'vue'
​
// 使用 HighlightJS
Vue.use(VueHighlightJS)

2、在你的页面文件中加入下列代码

import hljs from "highlight.js/lib/core";
import {lineNumbersBlock} from "@/assets/js/highlight-line-number";
​
methods: {
    // 显示代码行数
    updateLineNumbers() {
      // 搜索pre、code元素进行高亮和行号添加
      let blocks = this.$el.querySelectorAll('pre code');
      blocks.forEach((block) => {
        //高亮
        hljs.highlightElement(block)
        //添加行号
        lineNumbersBlock(block)
      })
    }
},
  watch: {
    // 监听 highlightedCode 数据的变化
    highlightedCode: {
      handler(newCode) {
        this.$nextTick(() => {
          // 使用 $nextTick 来确保 DOM 更新完毕后再执行
          this.updateLineNumbers();
        });
      },
      deep: true, // 深度监听对象内部的变化
    },
  },
  mounted() {
    this.updateLineNumbers(); // 初始化时生成行号
  }

即可实现随着你代码的更新重新生成行号。

3、修改行号的样式

最后可以根据下列类样式修改行号的样式。这是在 highlight_line_number highlight.js中 实现的在重新生成元素的过程中添加 class

/*修改行号列样式*/
.hljs-ln-numbers {
  text-align: center;
  color: #ccc;
  border-right: 1px solid #CCC;
  vertical-align: top;
  padding-right: 5px !important;
​
  /* your custom style here */
}
​
/* 修改代码列样式 */
.hljs-ln-code {
  padding-left: 5px !important;
}