Prism代码高亮不支持非Code标签？教你修改实现完美适配！

别慌！这篇文章就是帮你解决这个“卡脖子”问题的——我们从Prism的核心原理入手，手把手教你修改正则匹配规则，调整选择器范围，甚至用几行简单代码写个小插件，让Prism不仅能识别Code标签，任何你指定的标签里的代码都能精准高亮。不管你是想让pre直接带高亮，还是让div里的代码自动着色，跟着步骤走，5分钟就能搞定。

解决Prism的“标签偏见”，让代码展示挣脱的束缚？这篇文章帮你一次实现，从此代码怎么放、高亮就怎么来！

你有没有过这种情况？用Prism做博客的代码高亮，想把代码放进div或者自定义组件里，结果刷新页面一看，代码全是白花花的 plain text，连个颜色都没有？我去年帮做技术博客的朋友调过这个问题——他用Vue写了个代码展示组件，把代码包在标签里，结果Prism根本不认，急得他半夜找我吐槽：“我明明加了language类，怎么就是不亮？”后来我帮他查了Prism的文档，才发现问题出在“Prism的‘搜索雷达’只盯着标签”。

为什么Prism默认只认Code标签？先搞懂它的“底层逻辑”

要解决问题，得先知道Prism是怎么“工作”的。其实Prism的核心逻辑特别简单——它就像个“代码块侦探”，页面加载的时候，会先跑一遍querySelector，找那些“带language-类名的标签”。比如你写console.log('hello')，它一眼就能看见，然后把里面的内容拿过来，按照JavaScript的语法规则加颜色。但要是你把换成

Prism.selector = 'div[class="language-"], code[class="language-"]';

Prism.selector = 'app-code[class="language-"], code[class="language-"]';

mounted() {
 Prism.highlightElement(this.$el); // this.$el就是标签本身
}

function CodeBlock({ language, code }) {
 const ref = useRef(null);
 useEffect(() => {
 if (ref.current) {
 Prism.highlightElement(ref.current);
 }
 }, 
);
 return 
<div ref="{ref}" classname="{language-${language}}>{code}

}

这样组件挂载或者code变化的时候，都会手动调用高亮，动态生成的代码也能亮起来。

第三步：用“懒人表格”快速选对选择器——我整理的常用场景

为了让你不用每次都查文档，我把常见的标签和对应的选择器整理成了表格，直接抄就行：

比如你用Svelte写了个组件，渲染后是，那selector就写成svelte-code[class=”language-“]，直接抄表格里的“自定义组件”行就行，根本不用动脑子。

测试和避坑：我踩过的3个“坑”，你别再犯

改完之后，别着急上线，得测试几个场景——我去年帮朋友调的时候，踩过3个坑，你可以避过去：

坑1：别漏掉class里的“language-”前缀

Prism识别语言的时候，是靠class里的“language-”前缀的。比如你写class=”javascript”不行，得写class=”language-javascript”；写class=”py”不行，得写class=”language-python”。我朋友之前犯过这个错，把class写成了“js”，结果改了selector也没用，后来我让他加上“language-”，立马就好了。

我当时跟他说：“这就相当于你跟Prism说‘我要找钱包’，但没说钱包是红色的——它怎么知道你要找哪个？‘language-’就是那个‘红色’的标记，Prism靠它识别语言。”

坑2：动态元素一定要手动调用highlightElement

比如你用Ajax加载了一个代码块，或者用Vue的v-if动态显示代码，Prism默认不会自动处理。这时候得在元素渲染完成后，手动调用Prism.highlightElement。比如jQuery的Ajax请求：

$.get('code-snippet.js', function(data) {
 var $div = $('
' + data + '
');
 $('#code-container').append($div);
 Prism.highlightElement($div[0]); // 手动高亮
});

要是不用这一步，加载进来的代码还是不会亮——我朋友当时就是因为没加这个，调了半小时才找到问题。后来他跟我说：“原来Prism不是‘全自动’的，动态元素得‘喊它一声’才行。”

坑3：别直接改Prism的源码

有的开发者图省事，直接打开prism.js，把里面的selector改成自己要的。但这样做的问题是，下次Prism升级的时候，你改的代码会被覆盖，又得重新改。正确的做法是在自己的脚本里配置，比如在你的app.js里加一句Prism.selector = ‘…’，这样升级Prism的时候不会受影响。

我朋友之前想直接改prism.js，被我拦住了——“你要是直接改源码，下次Prism出了新版本，你又得重新改一遍，太麻烦了。”后来他按我说的，在自己的vue.config.js里加了配置，现在升级Prism根本不用动代码。

其实改Prism支持非Code标签，本质上就是“调整它的搜索范围”——只要搞懂它的底层逻辑，几步就能搞定。我朋友后来把博客里的所有代码组件都改成了标签，用我教的方法调整后，再也没出现过不高亮的问题。他说现在写文章的时候，想怎么包代码就怎么包，特别顺手。

要是你也遇到了同样的问题，不妨按我讲的步骤试试——先改selector，再处理动态元素，最后避坑。要是还有问题，欢迎在评论区留个言，我帮你看看——毕竟我也是踩过坑的人，懂那种急得抓耳挠腮的感觉～

YUANLEISVIP

收藏 链接