亮点.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文件中找到。