太神奇了，仅使用彩色字体实现代码高亮

文章预览

通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如 Prism [1] 或 highlight.js [2] 这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过 CSS 样式改变代码颜色。 但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样 那么，有没有办法可以在不改变页面 HTML 结构的情况下高亮一段代码呢？ 其实也是有的，之前写过一篇文章，可以利用 CSS Custom Highlight API [3] 实现纯文本的代码高亮，有兴趣的可以回顾之前这篇文章 原生 CSS Custom Highlight 终于来了~ XboxYan，公众号：前端侦探 原生 CSS Custom Highlight 终于来了~ 虽然叫做“CSS Custom Highlight API”，但还是有大量 JS 脚本运行，因为需要通过 JS 去手动匹配那些关键词，只是不需要额外创建标签而已。 现如今，又有一种方式可以实现代码高亮了，仅仅只需要引入 ………………………………