markdown-it+highlight.js后端渲染的代码高亮问题解决

起因

想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果

解决过程

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

猜你喜欢

转载自blog.csdn.net/u013836242/article/details/78533563
今日推荐