在前端开发中，我们常常需要在网页中展示代码片段，为了提高代码的可读性，代码高亮是必不可少的。Vue.js 是一个流行的前端框架，它提供了许多方便的方法来实现代码高亮。本文将介绍如何在 Vue.js 中使用 highlight.js 实现代码高亮。
什么是 highlight.js？
highlight.js 是一个 JavaScript 库，它能够将代码片段高亮显示。高亮效果非常漂亮，它支持多种编程语言，并且能够根据不同的编程语言添加不同的样式。highlight.js 可以很容易地集成到 Vue.js 中，使得我们可以在 Vue.js 应用程序中轻松地实现代码高亮。
使用 highlight.js 实现代码高亮
为了使用 highlight.js，我们需要先引入该库。可以通过 CDN 或下载代码库的方式引入 highlight.js：
<!-- 通过 CDN 引入 highlight.js --> <script src="https://cdn.jsdelivr.net/npm/highlight.js@10.5.0/build/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.5.0/styles/github.min.css">
# 通过 npm 安装 highlight.js npm install highlight.js
然后，我们需要在 Vue.js 组件中引用并初始化 highlight.js：
-- -------------------- ---- -------
------ ---- ---- --------------
------ --------------------------------
------ ------- -
--------- -
-- --- ------------
-----------------------------
-- --------------
---------------------------------------------------
-
-在组件的 mounted() 钩子函数中使用 initHighlightingOnLoad() 方法，可以使 highlight.js 自动识别需要高亮的代码块，并应用相应的样式。如果需要手动指定需要高亮的代码块，可以使用 highlightBlock() 方法。
接下来，我们需要在 Vue 组件中定义一个包含代码的 pre 和 code 标签，然后将其传递给 highlight.js。例如：
-- -------------------- ---- -------
----------
---------- ------------- ---- ---------------
-----------
--------
------ ------- -
------ -
------ -
----- --------- ------------ -
------------------- --------
--
-
--
--------- -
------------------------------------
-
-
---------在这个例子中，我们通过 data() 方法将代码传递给组件，并将代码块包含在 pre 和 code 标签中。然后，在 mounted() 钩子函数中使用 highlightBlock() 方法，将代码块传递给 highlight.js 库，让它高亮显示。
定制样式
highlight.js 支持多种编程语言，并为每种编程语言提供了默认的样式。如果您想要自定义样式，可以通过覆盖默认的样式来实现。在这个例子中，我们使用了 Github 风格的样式。如果您想要使用其他样式，可以在 highlight.js 官方网站上找到并下载。
总结
Vue.js 提供了许多方便的方法来实现代码高亮，其中使用 highlight.js 是一种非常简单而有效的方法。在本文中，我们介绍了如何在 Vue.js 中使用 highlight.js 让代码高亮显示，并提供了完整的代码示例和样式定制方法。希望这篇文章对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e81da48841e9894e351fb