1. David Wu首页
  2. WordPress
  3. WordPress安装教程

wordpress非插件实现代码高亮(语法高亮)-WordPress开发教程

在此前也已经找到不少wordpress非插件实现代码高亮/语法高亮的方法,一直没有集成到主题中,换了WPGO主题之后,发现这款码农的作品语法高亮居然……好丑。可能是初级版本,作者

在此前也已经找到不少wordpress非插件实现代码高亮/语法高亮的方法,一直没有集成到主题中,

换了WPGO主题之后,发现这款码农的作品语法高亮居然……好丑。可能是初级版本,作者没有在意太多。

索性今天就给这个主题加了代码高亮,Google prettify。不然pre的样式看起来很不舒服,

这个方法不复杂,只需要在jQuery支持的情况下 添加一个js 以及一些CSS样式

整体步骤如下:

引用jQuery库

一般的主题都应该加了,可能在头部也可能在底部,一般我们在footer.php加载:

<script type="text/JavaScript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.8.3.min.js"></script>

引用prettify.js

加载prettify.js脚本,也是在footer.php加载:

<script type="text/javascript" id="wpgo_global_js" src="<?php bloginfo('template_directory'); ?>/js/prettify.js"></script>

注意:JV是将这两个js脚本放在了主题目录的js文件夹下,如果你要放在别的地方,则需要修改上面的加载路径。

下面是最新的prettify.js以及prettify.css压缩包下载

prettify.js下载地址

pre相关标签的替换

如果涉及到之前pre标签的语法高亮,比如添加了 class="brush:bash" 等类,我们就需要对其进行替换,替换方法可以用js,也可以用wp的过滤器钩子,后者效率较高,添加入 functions.php 即可

<?php
// 替换pre标签为自定义形式
add_filter('the_content', 'pre_to_prettify');
function pre_to_prettify($addClass){
    $replace = array(
        '<pre>' => '<pre class="prettyprint">',
        '<pre class="prettyprint linenums">' => '<pre class="prettyprint">',
        '<pre class="brush:bash">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:bash;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:css;light:false;title:;toolbar:false;">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:html;light:false;title:;toolbar:false;">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:php;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:css;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
        '<pre class="brush:js;light:false;title:;toolbar:true;">' => '<pre class="prettyprint linenums">',
        );
    $addClass = str_replace(array_keys($replace), $replace, $addClass);
    return $addClass;
}
?>

上面包含了几种替换/添加class的类型,可以自行修改!


最后,值得提醒的是,如果是ajax异步加载,需要重载的函数为:prettyPrint();

而且涉及到代码的字体一般使用 Monaco.TTF 字体。

如果需要只在pre出现的页面加载请用下面的js代码

//Codehighlight
function find(a, b) {
 var f, g, h, c = $("#container").find(a), d = $(window).scrollTop(), e = d + window.innerHeight;
 for (f = 0; f < c.length; f++) g = $(c[f]).offset().top, h = g + $(c[f]).height(), 
 (e > g && g > d || e > h && h > d) && b(c[f]);
}
function getScript(a, b) {
 $.ajax({
 url: a,
 dataType: "script",
 cache: !0,
 success: b
 });
}
function load_prettify() {
 find("pre", function() {
 if (0 == load) {
 if (1 == getScriptLock) return;
 getScriptLock = 1, getScript(theme_dir + "js/prettify/prettify.js", function() {
 $("head").append('<link type="text/css" rel="stylesheet" href="' + theme_dir + 'js/prettify/prettify.css"/>'), 
 getScriptLock = 0, load = 1, load_prettify();
});
 } else prettyPrint();
 });
}
var load, getScriptLock, theme_dir;
$(window).bind("resize", function() {
 load_prettify();
}), $(window).bind("scroll", function() {
 load_prettify();
}), load = 0, getScriptLock = 0, theme_dir = $("head #default-css").attr("href").split("style.css")[0];

load_prettify()需要初始化,然后重载,OK,教程到此结束,赶快去试试吧!

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/121779

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注