在前端开发中，代码高亮库是一项必不可少的工具。现在，有一个叫做 highlightjs-turbolinks 的 npm 包，它是基于 Highlight.js 的一个 Turbolinks 插件，能够让我们在 Turbolinks 5+ 加载的网页中使用 Highlight.js，使代码高亮更流畅。
本文将会介绍 highlightjs-turbolinks 的使用方法，并附带详细的示例代码和学习指导意义。
安装 highlightjs-turbolinks
使用 npm 命令安装 highlightjs-turbolinks：
npm install highlightjs-turbolinks
在 Turbolinks 中使用 Highlight.js
在 Turbolinks 中使用 highlightjs-turbolinks 很容易，只需要引入 Highlight.js 和 highlightjs-turbolinks 即可：
-- -------------------- ---- -------
------
----- ---------------- --------------------------------------------------------------------
-------
------
-------- ----------------------
----- -------------
--- -----------
---- ------- -------
---
-------
----------
------- -----------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
--------
--------------------
---------
-------在上面的代码示例中，我们首先以 CDN 的方式引入 Highlight.js，然后在 body 的底部引入 highlightjs-turbolinks，最后在 JavaScript 中调用 hljs.highlightAll() 来对页面中的代码进行高亮。
当然，我们也可以使用 npm 包管理器在 JavaScript 模块中引入 Highlight.js 和 highlightjs-turbolinks：
import hljs from 'highlight.js';
import 'highlightjs-turbolinks';
document.addEventListener('turbolinks:load', () => {
hljs.highlightAll();
});以上代码的含义是，在 Turbolinks 加载完成后，执行 hljs.highlightAll() 来对页面中的代码进行高亮。
学习指导意义
使用 highlightjs-turbolinks 的过程中，我们不仅仅可以实现代码高亮的功能，还可以对其中涉及到的一些技术进行深入学习。
Highlight.js
Highlight.js 是一个易于使用的 JavaScript 代码语法高亮库。它支持大量编程语言，并且可以自定义主题、插件和语言等。
在学习 Highlight.js 的过程中，我们不仅可以了解语法高亮的实现原理，还可以通过其开放的 API 自行编写插件、优化主题等。
Turbolinks
Turbolinks 是一个用于加速 Rails 应用的库。它通过使用 AJAX 来代替网页的全页面刷新，从而提升用户体验和性能。
在学习 Turbolinks 的过程中，我们不仅可以学习到如何使用 AJAX 进行页面加载，还可以深入了解前端性能优化、体验设计等相关知识。
结论
借助 highlightjs-turbolinks，我们可以轻松地在 Turbolinks 中使用 Highlight.js，实现代码高亮，并且在使用的过程中学习到涉及到的一些前端知识。
如果你正在开发 Rails 应用，并且想要提升用户体验和性能，那么 highlightjs-turbolinks 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc2eb