一、Prism 安装

首先从官网选择需要的样式、语言和插件,然后下载 prism.js 和 prism.css 上传到所用的主题目录下(位置随意),如图:


接着在 header.php 或 footer.php 文件中引用 js 和 css:

<link rel="stylesheet" href="https://domain.com/prism.css">
<script src="https://domain.com/prism.js"></script>

# 显示行号
<script>$('pre').addClass("line-numbers").css("white-space", "pre-wrap");</script>

二、Prism 和 Pjax 冲突解决

如简要所诉,开启 Pjax 全站无刷新加载 Prism 就会失效(可F5刷新正常),解决方法如下:

# 添加到 header 或 footer 中
<script type="text/javascript">
$(document).on('pjax:complete', function() {
    if (typeof Prism !== 'undefined') {
        var pres = document.getElementsByTagName('pre');
        for (var i = 0; i < pres.length; i++){
            if (pres[i].getElementsByTagName('code').length > 0)
            pres[i].className  = 'line-numbers';}
        Prism.highlightAll(true,null);
    }
});
</script>
Last modification:March 1st, 2020 at 10:37 am
如果觉得我的文章对你有用,请随意赞赏