在 vue 中 使用 highlight 和 highlightjs-line-number，实现代码高亮及行号

在 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,

然后我们在按照官网上的步骤