起因
想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果
解决过程
- 首先查看markdown-it,毕竟这样一个大插件没有自带的highlight效果可能性很小,Ctrl+F搜索后发现了相关代码,发现了,后端直接赋值。
- 复制的代码要用到highlight.js,npm安装之。
- 完了发现,没有效果!查看代码,发现确实添上了highlight.js的类了啊,咋回事儿呢?
- 各种看相应的文档,百度搜相应的题目,最后还是回归原点,猜吧可能是没有应用相关的样式,添了类也没用,试试吧——BootCDN搜highlight.js找css样式引入到页面上去,成功了,有样式了。
- 同时还可以看不同风格的highlight.js的demo,选一个喜欢的风格引入
- 其实npm安装后,node_modules里highlight.js文件夹里面就有各种css文件,可是该咋用呢?文档里好像没写啊?目前我没用之前说的CDN,而是直接link引入本地路径调用的。如果有知道怎么用的同学请务必告诉我!
- 引入highlight.js的样式后与之前的GitHub样式文件背景色有冲突,想在不改变样式文件的情况下改变背景色的话,代码如下,不过刷新时代码部分会闪动,还不如直接改了样式文件算了
window.onload = function () {
document.styleSheets[0].cssRules[117].style.backgroundColor="";
}