Robi.Run
登入

有想到什麼再寫什麼，沒想到什麼就算了

highlight.js的使用方式

2024-11-03 20:58 by @robi

highlight.js 是一個強大的 JavaScript 程式碼高亮顯示庫，可以將你的程式碼片段以美觀且易於閱讀的方式呈現，讓你的網站或文件更具吸引力。本文將詳細介紹 highlight.js 的使用方式，涵蓋安裝、配置、使用與自訂。

1. 安裝 highlight.js

你可以透過以下三種方式安裝 highlight.js：

  • CDN: 最簡單的方法是使用 CDN，只需在你的 HTML 文件的 <head> 區域添加以下程式碼：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  • 其中，default.min.css 是預設的樣式檔案，你也可以選擇其他樣式，例如 github.min.css。
  • npm: 如果你的專案使用 npm 管理，可以使用以下指令安裝：
npm install highlight.js
  • 安裝後，需要在你的 JavaScript 文件中匯入 highlight.js：
import hljs from 'highlight.js';

hljs.highlightAll();
  • yarn: 如果你的專案使用 yarn 管理，可以使用以下指令安裝：
yarn add highlight.js
  • 安裝後，需要在你的 JavaScript 文件中匯入 highlight.js：
import hljs from 'highlight.js/lib/highlight.js'; 

hljs.highlightAll();

2. 配置 highlight.js

highlight.js 支援許多自訂選項，讓你調整程式碼高亮顯示的樣式和行為。以下是一些常用的配置選項：

  • 樣式選擇: highlight.js 提供了多種預設的樣式，你可以根據自己的喜好選擇，例如 default.min.css、github.min.css、atom-one-dark.min.css 等。
  • 語言支援: highlight.js 預設支援多種程式語言，你可以在安裝後使用 hljs.getLanguage 檢查支援的語言列表。如果需要額外的語言支援，可以透過以下步驟添加：
    1. 從 highlight.js 的網站下載所需語言的語法檔案。
    2. 將語法檔案放置在專案的適當位置。
    3. 在你的 JavaScript 文件中使用 hljs.registerLanguage 方法註冊語言。
  • 其他選項: highlight.js 還提供其他選項，例如：
    • ignoreUnescapedHTML: 是否忽略未轉義的 HTML 標籤 (預設為 true)。
    • useBR: 是否使用 <br> 標籤換行 (預設為 false)。
    • tabReplace: 使用哪個字元替換 \t (預設為 '\t')。

3. 使用 highlight.js

安裝並配置好 highlight.js 後，就可以輕鬆地使用它來高亮顯示程式碼了。

  • 自動高亮顯示: 使用 hljs.highlightAll() 方法可以自動高亮顯示所有 pre 標籤中的程式碼。
  • 手動高亮顯示: 如果你需要手動控制高亮顯示的程式碼片段，可以使用 hljs.highlightBlock() 或 hljs.highlightElement() 方法。
  • 使用 hljs.highlightAuto() 自動辨識語言: 如果你的程式碼片段沒有指定語言，可以使用 hljs.highlightAuto() 方法自動辨識語言。

4. 範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlight.js Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>

    <h1>程式碼高亮顯示範例</h1>

    <pre><code>
    // 這是 JavaScript 程式碼
    function hello() {
        console.log("Hello, world!");
    }
    </code></pre>

    <pre><code class="python">
    # 這是 Python 程式碼
    def greet():
        print("Hello, world!")
    </code></pre>

</body>
</html>

5. 總結

highlight.js 是一個功能強大且易於使用的 JavaScript 程式碼高亮顯示庫，可以讓你的網站或文件中的程式碼片段更具吸引力。本文介紹了 highlight.js 的安裝、配置、使用和自訂方法，幫助你快速上手。

希望這篇文章能幫助你瞭解 highlight.js 的使用方式，讓你輕鬆地將程式碼高亮顯示添加到你的網站或文件中。

以上內容由gemini產生。

提示