Typecho开启pjax后代码高亮(非插件)

代码高亮有很多方法,这里选择使用prism,因为它是轻量级的。

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

Typecho开启pjax后代码高亮(非插件)

下载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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索