免插件的情況下實現(xiàn)WordPress代碼高亮

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

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

什么是WordPress代碼高亮

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

css及js調(diào)用了Prism開源的代碼高亮的功能

css及js文件

1.在網(wǎng)站主題目錄里面新建文件夾：prism

2.prism文件夾內(nèi)放入文件：prism.css prism.js

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

調(diào)用css及js

在主題文件functions.php加入以下調(diào)用代碼：

//WordPress免插件實現(xiàn)代碼高亮
//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結(jié)束
//編輯器添加快捷鍵
function appthemes_add_quicktags() {
?>
<?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' ); //添加快捷鍵結(jié)束 //Pre標(biāo)簽內(nèi)的HTML不轉(zhuǎn)義 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

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

使用方法

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

問題未解決？付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信

所寫所說，是心之所感，思之所悟，行之所得；文當(dāng)無敷衍，落筆求簡潔。 以所舍，求所獲；有所依，方所成！