在 vue 中 使用 highlight 和 highlightjs-line-number,实现代码高亮及行号
前景:
在使用vue开发博客的时候,希望实现博客代码的高亮,以及行号显示。
话不多说,直接看效果
要实现代码高亮,和行号显示,可谓是重重困阻,
首先:
在vue中使用 highlightjs-line-number 报错,无法使用
提示:
windon.hljs 找不到
为此困扰了半天,所有的环境都以配好,以依赖包也没有问题,到底问题出在哪里呢?
为此我特意研究了一下highlightjs-line-number源码,发现里面使用windown作为全局变变量,
而 highlightjs-line-number 中的windown 是无法获取到windown对象的,
于是乎便想到了两种解决方案:
1. vue静态文件夹中的index中引入,这个相对简单,只需要将两个文件导入,再操作对应的放法就可以了
2. 我们修改源码,虽然这么一听,看着挺高大上的,但是实际操作很简单,
我们第一步要,从github中找到highlightjs-line-number对应的源码并下载 地址我已找好,点我即可将进入,
第二步呢,就是要吧我们刚刚下载的源码复制并保存到我们的项目中,如图:
第三步:我在在刚才的文件中引入 import hljs from "highlight.js"; 并将文静中的 w.hljs 替换为 hljs,
然后我们在按照官网上的步骤