highlight.js（代码高亮插件）-六虎

highlight.js（代码高亮插件）

官网
用法查看

核心 API

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

强调

highlight(code, {language, ignoreIllegals})

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

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

language: 语言名称，与传入的名称相同languageNamapprovee，返回以保持一致highlighthttps域名Auto
relevance: 表示相关安全期计算器性分数的整数值
value: 带有高亮标记的html是什么意思 HTML 字符串
top：当前模式堆栈的顶部
illegal: boolean 表示是否发现任何非法匹配
co安全教育平台登录入口de：原始原始代码

高亮自动

highlightAuto(code, languageSubset)

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

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

language: 检测到的语言
relevance: 表示相关性分数的整数值
value: 带有高亮标记的 HTML 字符串
secondBest：具有相同结构安全工程师的对象，用于第二好的启发式检测语言（可能不存在）

高亮元素

highlightElement(element)

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

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

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

高亮全部

将突出显示应用于页面上匹配配置的所有元素cssSelector。默认cssSelector值为，它突出显示所有代码块。这可以在页面事件触发之前或之后调用。'pre code'``onlo安全教育日ad

配置

configure(options)

配置全局选项：

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

以指定名称将html标签新语言添加到库中html简单网页代码。主要在内部使用。

langu字符型变量ageName: 一个带有被注册语言名称的字符串
languageDefinitappointmention: 一个函数，它返回一个表示语言定义的对象。该函数被传递给hljs对象，以便能够使用其中定义的常用正则表达式。

注销语言

unregisterLanguage(languageName)

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

languaghtml5eName: 带有被删除语言名称的字符串。

注册别名

registerAliases(alias|aliases, {languageName})

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

alias|aliases: 已注册别名的字符串或数组
languageName: 指定的语言名称registerLa安全教育平台nguage。

列表语言

返回语言名称列appearance表。

获取语言

getLanguage(name)

按名称或别名查找语言。

如果找到，则返回语言对象，undhtml个人网页完整代码eapplefined否则返回。

版本字符串

versionString

以字符串形式返回完整的 Highlight.jhttps和http的区别s 版本，即："11.0.1".

安全模式

safeMode()

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

调试模式

debugMode()

启用调试/开发模式。

警告

这种模式故意让 Hhtml文件怎么打开ighlight.js 更加脆弱！它应该只用于测试和本地开发（语言或库html5本身）appearance。

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

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

已弃用的 API

强调

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

highlight(languageName, code)

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

高亮块

*11.html是什么意思0 版后已弃用：*请highlightElement()改用。

初始化高安全期计算器亮

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

initHighlightingOnLoad

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

简单实用

CDN引入字符间距怎么加宽

<link rel="stylesheet"      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

实用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/androidstudio.min.css">
</head>
<body>
    <pre><code class="nohighlight">
        let a = 66
        console.log(a)
    </code></pre>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js">
    </script>
    <script>hljs.highlightAll();</script>
</body>
</html>

效果

在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)
  })
})

使用指令

 <article v-highlight v-html="markdown"></article>

指令会检测html个人网页完整代码到标签里边的

标签添加代码高亮

highlight.js（代码高亮插件）