博客优化

为什么我从Prism.js变心到Highlight.js了?

publish-date 2024-07-04
update-date 2024-11-16
# WordPress

排雷

本文纯属个人观点,主观性极强,存在片面性和局限性,请谨慎参考

契机

刚弄完prism.js,还在无尽地优化中呢,转头就变心了,我受不了无止境地填写metabox里的lang-xxx了!
就不能自动检测吗?我是真的很懒诶……

转机

找啊找啊,也没找到我看得懂的方法,倒是看到了有相同困扰的人们在GitHub上的吐槽,原来懒鬼不止我一个!
不过看大家说highlight.js就有自带的语言检测功能诶!

纠结

虽然我都懒得再尝试一个新工具了,还有狗屁的沉没成本在阻止着我尝试,还有恶魔的低语一直在我耳边念叨着:

“prism.js能用不就好了吗,好不容易弄出来的不是吗?”
“不就是手打几千遍lang-xxx嘛,将就一下不就好了嘛?”

但还是忍不了,忍不了一点!

“要打你打!反正老子不打了!”

于是又开始新一轮的尝试……然后……

变心

虽然我是为了内置的自动检测语言功能来的,可是它有github-dark主题诶!
看了眼,仿佛就是我的VSCode再现!这谁忍得了啊!反正我忍不了了!
prism.js的主题试看,每次选择后都得滚到最底下才看得到效果,我找了好久才找到,用户体验烂爆了!
而highlight.js专门做个了页面提供主题试看诶!超级直观!用户体验棒呆了好嘛!

心动

highlight.js做得到,但prism.js做不到的:

  1. 自动检测语言
    未来的文章再也不用一遍遍地手动加额外的CSS类了!
    过去的文章不用管,什么都不用做,也会自动高亮!
  2. 支持github-dark等几百个主题
  3. 提供方便的主题试看
  4. 官方网站设计得更现代、导航更清晰、用户体验更好
  5. 下载页面提供实时搜索,虽然prism也能用Ctrl+F查找,但用户体验的确有差距
    更贴心的是搜索栏下有很清晰直观的 Selected Languages: xml×css×php×
    让我不禁想起了之前用prism.js时troubleshoot了半天,
    最后发现php不显示的原因是下载时以为自己勾选了其实没勾选的噩梦般的回忆……
    吃过苦头,才能更加体会到这些细节设计得这么贴心是件多么伟大的事啊!
    虽然用不上时不以为意、习以为常,在其实在不知不觉中替你省下了超多可能会被浪费的时间啊!

冷静

当然也存在弊端:

  1. prism.js下载时可选各种好用的插件,比如Copy按钮,highlight.js得自己想办法
  2. prism.js就两个文件,highlight.js解压后的文件很多很吓人,技术白痴的我真的看不懂
  3. prism.js自动覆盖了我用的主题的默认代码区块样式,highlight.js需要我手动做点啥