html pre标签增加行号,vue使用highlight.js 添加行号

效果图

1587719278(1).jpg

main.js

import hljs from "highlight.js";

import "highlight.js/styles/atom-one-dark.css"; // 样式文件

Vue.directive("highlight", function(el) {

console.log("自定义指令", el);

let blocks = el.querySelectorAll("pre code");

blocks.forEach(block => {

console.log(block.innerHTML, "block是", block);

try {

let str = block.innerHTML;

let lang = "js";

// 得到经过highlight.js之后的html代码

const preCode = hljs.highlight(lang, str, true).value;

// 以换行进行分割

// const lines = preCode.split(/\n/).slice(0, -1);

const linesLength = preCode.split("
").length;

// 生成行号 aria-hidden 对浏览器语义化隐藏