利用prism.js实现代码高亮

发现一个小巧高效的代码高亮js,官网地址
http://prismjs.com/

Prism is a lightweight, extensible syntax highlighter, built with
modern web standards in mind. It’s a spin-off from Dabblet and is
tested there daily by thousands.

<link href="themes/prism.css" rel="stylesheet" />
<script src="prism.js"></script>

定制后加载到主题。
因为本站采用了instantclick做pjax加速,需要在触发pjax的时候同时触发高亮渲染。去instantclick官网的doc里找到

InstantClick fires four events to provide hooks into the lifecycle of
the page:

change : The page is changed, also triggered on initial page load and
if InstantClick is not supported. Replaces DOMContentLoaded.

Its callback can take an optional isInitialLoad argument, it’s a
Boolean that will be true when it’s the initial page change or when
InstantClick isn’t supported, and false when InstantClick changes the
page.

fetch : A page starts preloading.

receive : A page has been preloaded. You can modify its content.

wait : The user has clicked on a link, but the page isn’t preloaded
yet. Only triggers when the page isn’t displayed instantly.

这里采用on change触发InstantClick.on(‘change’, yourCallback);代码如下

InstantClick.on('change', function() {
    self.Prism.highlightAll(event);
});
InstantClick.init();

测试一下,一切正常。

本文作者: TMs
本文链接: https://blog.tms.im/2015/08/14/prismjs-highlight.html
版权声明: 本作品采用 CC BY-NC-SA 3.0 CN 进行许可。转载请注明出处!
知识共享许可协议