优秀的编程知识分享平台

网站首页 > 技术文章 正文

Highlight.js - 前端的代码语法高亮库

nanyue 2024-10-07 11:27:52 技术文章 8 ℃

千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。

简介

Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。

安装

Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。

而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。

Highlight.js 在浏览器中可以简单的引用 CDN 来使用：

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

示例

Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行

hljs.initHighlightingOnLoad();

Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码

<pre><code>...</code></pre>

并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/styles/monokai-sublime.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/highlight.min.js"></script>
</head>
<body>
  <pre><code class="cpp">#include <iostream>

int main(int argc, char *argv[]) {

    /* An annoying "Hello World" example */
    for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;

    char c = '\n';
    unordered_map <string, vector<string> > m;
    m["key"] = "\\\\"; // this is an error

    return -2e3 + 12l;
}
  </code></pre>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</body>
</html>

该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：

可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：

我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。

document.querySelectorAll('div.code').forEach((block) => {
  hljs.highlightBlock(block);
});

在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：

// index.html
addEventListener('load', () => {
  const code = document.querySelector('#code');
  const worker = new Worker('worker.js');    // 新建Worker
  worker.onmessage = (event) => { code.innerHTML = event.data; }    // 接受渲染后的HTML
  worker.postMessage(code.textContent);    // 传递代码
});
// worker.js
onmessage = (event) => {
  importScripts('<path>/highlight.min.js');
  const result = self.hljs.highlightAuto(event.data);    // 高亮渲染
  postMessage(result.value);    // 返回HTML
};

总结

Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。

Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。

Tags：

猜你喜欢

最近发表
标签列表