特色图像来源于公共领域

[s201_bai id="16"]

时间回到4月份的这篇文章,这时已经开始在站上分享一些编程中学习到的知识,发现的技巧。这种有大段的代码需要分享时的场合,代码高亮就显得非常重要。当时还不太熟悉Wordpress的运作原理,就没有太多折腾,直接使用了非常有历史的SyntaxHighlighter作为高亮代码的工具。然而这个简便的插件也有非常多的问题:

  • 支持的语言特别少,Typescript虽然有额外的Typescript Brush插件可以选择,但是效果极差,类型断言都没有高亮的,完全就是当Javascript来整。这对于主要使用TS的我来说简直不能忍受。
  • 高亮主题不好看,或者说是特别的old school。我连Eclipse的默认高亮都换成VSCode了,更不要说网页上的代码高亮了。(其实就是看VSCode看久了

快三个月过去了,时代变了。在做了一系列插件和短代码后,终于有了足够的基础用一些Javascript库了,比如说highlight.jsPrism.js

因为React官网也在用Prism.js就直接选择Prism了。但是更多的原因时Prism.js有一些花花绿绿的插件特别讨人喜欢。当然,highlight.js有更广泛的样式,也支持用Worker处理大段的代码,或许以后有需要的时候会把highlight.js也融合进来。

在介绍如何在本站使用Prism.js之前,先来看一段显示样例吧!

[code lang="tsx" src="https://cdn.jsdelivr.net/gh/YukiCat-Dev/FacePack/src/FaceSelector/component/FaceView.tsx" show_lang=true][/code]