在 infinite ajax scroll 中集成 Prism.js

prismjs 是一个语法高亮工具,当需要在日志中贴上一些代码块时它会对读者阅读这些代码非常友好。最近给博客引入了 prismjs,发现对于异步载入的内容无法高亮显示,花了点事间弄清楚了原因:由于 prismjs 只在 html 页面载入时运行,那些通过类似 infinite ajax scroll 异步载入的内容则超出了它的控制范围,这就导致了异步载入的代码块无法高亮显示。

对于以上问题,prismjs 提供了三个方法作为解决方案供用户选择:Prism.highlightAll()Prism.highlightElement()Prism.highlightAllUnder()。同时,infinite ajax scroll 也提供了一些有用的与页面载入有关的事件,可以利用其中的appendednexted事件来执行 prismjs 提供的方法,以便使异步载入的代码块高亮显示。
appended事件为例,它的代码将是类似这样的:

ias.on('appended', function () {
	Prism.highlightAll();	
});

区别

Prism.highlightElement()用于直接处理包含.language-***的元素,以便高亮显示其中的代码。

Prism.highlightAll()Prism.highlightAllUnder()两者的作用仅限于查找目标元素下所有包含.language-***样式的元素,区别是查找范围不同,前者查找整个 DOM 文档,后者需要指定一个具体的目标元素,在这两个方法内部,最终都会将找到的元素交给Prism.highlightElement()逐个处理。

参考:
Prism.highlightAll()
Prism.highlightElement()
Prism.highlightAllUnder()
infinite ajax scroll appended 事件
infinite ajax scroll nexted 事件

发表评论

评论(1)

  1. 叶开 via Chrome 105

    Prism 代码显示 样式 也挺多选择的。