Vue进阶（幺伍叁）：Vue-highlight 实现代码高亮_vue heightlight(1)

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

除了引入Vue-highlight.js文件外，还需要引入样式文件highlight.js。vue-highlight.js只是实现了代码高亮的功能，安装包里是没有css样式文件，因此我们还需要安装一个highlight.js来实现真正的样式。

二、安装

npm install --save vue-highlightjs

三、引用

在我们的入口文件main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

我们使用的是atom-one-dark.css这个样式文件，可以根据highlight.js网上的面配色自定义展示效果。也可以看项目中安装的highlight.js中的文件去看是否具备这个样式表。

四、使用

因为已经实现了vue的组件指令化，所以使用起来非常简便。

<!-- 1.如果你需要高亮的代码是一个变量值，那么你可以这样使用它。 其中 sourcecode 为变量。 -->
<pre v-highlightjs="sourcecode"><code></code></pre>

<!-- 2.如果你需要高亮的代码固定的源代码，那么你可以这样使用它。 -->
<pre v-highlightjs><code>const s = new Date().toString()</code></pre>

五、拓展阅读

• hignlight.js官网
• highlight.js demo
• vue-highlightjs github
• 自定义插件官方文档
• 自定义指令官方文档

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

片转存中…(img-2OoOjREk-1715841768248)]
[外链图片转存中…(img-ZVMx3HUQ-1715841768249)]