highlight.js使用探索_highlight.js用法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_37548620/article/details/106734830

1、基本用法

highlight.js作为BSD协议开源的插件，可以用在html中将我们的code进行高亮，而且非常漂亮，官方网站：
https://highlightjs.org/
该插件支持180种code语言高亮。
从官网勾选好支持的语言后进行下载，https://highlightjs.org/download/
在这里插入图片描述
默认的选项支持的语法已经差不多够用，点击Download。

下载后是一个压缩包，解压
在这里插入图片描述

styles 有各种语法样式css定义。
highlight.pack.js 即为网页中可嵌入执行的js。定义了许多可用的函数。

官方教程在html头部增加几行引用：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

然后在body中用以下块标识把需要高亮的代码包起来就可以了，其中class标识了代码块要使用的语法，可以省略让脚本自动识别。class取值参考SUPPORTED_LANGUAGES.md

<pre><code class="html">...</code></pre>

写一个简单的html测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>highlight test</title>
    <link rel="stylesheet" href="./highlight/styles/default.css">
    <script src="./highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <pre>
        <code class="python">
#!/usr/bin/env python3

if __name__=="__main__":
    print("hello hightlightjs ...")

        </code>
    </pre>

</body>
</html>

用浏览器打开视图如下：
在这里插入图片描述
我们更改一下style，换成

<link rel="stylesheet" href="./highlight/styles/vs2015.css">

视图如下：
在这里插入图片描述
我们发现highlight.js的基本用法还是很简单的。

2、highlight.js doc

我们从找到github托管代码帮助文档：https://highlightjs.readthedocs.io/en/latest/building-testing.html
在这里插入图片描述
这里有更详细的使用指导说明。
源码路径：https://github.com/highlightjs/highlight.js

Library API
Highlight.js导出一些函数作为hljs对象的方法。

1、highlight(languageName, code, ignore_illegals, continuation)
核心高亮功能。参数：语言名称或别名、要高亮显示的代码字符串。使用ignore_illegals参数且为true时，即使检测到该语言的语法错误也不抛出异常，也强制高亮显示完成。continuation参数表示一个可选模式，在未完成解析时使用堆栈，如果使用该参数，则函数将从该状态重新开始解析，而不是初始化一个新的状态。在内部用于子语言支持。

注意：续行符并不支持逐行高亮显示，因为不能要求语法以特殊方式处理换行符。语法很有可能具有一次匹配多个行的单个模式/正则表达式。这完全取决于语法。

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

language：语言名称，与传入的languageName参数名称相同，为保持一致而返回highlightAuto
relevance：表示相关度的整数值
value：带有高亮显示标记的HTML字符串
top：当前模式堆栈的顶部
illegal：布尔值，表示是否找到任何非法匹配项
code：原始代码

highlightAuto(code, languageSubset)
通过语言检测高亮显示。参数：需要高亮显示的代码字符串、可选的语言名称和别名数组。这些语言名称和别名将检测范围限制为给定的几种语言。也可以使用configure设置子集，但是如果设置，则本地参数将覆盖该选项。

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

language：检测到的语言
relevance：表示相关度的整数值
value：带有高亮显示标记的HTML字符串
second_best：具有第二种启发式检测语言的相同结构的对象（可能不存在）

fixMarkup(value)
高亮显示的标记的后处理。当前包括替换缩进TAB字符并使用
标签代替换行符。使用configure来配置全局选项。

接受带有高亮显示的标记的字符串。

highlightBlock(block)
将高亮显示的代码应用于包含代码的DOM节点。

此功能是在页面加载后或在第三方Javascript框架的初始化代码内动态应用高亮显示的功能。

该功能默认情况下使用语言检测，但是您可以class在DOM节点的属性中指定语言。有关所有可用的语言名称和别名，请参见class reference。

configure(options)
配置全局选项：

tabReplace：用于替换缩进中的TAB字符的字符串。
useBR：用于<br>在输出中生成标签而不是换行符的标志，当使用非<pre>容器标记代码时很有用。
classPrefix：在生成的标记中的类名称之前添加的字符串前缀，用于与样式表向后兼容。
languages：语言名称和别名的数组，将自动检测限制为仅这些语言。
languageDetectRe：用于配置CSS类名称如何映射到语言的正则表达式（允许使用诸如color-as-php之类的类名称与language-php等的默认类名称）
noHighlightRe：一个正则表达式，用于配置要完全跳过哪些CSS类。
接受一个代表带有更新值的选项的对象。其他选项不变

hljs.configure({
  tabReplace: '    ', // 4 spaces
  classPrefix: ''     // don't append class prefix
                      // … other options aren't changed
});
hljs.initHighlighting();