- 下载 highlight.js
- 首先,从 highlight.js 官方网站 下载 highlight.js 库的最新版本。
- 将 highlight.js 添加到您的主题或插件中:
将 highlight.js 的 CSS 和 JavaScript 文件添加到您的 Typecho 主题或插件中。您可以将这些文件放在主题的目录中,或者在 Typecho 插件中进行引用。 - 在页面中引入 highlight.js在您的页面模板文件中,通过 Link 和 script 标签引入 highlight.js 的 CSS 和 JavaScript 文件。
- 初始化 highlight.js在页面加载完成后,使用 JavaScript 初始化 highlight.js。您可以使用以下代码示例:
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
6.启用代码行号:
若要显示代码行号,您可以在初始化 highlight.js 时,添加 line-numbers 类到代码块的 pre 标签中。例如:
<pre><code class="language-html line-numbers">
<!-- Your code here -->
</code></pre>
- 样式调整:
根据您的需求,您可能需要调整 highlight.js 的样式以适应您的主题风格。 - 保存更改:
保存您对模板文件的更改并刷新页面,以查看代码高亮和行号是否正常显示。 - 通过这些步骤,您应该能够在 Typecho 中使用 highlight.js 实现代码高亮并显示代码行号。
请注意,确保您的主题或插件正确引入 highlight.js 并按照上述步骤进行设置。
]]>