无需插件实现WordPress代码高亮显示

滑动继续阅读⇓

目前，仍在使用网站程序来建立自己的独立博客网站并编写博客的人们基本上是与技能相关的人，而当我们编写技能博客时，我们通常希望将代码发布在文章中。但是，WordPress的默认编辑器插入代码功能并不友好。由于无法在文章页面上突出显示代码，因此在观看自己的技能文章中的代码示例时，就像其他一般文本一样，确实很不舒服。

而Prismjs就可以作出支持我们的WordPress站点在不安装插件的情况下完成代码突出显示。Prismjs是一个开源项目，专门从事代码突出显示。他的代码功能紧凑，轻便，快速，高效，快速，并且支持127种编程语言的代码突出显示。最主要的是Prismjs只需要一个JS文件和一个CSS文件。使用Prismjs完成代码突出显示，只需将这两个文件下载到你的网站根目录，然后将这两个文件导入到页面。

以下是突出显示wordpress代码的方法。

首先将Prism压缩包下载到下面的主题根目录，然后复制以下代码并将其添加到主题function.php文件即可！

//WordPress纯代码实现代码高亮
//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结束
//编辑器添加快捷键
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标签内的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
//END

打赏赞

本文是否有帮助？

是否