关注迷你日志公众号

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

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

prism.png

下载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>

大功告成!

文章目录
扫码了解详情