理想技术网 - highlight.js 2024-04-22T10:01:00+08:00 Typecho https://im1.cc/feed/atom/tag/highlight-js/ <![CDATA[Typecho 使用highlight.js代码高亮如何实现代码行号?]]> https://im1.cc/Typecho/3.html 2024-04-22T10:01:00+08:00 2024-04-22T10:01:00+08:00 admin https://www.im1.cc
  1. 下载 highlight.js
  2. 首先,从 highlight.js 官方网站 下载 highlight.js 库的最新版本。
  3. 将 highlight.js 添加到您的主题或插件中:
    将 highlight.js 的 CSS 和 JavaScript 文件添加到您的 Typecho 主题或插件中。您可以将这些文件放在主题的目录中,或者在 Typecho 插件中进行引用。
  4. 在页面中引入 highlight.js在您的页面模板文件中,通过 Link 和 script 标签引入 highlight.js 的 CSS 和 JavaScript 文件。
  5. 初始化 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>
  1. 样式调整:
    根据您的需求,您可能需要调整 highlight.js 的样式以适应您的主题风格。
  2. 保存更改:
    保存您对模板文件的更改并刷新页面,以查看代码高亮和行号是否正常显示。
  3. 通过这些步骤,您应该能够在 Typecho 中使用 highlight.js 实现代码高亮并显示代码行号。

请注意,确保您的主题或插件正确引入 highlight.js 并按照上述步骤进行设置。

]]>