本文最后更新于2019年03月17日,共484字。如有问题或建议,欢迎在文章底部留言参与讨论!

prism.js 是一种轻量级的、可扩展的语法高亮器,它是用现代Web标准构建的并已在在成千上万的网站中使用。

官网地址:https://prismjs.com/index.html

下载prism.js

首先进入官网点击下载,进入到下载页面。按需选择以下内容:

  • 核心代码(必选)
  • 主题
  • 语法包
  • 插件

选择完成后在网页底部点击下载js文件和css文件。

将下载的js文件和css文件存入一个文件夹,并上传到网站根目录

引入prism.js

在主题文件 header.php 文件中相应位置(<head><body>标签中)引用js文件和css文件。

注意:以下所有文件路径请修改为自己的路径,并保证路径下存在该文件!

示例:

<!DOCTYPE html>
<html>
<head>
    ...
    //引入prism.css
    <link href="https://www.nanlon.cn/prism/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    //引入prism.js
    <script src="https://www.nanlon.cn/prism/prism.js"></script>
</body>
</html>

全站开启pjax情况下添加prism.js代码高亮

pjax是jquery的一个插件,它使用ajax和pushState两个技术改善用户的网页浏览体验。具体来说,当用户使用a标签切换页面时,可以实现局部刷新的技术。

当您的主题支持并开启了pjax后,则在加载网页时只刷新部分页面,而不刷新底部,顶部,边栏以及一些js,这导致一些依赖js的功能暂时失效,需要手动刷新后才能被加载,pjax重载就是将网页加载时未成功加载的js再重新加载一遍,使这些js能够被正常加载。

上面示例为主题未开启pjax时,添加代码高亮的方法;

以下示例是在主题开启pjax后,添加代码高亮的方法,需要用到pjax重载。

1、在主题文件 header.php 的 </head> 标签前添加如下代码:

注意:以下所有文件路径请修改为自己的路径,并保证路径下存在该文件!

// 引入prism.css
<link href="https://www.nanlon.cn/prism/prism.css" rel="stylesheet" />

2、在主题文件 footer.php 的 </body> 标签前添加如下代码:

//引入prism.js
<script src="https://www.nanlon.cn/prism/prism.js"></script>
//pjax重载函数
<script type="text/javascript">
$(document).on('pjax:complete', function() {
    if (typeof Prism !== 'undefined') {
        Prism.highlightAll(true,null);
    }
});
</script>

注:请勿对html代码进行压缩,已知存在兼容问题。

文章目录