「主题改造」Typecho使用highlight.js代码高亮实现代码行号-Eswlnk Blog
智能摘要 AI
本文介绍了如何在博客中实现代码高亮并添加行号。首先，使用highlight.js对代码进行高亮处理，确保不会产生解析冲突。接着，通过编写一个函数`addLineNumber`，将每行代码包裹在一个带有行号data属性的span标签中，并更新DOM。最后，添加CSS样式美化行号，使其居中显示且不可选中。此方法适用于大多数代码展示需求，但需注意行号宽度的调整以适应大量代码行数的情况。

前言

自开始写博客主题以来，代码高亮的行号问题一直让我颇为头疼。记得初学前端时，我曾尝试过一些方法，比如利用代码行的固定高度来创建一个伪元素，并通过脚本生成大量行号内容，然后利用内容溢出剪切来实现行号。不过最近，我注意到一些博客主题开始增加了代码行号，这让我又燃起了研究这个功能的兴趣。

「主题改造」Typecho使用highlight.js代码高亮实现代码行号-Eswlnk Blog

教程

首先，我们需要确保代码已经被highlight.js进行了高亮处理，这样可以避免在添加行号时产生解析冲突。

highlight.js的基本使用如下：

import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';

// 注册代码语言解析
hljs.registerLanguage('javascript', javascript);

// 对DOM元素进行代码高亮
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});

接下来，我们观察了一些已经实现代码行号的网页的HTML结构，发现它们给每行代码都添加了一个带有自定义data属性的span标签，该属性的值即为行号。

基于这个发现，我们可以编写一个函数来添加行号：

function addLineNumber(codeDom) {
  codeDom.classList.add("code-block-extension-code-show-num");
  const codeHtml = codeDom.innerHTML;
  const lines = codeHtml
    .split("\n")
    .map((line, index) => {
      return `<span class="code-block-extension-code-line" data-line-num="${index + 1}">${line}</span>`;
    })
    .join("\n");
  codeDom.innerHTML = lines;
}

这个函数首先获取到代码的HTML文本，然后通过split(“\n”)将其转换成数组。这样，数组中的每个元素就代表一行代码。接着，我们使用map函数遍历数组，并为每一行代码添加一个带有行号data属性的span标签。最后，我们使用join将数组重新转换成HTML文本，并更新DOM。

接下来，我们添加一些CSS样式来美化行号：

.code-block-extension-code-line {
  background-color: inherit;
}

.code-block-extension-code-line::before {
  content: attr(data-line-num);
  color: gray;
  user-select: none;
  background-color: inherit;
  text-align: center;
  display: inline-block;
  width: 18px;
  padding: 0 10px;
  box-sizing: content-box;
  position: sticky;
  left: 0;
}

这种方法基本上可以满足大部分代码展示的需求。不过需要注意的是，行号的宽度是固定的18px，如果你的代码行数非常多，可能需要调整这个宽度。