highlight.js（代码高亮插件）

highlight.js（代码高亮插件）官网用法查看核心 API

Highlight.js 将一些函数导出为hljs对象的方法

强调highlight(code, {language, ignoreIllegals})复制代码

核心高亮功能。接受代码以突出显示（字符串）和选项列表（对象）。该language参数必须存在并指定用于突出显示的语法的语言名称或别名。这ignoreIllegals是一个可选参数，即使在检测到语言的非法语法而不是抛出异常的情况下，真正强制突出显示完成时也是如此。

返回具有以下属性的对象：

language: 语言名称，与传入的名称相同languageName，返回以保持一致highlightAutorelevance: 表示相关性分数的整数值value: 带有高亮标记的 HTML 字符串top：当前模式堆栈的顶部illegal: boolean 表示是否发现任何非法匹配code：原始原始代码高亮自动highlightAuto(code, languageSubset)复制代码

使用语言检测突出显示。接受带有要突出显示的代码的字符串和一个可选的语言名称和别名数组，将检测限制为仅这些语言。也可以使用 设置子集configure，但如果设置了本地参数，则会覆盖该选项。

返回具有以下属性的对象：

language: 检测到的语言relevance: 表示相关性分数的整数值value: 带有高亮标记的 HTML 字符串secondBest：具有相同结构的对象，用于第二好的启发式检测语言（可能不存在）高亮元素highlightElement(element)复制代码

将突出显示应用于包含代码的 DOM 节点。

此函数用于在页面加载后或在第三方 JavaScript 框架的初始化代码中动态应用突出显示。

该函数默认使用语言检测，但您可以在classDOM 节点的属性中指定语言。有关所有可用的语言名称和范围，请参阅范围参考。

高亮全部

将突出显示应用于页面上匹配配置的所有元素cssSelector。默认cssSelector值为，它突出显示所有代码块。这可以在页面事件触发之前或之后调用。’pre code’“onload

配置configure(options)复制代码

配置全局选项：

classPrefix: 在生成的标记中类名之前添加的字符串前缀，用于向后兼容样式表。languages：一组语言名称和别名，将自动检测限制为仅这些语言。languageDetectRe: 一个正则表达式，用于配置 CSS 类名如何映射到语言（允许类名，例如color-as-php与language-php的默认值等）noHighlightRe：一个正则表达式，用于配置要完全跳过哪些 CSS 类。cssSelector: 一个 CSS 选择器，用于配置受hljs.highlightAll. 默认为.’pre code’ignoreUnescapedHTML：不要在控制台中记录有关代码块中未转义 HTML 的警告throwUnescapedHTML“HTMLInjectionError:当highlightElement被要求突出显示包含未转义 HTML 的内容时抛出

接受一个对象，该对象表示具有要更新的值的选项。其他选项不变

hljs.configure({ noHighlightRe: /^do-not-highlightme$/i, languageDetectRe: /\bgrammar-([\w-]+)\b/i, // for `grammar-swift` style CSS naming classPrefix: ” // don’t append class prefix // … other options aren’t changed});复制代码注册语言registerLanguage(languageName, languageDefinition)复制代码

以指定名称将新语言添加到库中。主要在内部使用。

languageName: 一个带有被注册语言名称的字符串languageDefinition: 一个函数，它返回一个表示语言定义的对象。该函数被传递给hljs对象，以便能够使用其中定义的常用正则表达式。注销语言unregisterLanguage(languageName)复制代码

从库中删除一种语言及其别名。主要在内部使用。

languageName: 带有被删除语言名称的字符串。注册别名registerAliases(alias|aliases, {languageName})复制代码

languageName为在key下定义的指定语言名称添加新的语言别名或别名。

alias|aliases: 已注册别名的字符串或数组languageName: 指定的语言名称registerLanguage。列表语言

返回语言名称列表。

获取语言getLanguage(name)复制代码

按名称或别名查找语言。

如果找到，则返回语言对象，undefined否则返回。

版本字符串versionString复制代码

以字符串形式返回完整的 Highlight.js 版本，即：”11.0.1″.

安全模式safeMode()复制代码

启用安全模式。这是默认模式，为生产使用提供最可靠的体验。

调试模式debugMode()复制代码

启用调试/开发模式。

警告

这种模式故意让 Highlight.js 更加脆弱！它应该只用于测试和本地开发（语言或库本身）。

例如，如果一个新版本突然出现了只影响一种语言的严重错误（或重大更改）：

在安全模式下，所有其他语言都会继续突出显示。损坏的语言将显示为代码块，但没有任何突出显示（就好像它是纯文本一样）。在调试模式下，所有突出显示都会停止，并且会抛出 JavaScript 错误。已弃用的 API强调

*10.7 版后已弃用：*这将在 v12 中完全删除。

highlight(languageName, code)复制代码

请参阅上面显示的较新 API。

高亮块

*11.0 版后已弃用：*请highlightElement()改用。

初始化高亮

*10.6 版后已弃用：*请highlightAll()改用。

initHighlightingOnLoad

*10.6 版后已弃用：*请highlightAll()改用。

简单实用CDN引入复制代码实用示例 Document let a = 66 console.log(a) hljs.highlightAll();复制代码

效果

在vue中使用

安装

yarn add –dev highlight.js复制代码

使用

//引入样式import ‘highlight.js/styles/monokai-sublime.css’//引入库import his from ‘highlight.js’//创建指令Vue.directive(‘highlight’, function (el) { let blocks = el.querySelectorAll(‘ pre code’); blocks.forEach((block) => { highlight.highlightAll(block) })})复制代码

使用指令

复制代码

指令会检测到标签里边的

标签添加代码高亮

复制代码