WordPress免插件利用纯代码实现高亮

代码简介：

WordPress博客网站有很多代码高亮，但是WordPress自带的代码高亮显示效果不够好。今天，汇站将分享一个不需要插件的代码高亮显示方法。使用Prismjs，我们可以在WordPress中实现代码高亮显示。Prismjs是一个开源项目，专注于代码高亮显示。它的功能强大、轻量、快速、高效，并支持127种编程语言的代码高亮显示。最重要的是，Prismjs只需要一个JS文件和一个CSS文件。使用Prismjs实现代码高亮显示非常简单，只需下载文件并将其放在网站上，然后在页面中引入这两个文件。下面是实现代码高亮显示的步骤：

1. 首先，下载Prism压缩包并将其上传到主题的根目录。
2. 然后，将以下代码复制并添加到主题的functions.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() {
?>

tags' );
//添加快捷键结束
//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免插件利用纯代码实现高亮