WordPress技術博客經常會分享一些代碼，但是WordPress自身代碼高亮功能並不好。前面里維斯社分享了2019年10個最新的WordPress代碼高亮插件，今天就分享一個免插件實現代碼高亮顯示的方法。

Prismjs就可以讓我們的wordpress不用裝插件就完成代碼高亮的功能，Prismjs是一個專門做代碼高亮的開源項目，他的代碼特點是精約、輕盈、快捷、高效、快速，而且支持127種程序語言的代碼高亮。最主要的是Prismjs只需一個JS文件和一個CSS文件。使用Prismjs來完成代碼高亮的時分，只需下載該文件放到網站，然後將這兩個文件引進到頁面上就可以了。

下面介紹WordPress實現代碼高亮的辦法

1、首先下載prism壓縮包上傳至主題根目錄（底部下載）；

2、然後復制以下代碼添加到主題function.php文件下方即可。

1. //Wordpress免插件實現代碼高亮
2. //Prism.js開始
3.  function  add_prism() {
4.         wp_register_style(
5.             ‘prismCSS’,
6.             get_stylesheet_directory_uri() . ‘/prism/prism.css’  //自定義路徑
7.          );
8.           wp_register_script(
9.             ‘prismJS’,
10.             get_stylesheet_directory_uri() . ‘/prism/prism.js’  //自定義路徑
11.          );
12.         wp_enqueue_style(‘prismCSS’);
13.         wp_enqueue_script(‘prismJS’);
14.     }
15. add_action(‘wp_enqueue_scripts’, ‘add_prism’);
16. //Prism.js結束
17. //編輯器添加快捷鍵
18. function  appthemes_add_quicktags() {
19. ?>
20. <script type= “text/javascript” >
21. QTags.addButton( ‘codeHighlight’, ‘代碼高亮’, ‘\n【pre  class = “line-numbers”】【code  class = “language-markup”】\n HTML代碼\n【/code】【/pre 】\n’ );
22. QTags.addButton( ‘php’, ‘php’, ‘\n【pre  class = “line-numbers”】【code  class = “language-php”】\n PHP代碼\n【/code】【/pre】\ n’ );
23. QTags.addButton( ‘python’, ‘Python’, ‘\n【pre  class = “line-numbers”】【code  class = “language-python”】\n Python代碼\n【/code】【/pre】\ n’ ); //修改此段【】為<>
24. </script>
25. <?php
26. }
27. add_action(‘admin_print_footer_scripts’, ‘appthemes_add_quicktags’ );
28. //添加快捷鍵結束
29. //Pre標籤內的HTML不轉義
30. add_filter( ‘the_content’, ‘pre_content_filter’, 0 );
31. function  pre_content_filter(  $content  ) {
32.     return  preg_replace_callback( ‘|【pre.*】【code.*】(.*)【/code】【/pre】|isU’ , ‘convert_pre_entities’,  $content  );
33. } //修改此段【】為<>
34. function  convert_pre_entities(  $matches  ) {
35.     return  str_replace (  $matches [1], htmlentities(  $matches [1] ),  $matches [0] );
36. }

下載地址：https://pan.baidu.com/s/1jaUsAdm3RCBqYIl4cf93ZQ  提取碼: izjr