highlight.js：優雅的代碼語法高亮工具

一、基本介紹

highlight.js是一款用Javascript編寫的代碼語法高亮工具。使用它可以為你的頁面提供優雅的代碼呈現，高亮展示出不同編程語言的關鍵字、注釋、變數等內容。目前，highlight.js支持超過185種編程語言的代碼高亮，同時提供了多種配色方案供你選擇。

以下是一個基本的highlight.js使用實例：

//引入highlight.js
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

//使用highlight.js對代碼進行高亮
<script>
  hljs.highlightAll();
</script>

//需要高亮的代碼段
<pre><code class="html">
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/body&gt;
  &lt;/html&gt;
</code></pre>

上述代碼片段中，我們引入了highlight.js的樣式與Javascript文件，並在需要進行高亮的代碼段中使用了pre和code標籤，並使用highlight.js的核心方法highlightAll()對代碼進行高亮。代碼高亮後的效果如下圖所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

二、主要特性

除了基本的代碼高亮外，highlight.js還擁有許多其他特性，包括：

1、自動檢測語言

在使用highlight.js時，你無需手動指定代碼使用的編程語言，highlight.js會自動檢測語言類型並進行相應的高亮展示。

<script>
  hljs.highlightAll();
</script>

<pre><code>
  const greeting = "Hello, World!";
  console.log(greeting);
</code></pre>

上述代碼片段中，我們沒有明確指定代碼段中使用的編程語言，但highlight.js會自動檢測其為Javascript，並進行高亮展示。即使代碼段中混有其他語言的關鍵字或變數，highlight.js也能正常識別並高亮。

2、代碼行號

有時候我們需要為代碼段添加行號，highlight.js也提供了這樣的功能。

<pre class="hljs linenums"><code>
  const greeting = "Hello, World!";
  console.log(greeting);
</code></pre>

代碼段中的class屬性值hljs linenums指定了此處需要添加行號。效果如下：

 1 const greeting = "Hello, World!";
 2 console.log(greeting);

3、自定義樣式

除了默認的樣式外，highlight.js還允許你自定義樣式，以更好地適應你的網站設計。

//自定義highlight.js的樣式
<link rel="stylesheet" href="styles/myStyle.css">

注意：上述代碼中href屬性值應為你的自定義樣式表的路徑。

三、常見問題

1、對於某種編程語言的支持不完備

雖然highlight.js已經支持了許多編程語言，但仍有可能遇到某種編程語言的高亮展示不完整的情況。在這種情況下，你可以自己編寫該語言的語法規則，並加入highlight.js的規則庫中。

2、無法高亮展示某些語言特有的語法

對於某些特殊的語言特有的語法，highlight.js可能無法正確高亮展示。在這種情況下，你可以使用自定義插件或者fork highlight.js並自行修改實現的方式，以滿足自己的需求。

四、小結

通過本文我們了解了highlight.js的基本介紹、主要特性以及常見問題，同時也學會了如何在網頁中使用highlight.js進行代碼高亮展示，相信這對於各類網站或應用程序的開發都有很大的幫助。

原創文章，作者：MDJNH，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/371651.html