免插件的情況下實現WordPress代碼高亮

[重要通告]如您遇疑難雜癥,本站支持知識付費業務,掃右邊二維碼加博主微信,可節省您寶貴時間哦!

對于老梁來說，喜歡折騰wordpress，但是折騰歸折騰我不喜歡插件，任何一個插件感覺都有可能拖慢打開速度甚至說里面有各種隱藏的鳥兒，會不定時的爆發一下就掛了，今天就來一個非插件的情況下來個實現WordPress 代碼高亮

什么是WordPress代碼高亮

代碼高亮，簡單地說就是把代碼不進行翻譯進行展示，展示之后顯示各顏色代碼，從而更好的顯示代碼效果，給代碼加上一個css及js，插件多了腫瘤，所以不如用代碼實現此功能，簡單 - 完美

css及js調用了Prism開源的代碼高亮的功能

css及js文件

1.在網站主題目錄里面新建文件夾：prism

2.prism文件夾內放入文件：prism.css prism.js

文件下載：鏈接：https://pan.baidu.com/s/1gyMKgVKdV2L1iXgcnNyarA? ? 提取碼：0fe0

調用css及js

在主題文件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() {
?>
<?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

注意：代碼里面的【】修改為<>（因為我這里用了<>就直接沒了相關的代碼了）

使用方法

登錄wp網站后臺，編輯文章時點擊右上角的文本模式，會有代碼高亮/PHP/python等代碼的按鈕，點擊在樣式里面插入代碼即可！