wordpress不用插件就可以实现代码高亮的效果

2018.10. 214:36:15 1 43

现在还在用网站程序自己搭建独立博客网站写博客的人,基本上大部分都是技术相关的人员了,而大家在写技术博客的时候往往会希望在文章里将代码贴出来。可是wordpress默认的编辑器的插入代码的功能并不友好,因为在文章页不能很好的将代码高亮显示,看着自己的技术文章里的代码事例和其他普通文字一样显示,真是难受死了。

Prismjs就可以让我们的wordpress不用装插件就实现代码高亮的功能,Prismjs是一个开源的专门做代码高亮的项目,他的代码特点是简约、轻巧、便捷、高效、快速,而且他支持127种程序语言的代码高亮,最主要的是Prismjs只有一个JS文件和一个CSS文件。使用Prismjs来实现代码高亮的时候,只要下载这两个文件到自己的网站,然后将这两个文件引入到页面上就可以了。

第一步:下载配置文件


Prismjs官方网址:https://prismjs.com/。进去后点击顶部的“DOWNLOAD”图标,就可以进去选择配置了。

Prismjs的配置分为核心(Core)、主题(Themes)、程序语言(Languages)、插件(Plugins)4个部分,除了核心不可选之外,其他三个类别都可以随便选。按自己的需求选择配置就可以,尤其是支持的程序语言和插件千万不要贪多,因为选择得越多,最后的配置文件会越大。文件太大到时候加载的时候打开网站的速度就慢了。

选好之后在页面的最底部,分别点击“Download JS”和“Download CSS”下载这两个文件。文章末尾有我已经配置好的文件,懒得配置的也可以直接使用我的文件。

第二步:引入这两个文件


将从上面下载的JS和CSS两个文件上传到网站,然后将这两个文件引入到页面。

引入的方法可以通过修改主题下的“header.php”文件来引入,也能够修改“functions.php”。

打开当前使用的主题下的“functions.php”文件,在末尾添加如下代码:

//Prism.js开始
 function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism/prism.js' //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');
//Prism.js结束

注意看上面的代码,代码中有两个自定义路径,需要和上面下载的JS、CSS两个文件上传的路径一致,否则代码高亮功能会无效。

自此代码高亮功能就实现的,在写文章的时候只要切换到“文本”模式,并将代码用。

<pre class="line-numbers"><code class="language-php">
代码写在这里
</code></pre>

包围,代码即可高亮显示。例如下面的代码:

<pre class="line-numbers"><code class="language-php">
<?php 
echo "Hello www.sizuo.org User!"; 
?>
</code></pre>

最后的显示效果如下图:

wordpress不用插件就可以实现代码高亮的效果

代码高亮显示效果

代码中,"language-php"中的“php”是程序语言的意思,不同的程序语言Prismjs有相应的标注方式,因此你可以根据自己实际的程序语言修改这里的名称,利润html、css、js、python、c等。另外,前面pre里的「class="line-numbers"」表示显示前面的行号,如果不需要前面的行号,则可以删除这个class。

但是这样还有点麻烦,因为每次插入代码的时候,都得输入pre和code,为了插入代码的时候方便点,可以在Wordpress的编辑器里添加一个代码高亮的快捷键。

第三步:给编辑器添加快捷键


同样是打开主题下的“functions.php”文件,在末尾添加如下代码:

//编辑器添加快捷键
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( 'codeHighlight', '代码高亮', '\n<pre class="line-numbers"><code class="language-markup">\n这里写HTML代码\n</code></pre>\n' );
QTags.addButton( 'php', 'php', '\n<pre class="line-numbers"><code class="language-php">\n这里写PHP代码\n</code></pre>\n' );
QTags.addButton( 'python', 'Python', '\n<pre class="line-numbers"><code class="language-python">\n这里写Python代码\n</code></pre>\n' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
//添加快捷键结束

这样就在默认的编辑器里添加了三个代码快捷键,效果就是点击快捷键即可自动出来pre和code。效果如下图:

wordpress不用插件就可以实现代码高亮的效果

这样在文章中要插入代码,并且让代码高亮显示就方便多了。

但这样也有缺点,就是Wordpress默认会自动将代码转义,如果插入的代码是可以运行的,最后在文章中可能就会显示成代码运行后的效果,而不是显示代码实体本身。

因为我平时要插入的代码不多,因此我在插入代码之前会手动先转义一遍,转义后的代码就无法再运行了。当然也可以添加代码,让Wordpress不转义pre内的代码。

第四步:Pre标签内的代码不转义


还是修改主题下的“functions.php”文件,在末尾添加如下代码:

//Pre标签内的HTML不转义
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
    return preg_replace_callback( '|<pre.*><code.*>(.*)</code></pre>|isU' , 'convert_pre_entities', $content );
}

function convert_pre_entities( $matches ) {
    return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}
//END

这样添加的代码就都能直接显示代码实体了。

不过这个方法也有一个坑,就是在如果你写完文章再切换回可视化模式的时候,代码又自动运行了,然后编辑器里的内容就又错位了。

所以最好的办法还是贴转义后的代码,因此我在代码不多的情况下选择手动转义一下。不过应该有办法可以自动让Wordpress转义,但我暂时没有找到解决的办法,如果你有办法的话欢迎留言赐教。

最后,用这个方法实现的Wordpress代码高亮,优点就是不用另外再多装插件,而且由于Prismjs本身的简洁快速的特性,也不会额外的增加什么代码。缺点就是第一次设置的时候会复杂一点,而且后面如果更新了主题或者换了博客主题的话,需要重新修改设置一次。

有些主题可能会定义过code的样式,如果上传了Prism文件,在页面中也正确的引用了两个文件,但是文章中的代码还是显示不正确的话,就需要先清除掉主题中定义的样式。方法是在主题的style.css文件中找到code样式,然后删除掉。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 虫子君 4

      写的不错,再测试一下缓存。