代码简介：
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 免插件利用纯代码实现高亮
