Highlight.js是用JavaScript编写的语法突出显示工具。它在浏览器和服务器上均可使用。它几乎可以与任何标记一起使用,不依赖于任何框架,并且具有自动语言检测功能。
本站下载:
页底文件来源于Github,于2019年11月19号下载。
- 185种语言和90种样式
- 自动语言检测
- 多语言代码突出显示
- 可用于node.js
- 适用于任何标记
- 与任何js框架兼容
如何使用?
来源于: https://highlightjs.org/usage/
入门
在网页上使用Highlight.js的最低要求是将链接到库以及其中一种样式并调用 initHighlightingOnLoad
:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
这将在<pre><code>
标签内找到并突出显示代码;它会尝试自动检测语言。如果自动检测对您不起作用,则可以在class
属性中指定语言:
<pre><code class="html">...</code></pre>
支持的语言和相应类的列表。
类也可以使用language-
或作为前缀lang-
。
要使任意文本看起来像代码,但不突出显示,请使用 plaintext
此类:
<pre><code class="plaintext">...</code></pre>
要完全禁用突出显示,请使用nohighlight
类:
<pre><code class="nohighlight">...</code></pre>
自定义初始化
当需要对Highlight.js的初始化进行更多控制时,可以使用highlightBlock
和configure
函数。这可以让你控制什么突出和时。
这是initHighlightingOnLoad
使用普通JS 调用的等效方法:
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
您可以使用任何标签代替<pre><code>
标记代码。如果您不使用保留换行符的容器,则需要配置highlight.js以使用<br>
标记:
hljs.configure({useBR: true});
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});
有关其他选项,请参阅的文档configure
。
网络工作者
您可以在网络工作者中运行突出显示功能,以避免在处理非常大的代码块时冻结浏览器窗口。
在您的主脚本中:
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.pack.js');
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
};
Node.js
您可以在节点上使用highlight.js突出显示内容,然后再将其发送到浏览器。确保使用该.value
属性获取格式化的html。有关返回的对象的更多信息,请参考api docs https://highlightjs.readthedocs.io/en/latest/api.html
// require the highlight.js library including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value
// require the highlight.js library without languages
const hljs = require("highlight.js/lib/highlight.js");
// separately require languages
hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
// highlight with providing the language
const highlightedCode = hljs.highlight('html', '<span>Hello World!</span>').value
获取图书馆
您可以将Highlight.js作为托管或自定义构建的浏览器脚本或作为服务器模块来获取。即开即用的浏览器脚本同时支持AMD和CommonJS,因此,如果您希望可以使用RequireJS或Browserify,而无需从源代码进行构建。服务器模块也可以与Browserify完美配合,但是可以选择使用特定于浏览器的版本,而不是用于服务器的版本。前往下载页面以获取所有选项。
不要直接链接到GitHub。该库不应直接从源头工作,它需要构建。如果没有任何预包装的选项对您有效,请参考建筑文档。
CDN托管的软件包没有所有的语言。否则它将太大。如果您在“通用”部分中没有看到所需的语言,则可以手动添加:
<script
charset="UTF-8"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/languages/go.min.js"></script>
在杏仁上。您需要使用优化器为模块命名。例如:
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
普通JS
您可以将Highlight.js导入为CommonJS模块:
npm install highlight.js --save
在您的应用程序中:
import hljs from 'highlight.js';
默认导入会导入所有语言!因此,仅导入所需的库和语言可能会更有效:
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
要设置语法突出显示样式,如果构建工具从JavaScript入口点处理CSS,则可以将样式表直接导入到CommonJS模块中:
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';
执照
Highlight.js是在BSD许可下发布的。有关详细信息,请参见LICENSE文件。