•  Github Star:23.4k[1]

• ? 官網(wǎng)地址[2]

Highlight.js 是什么？

Highlight.js 是一個(gè)開源的代碼高亮插件，用于在 HTML 中高亮顯示代碼塊。支持多種編程語言的代碼高亮顯示，具有自動語言檢測功能，并且可以用于任何 HTML 標(biāo)記。Highlight.js 具有零依賴、輕量級、快速執(zhí)行等特點(diǎn)，同時(shí)提供了豐富的主題和語言支持，使得代碼在網(wǎng)頁上的展示更加美觀和易于閱讀。

特點(diǎn)

• ? 多語言支持：支持超過 200 種編程和標(biāo)記語言，包括但不限于 HTML, CSS, JavaScript, Python, Ruby, Java, C++ 等。

• ? 動語言檢測：能夠自動識別代碼塊的語言，無需手動指定。

• ? 豐富的主題：提供多種預(yù)設(shè)主題，包括明亮、暗色、復(fù)古、現(xiàn)代等風(fēng)格，同時(shí)也支持自定義主題。

• ? 輕量級：庫文件體積小，加載快速，對網(wǎng)頁性能影響小。

• ? 易于使用：簡單的 API 使得在網(wǎng)頁中集成和使用非常便捷。

• ? 無依賴：不需要其他庫或框架支持，可以獨(dú)立使用。

快速開始

首先，需要引入 Highlight.js 的庫文件和 CSS 主題文件。你可以從 Highlight.js 的官方網(wǎng)站下載這些文件，或者使用 CDN 鏈接。

npm install highlight.js
# or
yarn add highlight.js

然后，需要在 HTML 中創(chuàng)建一個(gè)代碼塊，并為其指定一個(gè)語言類。

<!-- 代碼塊 -->
<pre><code class="javascript">
// 一個(gè)簡單的 JavaScript 函數(shù)
function sayHello() {
    alert('Hello, world!');
}
</code></pre>

最后，在 JavaScript 中調(diào)用 hljs.highlightAll(); 來初始化高亮顯示。

hljs.highlightAll()；

代碼塊被 Highlight.js 自動檢測并應(yīng)用相應(yīng)的語法高亮樣式。

Highlight 主題

Highlight.js 的主題可以分為兩大類：內(nèi)置主題和社區(qū)貢獻(xiàn)的主題。內(nèi)置主題通常包括如 default、github、emacs 等經(jīng)典風(fēng)格，而社區(qū)貢獻(xiàn)的主題則提供了更多的選擇和創(chuàng)新設(shè)計(jì)。

為了使用 Highlight.js 的主題，用戶需要在初始化 Highlight.js 時(shí)指定主題名稱。例如，要使用 github 主題，可以在 JavaScript 代碼中這樣設(shè)置：

hljs.initHighlighting({
  languages: ['javascript', 'css'],
  theme: 'github'
});

總結(jié)

Highlight.js 是一個(gè)流行的 JavaScript 庫，用于在網(wǎng)頁上實(shí)現(xiàn)代碼高亮顯示。它支持多種編程和標(biāo)記語言，能夠自動檢測代碼語言，并提供豐富的主題樣式。

祝好！

引用鏈接

[1] Github Star:23.4k: https://github.com/highlightjs/highlight.js
[2] 官網(wǎng)地址: https://highlightjs.org/