banner

让SyntaxHighlighter插件在Ajax下也能正常高亮

最近在给自己做一个代码整理仓库,在列表页面中,采用了Ajax加载文章。

因为代码仓库的文章中有大量的代码演示,所以采用了经典的SyntaxHighlighter做代码高亮渲染。

在这里,我不得不承认SyntaxHighlighter是一款优秀的代码高亮插件。

sh.jpg

按照官方给出的demo,代码高亮是能够正常渲染,但前提是页面内容已经加载完毕了以后。

也就是DEMO中的这句代码

SyntaxHighlighter.all();

但我苦逼了,因为列表页的文章内容是ajax加载的,代码此时没法正常渲染。

无奈之下,只有去翻查插件源代码,经过实验发现,在ajax将内容加载完毕以后,执行一次下面的代码,即可为新加载的代码演示进行高亮渲染。

SyntaxHighlighter.highlight();

这种做法我不知道是否受到官方推荐,但我目前测试了,能给正常使用,没有报错。

阅读: 3500
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/61

留言评论

11条留言
Hodpel
为毛其他正常 从第一页转到第二页会显示 无法找到brush:css(/php/js)之类的
橙色阳光
好像有点片面了,理论上,执行一次是没有问题的。刚刚看你的博客访问不了,没有看到实际的情况。
橙色阳光
你用了Pjax,可以在每次请求完成以后,执行一次js插件的高亮方法
thxsdhy
成功, 肥肠感谢!
fengjun
赞,多谢,解决了我同样的问题
nobird
ajax就是个妖孽。。。
涂涂研版
拿错了。。现在ue改版了。不用这个了。。
橙色阳光
呵呵,搞得我现在都不能高亮
涂涂研版
来拿走代码。。。
夏日博客
SyntaxHighlighter高亮插件貌似是不能自适应吧。
地铁诡事
[给力]