WordPress无插件实现代码高亮之Prismjs

2018-12-1816:58:17 发表评论 624

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

第一步:下载配置文件

提取码: z70l

第二步:引入这两个文件

将从上面下载的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结束

注意看代码文件的自定义路径,自己上传的时候。一定要把位置放好,根据自己的路径配置

第三步:给编辑器添加快捷键 (作为一个懒人必须用到的)

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

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

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

WordPress无插件实现代码高亮之Prismjs

第一步选文本,第二步,选择要插入的代码类型,代码高亮是html, php就是php代码,然后第三步,把代码复制过来即可。

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

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

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

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

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

  1. //Pre标签内的HTML不转义
  2. add_filter( 'the_content', 'pre_content_filter', 0 );
  3. function pre_content_filter( $content ) {
  4.     return preg_replace_callback( '|<pre.*><code.*>(.*)</code></pre>|isU' , 'convert_pre_entities', $content );
  5. }
  6. function convert_pre_entities( $matches ) {
  7.     return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
  8. }
  9. //END

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

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

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

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

文件下载

广告也精彩
头像

发表评论

您必须登录才能发表评论!