纯代码WordPress免插件实现代码高亮显示

以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考

wordpress 技术博客经常会分享一些代码，但是 WordPress 本身代码高亮功用并不好。前面里维斯社分享了 2019 年 10 个最新的WordPress 代码高亮插件，今天就分享一个免插件完成代码高亮显现的办法。

Prismjs 就能够让我们的 wordpress 不用装插件就完成代码高亮的功用，Prismjs 是一个特地做代码高亮的开源项目，他的代码特性是精约、轻盈、快捷、高效、快速，而且支持 127 种程序言语的代码高亮。最主要的是 Prismjs 只需一个 JS 文件和一个 CSS 文件。运用 Prismjs 来完成代码高亮的时分，只需下载该文件放到网站，然后将这两个文件引进到页面上就能够了。下面介绍 WordPress 实现代码高亮的办法：

1、首先下载 prism 压缩包上传至主题根目录（底部下载）；

2、然后复制以下代码添加到主题 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] );

}

这就是纯代码 WordPress 免插件实现代码高亮显示全部内容，教程相关的文件请在此页面右侧边栏点击下载。

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!