Typecho开启pjax后代码高亮(非插件)
代码高亮有很多方法,这里选择使用prism,因为它是轻量级的。
官网地址:https://prismjs.com/index.html
下载prism
首先进入官网点击下载,进入到下载页面。按需选择核心代码(必选)、主题、语法包、插件,下载后上传到网站。
引入prism
在主题文件 header.php 文件中相应位置引用js文件和css文件。例如:
//引入prism.css
<link href="https://你的网站/prism.css" rel="stylesheet" />
//引入prism.js
<script src="https://你的网站/prism.js"></script>
这样基本完成,但是这样还是不会显示。
书写方法
书写文章时代码写上语言就可以显示了,比如:php语言显示如下
<?php
...
...
上面示例为主题未开启pjax时,开启pjax后需要用到pjax重载。
开启pjax重载
在body之前添加如下代码
//pjax重载
<script type="text/javascript">
$(document).on('pjax:complete', function() {
if (typeof Prism !== 'undefined') {
//为了方便将默认语言设为php
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 language-php';document.getElementsByTagName('code').className = 'language-php'; }
Prism.highlightAll(true,null);
}
});
</script>
大功告成!
文章不错支持一下吧
一般这个代码放在哪个位置呢,大佬,小白我有点不懂
没明白你说的哪个代码
文章还不错支持一下
pjax下能用
是的,可以用
小白一个,用不着,不过学习了
质量好文
不错