highlight.js（代码高亮插件）

官网
用法查看

核心 API

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

强调

highlight(code, {language, ignoreIllegals})

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

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

language: 语言名称，与传入的名称相同languageName，返回以保持一致highlightAuto
relevance: 表示相关性分数的整数值
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 namingclassPrefix: ''     // 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引入

<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 = 66console.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>

指令会检测到标签里边的

标签添加代码高亮

nction (el) {
let blocks = el.querySelectorAll(’ pre code’);
blocks.forEach((block) => {
highlight.highlightAll(block)
})
})


使用指令

查看全文

http://www.taodudu.cc/news/show-3752983.html

vscode写php高亮,vscode如何设置代码高亮_编程开发工具
VS Code代码高亮颜色设置
原生JS实现代码高亮功能
WordPress自动代码高亮
html文本框代码高亮,CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程
Sublime代码编辑器中代码高亮显示
JS 代码高亮插件
html语言高亮代码,实现HTML网页代码高亮的几种选择
代码高亮问题
[ 插件 ] 程序员必备的代码高亮插件 Highlight.JS
宝塔服务器删除网站缓存,使用宝塔的WordPress网站如何优化服务器缓存问题
web前端技术之CSS语言基础与页面布局（中）
前端周刊第三十七期
浙江大华前端面试题
尚硅谷前端HTML-CSS /HTML
Web前端 HTML5 入门 01
2021年最常见前端面试问题以及答案参考(持续更新...)
[前端基础] HTTP 篇
前端性能优化方向探究
Web前端HTML5前端简介
Day 21-30 :Web前端概述
http状态码400解决(Request header is too large)
前端获取接口状态码400的返回值
服务器返回状态码 400、401、403、304 的原因
接口请求异常，状态码为400 – Bad Request
HTTP：状态码400~415错误说明
前端如何获取http状态码400的返回值
【我的前端】HTTP状态码大全
HTTP 请求状态码大全
jango模板form表单action的url问题