Typecho 使用highlight.js实现代码高亮并添加行号的方法

引言

在技术博客或文档网站中，代码展示是不可或缺的一部分。良好的代码高亮不仅能提升阅读体验，还能帮助读者更好地理解代码结构。Typecho作为一款轻量级的博客系统，默认并不提供完善的代码高亮功能。本文将详细介绍如何在Typecho中使用highlight.js实现代码高亮，并添加实用的行号功能，让你的技术文章更加专业。

为什么选择highlight.js

在众多代码高亮库中，highlight.js因其以下优势成为开发者的首选：

• 轻量高效：压缩后仅几十KB，加载速度快
• 支持广泛：支持185种编程语言和89种样式主题
• 自动检测：能自动识别代码语言，无需手动指定
• 易于集成：简单的几行代码即可实现功能
• 开源免费：MIT许可证，可自由使用和修改

基础集成方法

1. 引入highlight.js资源

首先，我们需要在Typecho的模板文件中引入highlight.js的核心文件。通常编辑header.php或footer.php文件：

<!-- 引入highlight.js核心CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

<!-- 引入highlight.js核心JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<!-- 可选：引入特定语言支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>

2. 初始化highlight.js

在页面底部添加初始化代码：

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });
});
</script>

实现行号功能

基础的高亮功能虽然简单，但缺乏行号这一重要特性。下面介绍几种实现行号的方法：

方法一：使用highlightjs-line-numbers.js插件

这是官方推荐的添加行号方式：

1. 引入插件JS文件：

   <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

2. 修改初始化代码：

   <script>
   document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
        hljs.lineNumbersBlock(block);
    });
   });
   </script>

3. 添加CSS样式（可选）：

   .hljs-ln-numbers {
    text-align: center;
    color: #ccc;
    border-right: 1px solid #999;
    vertical-align: top;
    padding-right: 5px;
   }

方法二：纯CSS实现行号

如果你不想引入额外JS文件，可以使用CSS计数器：

pre {
    counter-reset: line-numbering;
    padding-left: 3.5em !important;
}

pre code::before {
    content: counter(line-numbering);
    counter-increment: line-numbering;
    padding-right: 1em;
    width: 2em;
    text-align: right;
    opacity: 0.5;
    display: inline-block;
    position: absolute;
    left: 0;
}

方法三：自定义JavaScript实现

对于需要更多控制的情况，可以自行实现：

function addLineNumbers(preElement) {
    const lines = preElement.innerHTML.split('\n');
    let html = '';
    lines.forEach((line, i) => {
        html += `<span class="line-number">${i + 1}</span>${line}\n`;
    });
    preElement.innerHTML = html;
}

document.querySelectorAll('pre').forEach(addLineNumbers);

高级配置与优化

1. 主题选择

highlight.js提供了多种主题，可以通过更换CSS文件来切换：

<!-- 例如使用github主题 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">

2. 性能优化

• 按需加载语言：只引入你需要的语言文件
• 异步加载：使用async属性加载JS
• CDN回退：添加本地回退方案

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
if (typeof hljs === 'undefined') {
    document.write('<script src="/path/to/local/highlight.min.js"><\/script>');
}
</script>

3. 与Markdown解析器配合

Typecho默认使用Markdown解析器，确保代码块被正确包裹在<pre><code>标签中。可以在文章中使用以下格式：

```javascript
// 你的代码
function hello() {
    console.log("Hello, world!");
}
```

4. 响应式调整

在小屏幕上调整行号显示：

@media (max-width: 768px) {
    .hljs-ln-numbers {
        display: none;
    }
}

常见问题解决

1. 行号不对齐

解决方案：

• 确保代码块和行号使用等宽字体
• 调整CSS中的padding和margin

pre code {
    font-family: 'Courier New', monospace;
    tab-size: 4;
}

2. 空行计数问题

如果需要忽略空行，可以修改JavaScript：

hljs.lineNumbersBlock(block, {
    singleLine: false,
    startFrom: 1,
    ignoreEmptyLines: true
});

3. 与Typecho编辑器的冲突

如果发现编辑器中的代码也被高亮，可以使用更精确的选择器：

document.querySelectorAll('.post-content pre code').forEach((block) => {
    hljs.highlightElement(block);
});

结论

通过本文的介绍，你应该已经掌握了在Typecho中使用highlight.js实现代码高亮并添加行号的完整方法。总结一下关键步骤：

1. 引入highlight.js核心文件和所需语言文件
2. 选择合适的行号实现方案（插件、CSS或自定义JS）
3. 根据需求进行样式和功能定制
4. 注意性能优化和响应式设计

行号功能虽然看似简单，但对于阅读复杂代码、教学讲解和错误定位都非常有帮助。highlight.js以其轻量和易用的特点，成为Typecho博客代码高亮的理想选择。通过适当的定制，你可以打造出既美观又实用的代码展示效果，提升博客的专业性和用户体验。

最后，建议定期更新highlight.js版本以获取最新的语言支持和安全更新，同时备份你的自定义配置，以便在升级后快速恢复。