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

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

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

什么是WordPress代碼高亮

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

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

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免插件實(shí)現(xiàn)代碼高亮
//Prism.js開(kāi)始
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

注意：代碼里面的【】修改為<>（因?yàn)槲疫@里用了<>就直接沒(méi)了相關(guān)的代碼了）

使用方法

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

問(wèn)題未解決？付費(fèi)解決問(wèn)題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信

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