【vue】vue 使用highlight.js的坑:highlight效果经常没有了

本文介绍了在Vue项目中遇到highlight.js代码高亮效果消失的解决过程。作者通过在Vue-cli项目中手动引入highlight.js,并在main.js中配置相关代码,解决了路由切换后高亮失效的问题。问题的关键在于vue-router切换后,highlight.js的渲染方法未重新执行。最终,通过调整代码实现了代码高亮的正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,我说下我为啥会遇到这个吭。。。。

项目如下:https://github.com/guosimin/data-management  , 当然如果给我来个star,我会很开心的。

1.我用的是vue-cli 搭建的前端项目

2.我的内容来源是csdn中的博文,而博文里面用到的代码通过调用highlight.js实现的

3.原本我可以考虑通过Selenium爬取调用后的结果,这样样式能正常显示就行,然而Selenium的效率真的不敢恭维。。

4.最后决定在页面调用highlight.js实现和csdn网站上一样的效果

 

如果没看过我项目,那其实上面的都是废话,不过你有时间,也可以看看。我这里先说解决方法:

1.首先,页面总得引入hightlight包吧,本来想和网上一下教程那样用 npm install hightlight... 然鹅,npm没有找到hightlight。。。。所以我们用最原始的方式,我直接把它写到了index.html里面了。

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 

2.如果用的 vue-cli 搭建的,那我们打开router目录找到main.js,然后写入以下代码。( 注意hightlight会在pre标签下co

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值