highlight.js
v11.11.0 - Happy Holidays
亮點.js是用JavaScript編寫的語法熒光筆。它在瀏覽器和服務器上都可以使用。它幾乎可以使用任何標記，不取決於任何其他框架，並且具有自動的語言檢測。
內容
requireimport與往常一樣，主要版本確實包含破壞變化，可能需要用戶採取行動。請閱讀version_11_upgrade.md，以獲取破壞更改以及您可能需要採取的任何操作的詳細摘要。
有關長期支持信息，請參見Security.md。
在網頁上使用亮點的最低限度的最低限度是與其中一個主題一起鏈接到庫，並致電highlightAll ：
< link rel =" stylesheet " href =" /path/to/styles/default.min.css " >
< script src =" /path/to/highlight.min.js " > </ script >
< script > hljs . highlightAll ( ) ; </ script >這將在<pre><code>標籤的內部找到並突出顯示代碼；它試圖自動檢測語言。如果自動檢測對您不起作用，或者您只是喜歡明確檢測，則可以使用class屬性手動指定語言：
< pre > < code class =" language-html " > ... </ code > </ pre > 要將亮點造型應用於明文，而無需實際突出顯示，請使用plaintext語言：
< pre > < code class =" language-plaintext " > ... </ code > </ pre > 要完全突出顯示代碼塊，請使用nohighlight類：
< pre > < code class =" nohighlight " > ... </ code > </ pre >自動檢測語言並突出一些代碼的最低限度。
// load the library and ALL languages
hljs = require ( 'highlight.js' ) ;
html = hljs . highlightAuto ( '<h1>Hello World!</h1>' ) . value僅加載流行語言的“常見”子集：
hljs = require ( 'highlight.js/lib/common' ) ;要用特定語言突出顯示代碼，請使用highlight ：
html = hljs . highlight ( '<h1>Hello World!</h1>' , { language : 'xml' } ) . value有關require VS import用法”等的更多示例，請參見導入庫。有關highlight或highlightAuto返回的結果對象的更多信息，請參閱API文檔。
亮點.js在核心庫中支持180多種語言。還有第三方語言定義可以支持更多語言。您可以在supported_languages.md中找到支持語言的完整列表。
如果您需要對亮點的初始化進行更多控制，則可以使用highlightElement和configure函數。這使您可以更好地控制突出顯示的內容。
例如，這相當於調用highlightAll ，但要手動進行工作：
document . addEventListener ( 'DOMContentLoaded' , ( event ) => {
document . querySelectorAll ( 'pre code' ) . forEach ( ( el ) => {
hljs . highlightElement ( el ) ;
} ) ;
} ) ;請參閱文檔以configure選項。
我們強烈建議代碼塊包裝<pre><code>包裝。這是相當語義的，“只有”以零擺弄為開箱即用。可以使用其他HTML元素（或組合），但是您可能需要特別注意保留線路斷路。
假設您對代碼塊的標記使用Divs：
< div class =' code ' > ... </ div >手動強調這樣的塊：
// first, find all the div.code blocks
document . querySelectorAll ( 'div.code' ) . forEach ( el => {
// then highlight each
hljs . highlightElement ( el ) ;
} ) ;如果不使用保留線路斷路的標籤（例如pre ），則需要一些其他CSS來幫助保存它們。您也可以使用插件預處理和後處理線路斷路，但我們建議使用CSS 。
使用CSS在div內保留線路破裂：
div . code {
white-space : pre;
}有關簡單的VUE插件，請參見亮點J/VUE-Plugin，可與亮點JS一起使用。
vue-plugin在行動中的一個例子：
< div id =" app " >
<!-- bind to a data property named `code` -->
< highlightjs autodetect :code =" code " />
<!-- or literal code works as well -->
< highlightjs language =' javascript ' code =" var x = 5; " />
</ div >您可以在Web Worker內部突出顯示，以避免在處理很大的代碼時凍結瀏覽器窗口。
在您的主要腳本中：
addEventListener ( 'load' , ( ) => {
const code = document . querySelector ( '#code' ) ;
const worker = new Worker ( 'worker.js' ) ;
worker . onmessage = ( event ) => { code . innerHTML = event . data ; }
worker . postMessage ( code . textContent ) ;
} ) ;在worker.js中：
onmessage = ( event ) => {
importScripts ( '<path>/highlight.min.js' ) ;
const result = self . hljs . highlightAuto ( event . data ) ;
postMessage ( result . value ) ;
} ; 首先，您可能會通過npm或yarn安裝庫 - 請參閱獲取庫。
require需要頂級庫將加載所有語言：
// require the highlight.js library, including all languages
const hljs = require ( './highlight.js' ) ;
const highlightedCode = hljs . highlightAuto ( '<span>Hello World!</span>' ) . value對於較小的足跡，請加載我們的常見語言子集（用於我們默認的Web構建的相同集合）。
const hljs = require ( 'highlight.js/lib/common' ) ;對於最小的足跡，僅加載您需要的語言：
const hljs = require ( 'highlight.js/lib/core' ) ;
hljs . registerLanguage ( 'xml' , require ( 'highlight.js/lib/languages/xml' ) ) ;
const highlightedCode = hljs . highlight ( '<span>Hello World!</span>' , { language : 'xml' } ) . valueimport默認導入將註冊所有語言：
import hljs from 'highlight.js' ;僅導入庫和註冊所需的語言更有效：
import hljs from 'highlight.js/lib/core' ;
import javascript from 'highlight.js/lib/languages/javascript' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;如果您的構建工具處理CSS導入，您也可以直接導入主題作為模塊：
import hljs from 'highlight.js' ;
import 'highlight.js/styles/github.css' ;注意：現在，您需要安裝@highlightjs/cdn-assets軟件包，而不是highlight.js 。請參閱下載預製的CDN資產
導入庫並僅註冊您需要的那些語言：
import hljs from './assets/js/@highlightjs/cdn-assets/es/core.js' ;
import javascript from './assets/js/@highlightjs/cdn-assets/es/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;導入庫並註冊所有語言：
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js' ;注意：這些文件的路徑將根據您在項目或站點中安裝/複製它們的位置而有所不同。以上路徑只是一個示例。
您還可以使用importmap以與節點相似的方式導入：
< script type =" importmap " >
{
"imports" : {
"@highlightjs" : "./assets/js/@highlightjs/cdn-assets/es/"
}
}
</ script >在HTML中使用上述代碼。之後，您的JavaScript可以使用importmap中的命名鍵導入，例如@highlightjs ：在這種情況下：
import hljs from '@highlightjs/core.js' ;
import javascript from '@highlightjs/languages/javascript.min.js' ;
hljs . registerLanguage ( 'javascript' , javascript ) ;注意：您也可以直接從完全靜態URL中導入，例如我們自己的預構建的ES6模塊CDN資源。有關特定示例，請參見通過CDN獲取。
您可以將亮點.js作為託管或自定義構建，瀏覽器腳本或服務器模塊。開箱即用，瀏覽器腳本都支持AMD和CONCORJS，因此，如果您希望可以使用requirejs或瀏覽，而無需從源構建。服務器模塊在瀏覽中也可以很好地工作，但是可以選擇使用特定於瀏覽器的構建，而不是使用服務器的構建。
請勿直接鏈接到GitHub。圖書館不應該從源頭直接工作，需要建造。如果沒有預包裝的選項適合您，則請參考建築文檔。
在杏仁上。您需要使用優化器給模塊一個名稱。例如：
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js精選版本的亮點。 JS與許多通用語言捆綁在一起，由幾種流行的CDN託管。通過CDN使用亮點。 JS時，您可以使用子資源完整性來獲得其他安全性。有關詳細信息，請參見Digests.md。
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/dark.min.css " >
< script type =" module " >
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js' ;
// and it's easy to individually load additional languages
import go from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script src =" https://unpkg.com/@highlightjs/[email protected]/highlight.min.js " > </ script >
<!-- and it's easy to individually load additional languages -->
< script src =" https://unpkg.com/@highlightjs/[email protected]/languages/go.min.js " > </ script > < link rel =" stylesheet " href =" https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css " >
< script type =" module " >
import hljs from 'https://unpkg.com/@highlightjs/[email protected]/es/highlight.min.js' ;
// and it's easy to individually load & register additional languages
import go from 'https://unpkg.com/@highlightjs/[email protected]/es/languages/go.min.js' ;
hljs . registerLanguage ( 'go' , go ) ;
</ script >注意： CDN託管的highlight.min.js軟件包不會捆綁每種語言。它會很大。您可以在下載頁面上找到默認情況下捆綁的“常見”語言列表。
您還可以下載和自助託管與我們通過自己的CDN提供的相同資產。我們將這些構建發佈到CDN釋放的GitHub存儲庫中。您可以輕鬆地將單個文件從curl等CDN端點上取出。如果說您只需要highlight.min.js和一個CSS文件。
如果通過npm或yarn將資產拉入資產，則還有一個NPM軟件包 @righlightjs/cdn-Assets對於您的構建過程更容易。
下載頁面可以快速生成自定義的單文件縮小捆綁包，其中包括您想要的語言。
注意：與網站下載相比，從源構建可以產生稍小的構建。
我們的NPM軟件包（包括所有受支持的語言）可以使用NPM或紗線安裝：
npm install highlight.js
# or
yarn add highlight.js還有另一個NPM軟件包 @righlightjs/cdn-asset，其中包含預構建的CDN資產，包括可以在瀏覽器中導入的ES6模塊：
npm install @highlightjs/cdn-assets
# or
yarn add @highlightjs/cdn-assets另外，您可以從源構建NPM軟件包。
當前的源代碼始終在GitHub上可用。
node tools/build.js -t node
node tools/build.js -t browser :common
node tools/build.js -t cdn :common有關更多信息，請參見我們的建築文檔。
亮點。 JS可用於所有現代瀏覽器，目前支持Node.js版本。您將需要以下軟件來為核心庫做出貢獻：
亮點.js根據BSD許可發布。有關詳細信息，請參見我們的許可證文件。
圖書館的官方網站是https://highlightjs.org/。
API和其他主題的進一步深入文檔是在http://highlightjs.readthedocs.io/上。
核心團隊和貢獻者的列表可以在貢獻者.md文件中找到。
