经过一番努力，我写了一篇技术分享文章，贴了一堆代码，愉快地发布到了我的博客网站上。 原来代码全是白底黑字，而且字体又丑，瞬间就失去了兴趣。 能否像IDE一样通过语法高亮来炫酷地展示网页呢？ 看一下 .js，看看这个语法突出显示库如何照亮您的代码。
.js
介绍
.js是互联网上.js组织的开源前端代码语法高亮库。 代码仓库当前版本为10.1.0。 它不依赖于任何框架，自带大量编程语言和标记语言的语法高亮规则以及主流的高亮配色方案，并且可以自由扩展。 它支持自动语言检测，使用极其方便，是网页语法高亮的最佳选择。
.js 语法高亮库
安装
.js CSS文件的选择决定了高亮配色方案，默认为 ，也有 、Ocean、Dark等经典主流配色方案。
而JS文件的选择决定了可以支持的语言。 主要的.min.js中包含了一些主流语言，包括C++、XML、Java等，如果需要其他语言，则需要另外参考该语言对应的JS文件。
.js 只需在浏览器中引用 CDN 即可使用：
例子
.js使用非常简单，引用CSS和JS后，执行
hljs.initHighlightingOnLoad();.js 会自动查找网页中 pre 标签包裹的代码和代码
...
并自动检测代码语言并进行高亮渲染。 我们还可以将语言名称的类添加到代码标签中，以显式标记代码语言。 我们可以看一个使用示例，注意实际代码中尖括号等HTML转义字符需要转义：
#include
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 > m;
m["key"] = "\\"; // this is an error
return -2e3 + 12l;
}
此网页使用 C++ 语言片段的语法突出显示主题：
使用 .js 渲染 C++ 代码
可以看到关键字、注释、字面值都用不同的颜色渲染出来，输出的效果非常漂亮。 以下是将主题渲染为代码的示例：
使用.js渲染代码
我们也可以不使用 pre 和 code 标签来包装代码，而是使用自定义容器来代替。 使用时我们需要注意换行和等宽字体。
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});
渲染大量代码时，为了避免浏览器卡顿，可以使用Web后台渲染：
// 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('/highlight.min.js');
const result = self.hljs.highlightAuto(event.data); // 高亮渲染
postMessage(result.value); // 返回HTML
};
总结
.js可以非常方便地在前端页面进行语法高亮，为网页显示的代码增添色彩和活力。
.js 拥有详细的文档和简洁的设计，为编写新的语言支持和配色方案提供了很大的支持，并且具有很强的定制能力和可扩展性。 .js代码包含了各种语言的语法分析以及不同配色方案的设计。 对于对编程语言和语法高亮领域感兴趣的开发人员来说，这是一个宝贵的宝库。
好了，今天的主题就讲到这里吧，不管如何，能帮到你我就很开心了，如果您觉得这篇文章写得不错，欢迎点赞和分享给身边的朋友。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
