点亮代码，让阅读焕然一新——Highlight.js助你实现代码高亮，再添行数功能

2023-09-27 12:31:54

代码高亮与行数添加：使用 Highlight.js 和 LineNumber.js

在软件开发的世界里，清晰易懂的代码至关重要。代码高亮和行数添加功能可以显著提高代码的可读性，让程序员更轻松地理解和导航代码库。本文将介绍两种流行的工具：Highlight.js 和 LineNumber.js，以及如何使用它们为代码增添色彩和行数。

Highlight.js：代码高亮神器

Highlight.js 是一款轻量级 JavaScript 库，可以让你的代码焕然一新。它支持超过 200 种编程语言，包括 JavaScript、Python、C++ 和 Java。Highlight.js 的安装非常简单，可以通过 CDN 或 npm 来完成。

安装 Highlight.js

CDN 方式：

<link rel="stylesheet" href="https://unpkg.com/highlight.js/styles/default.css">
<script src="https://unpkg.com/highlight.js/lib/highlight.min.js"></script>

npm 方式：

npm install highlight.js

使用 Highlight.js

安装完成后，只需要将以下代码添加到 HTML 页面即可：

<pre><code class="language-javascript">
function sayHello(name) {
  console.log("Hello, " + name + "!");
}
sayHello("John");
</code></pre>

其中，class="language-javascript" 指定了代码的语言类型。Highlight.js 会根据指定类型自动应用合适的颜色主题。

LineNumber.js：行数显示助手

LineNumber.js 是一个 JavaScript 插件，可以为代码添加行数，方便阅读和调试。它提供了两种添加行数的方法：通过 CSS 或插件。

通过 CSS 添加行数

pre {
  counter-reset: line-number;
}
pre code {
  counter-increment: line-number;
}
pre code::before {
  content: counter(line-number);
  min-width: 2em;
  display: inline-block;
  text-align: right;
  margin-right: 0.5em;
  color: #ccc;
}

通过插件添加行数

CDN 方式：

<link rel="stylesheet" href="https://unpkg.com/line-number.js/dist/line-number.min.css">
<script src="https://unpkg.com/line-number.js/dist/line-number.min.js"></script>

npm 方式：

npm install line-number.js

使用 LineNumber.js

<pre><code class="language-javascript" data-line-numbers>
function sayHello(name) {
  console.log("Hello, " + name + "!");
}
sayHello("John");
</code></pre>

结语

Highlight.js 和 LineNumber.js 是两个非常有用的工具，可以极大提高代码的可读性。Highlight.js 让你可以为代码添加色彩，而 LineNumber.js 让你可以添加行数。将这两个工具结合起来使用，你就可以轻松地创建既美观又易读的代码。

常见问题解答

1. 为什么需要对代码进行高亮？

代码高亮可以帮助区分代码中的不同元素，如变量、函数和。这使得代码更容易阅读和理解。

2. Highlight.js 可以支持哪些语言？

Highlight.js 支持超过 200 种编程语言，包括 JavaScript、Python、C++、Java 和 HTML。

3. 如何为代码添加多行注释？

在代码中使用 /* 和 */ 来包围多行注释。

4. 如何使用 LineNumber.js 为代码添加行数？

可以使用 CSS 或插件来为代码添加行数。使用 CSS 的方法比较简单，但使用插件的方法提供了更多控制选项。

5. 是否可以使用其他工具来高亮代码？