共计 1963 个字符，预计需要花费 5 分钟才能阅读完成。
前言
在之前的文章 Pandoc Markdown 转换为 HTML 格式代码块手动指定语言 PHP 修复 中我最后将代码转换为了
<pre><code class="language-html">...</code></pre>highlightjs 官方指定的标准代码块格式的HTML代码. 但是我依旧发现在我之前一些博文中的代码, 没有被很好的高亮显示. 我发现如明明指定了
<code class="language-conf" , 代码块在经过 highlightjs 高亮转换后 在 pre 的标注中
<pre class="hljs language-css". 我通过在浏览器控制台调用 hljs.listLanguages() . 发现是 highlightjs
并没有注册的我标注的语言导致的.
ps: 实际上并不存在 conf 这个语言… 这只是个后缀…🤣 我给想当然了.
highlight.js 介绍
highlight.js 是一个在 HTML 高亮代码块的由 JavaScript 所编写的脚本插件,拥有 支持192 种语言和 496 个主题, 自动语言检测, 用于任何 HTML 标记, 零依赖等特点
highlight.js 官网 | highlight.js 文档
官方提供了 cdn, 文件引入, 包导入的方式安装. 由于 highlight.js 提供了192种编程语言的代码高亮方式 以及496个主题. 但往往在页面中用不到这么多种编程语言, 也只会用一两个主题. 所以 采用模块化的方式安装.
采用如果是JavaScript应用采用包管理的方式可以动态在代码中导入这些包. 但如果是 php 这种服务器渲染的页面, 只能用cdn, 或是本地资源文件导入. cdn中的 highlight.js 默认支包含了常用编程语言的代码高亮.
更多的我们会想用自定义网站需要提供语言的代码高亮.
highlight.js 官网 官方提供了这个下载界面可以选择自定义需要高亮的语言, 自行勾选. 以下我主要介绍这中安装方法.
以下是从官网选择自定义语言后下载的压缩包解压后的目录结构.
.
├── DIGESTS.md
├── es
│ ├── core.js
│ ├── core.min.js
│ ├── highlight.js
│ ├── highlight.min.js
│ └── package.json
├── highlight.js
├── highlight.min.js
├── languages
│ ├── bash.min.js
│ ├── c.min.js
│ ├── cpp.min.js
│ ├── csharp.min.js
| ...
├── LICENSE
├── package.json
├── README.md
└── styles
├── a11y-dark.css
├── a11y-dark.min.css
...其中 目录下 highlight.min.js 即为包含所有选择语言的代码高亮代码. styles 目录下可以选择一款主题的css样式导入, 只需要这两个文件.
主题
highlight.js 主题演示 在这个页面中可以查看 highlight.js 所有主题的常用语言高亮效果.
highlight.js 使用
当选择好主题后, 以下是 highlight.js 常用使用的演示.
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="/lib/highlight/theme.min.css">
</head>
<body>
<pre>
<code class="language-javascript">
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
return (
<div>
<web-component>{block}</web-component>
</div>
)
}
</code>
</pre>
<script src="/lib/highlight/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>总结
主要是我在导入时不太理解, 不太了解 highlight 的文件导入方式. 以及一大堆主题文件和语言min文件, 试了半天才发现那些都不用管. 只需要 theme.min.css 和 highlight.min.js 文件.
