如何在wordpress使用markdown時採用prism將程式碼調亮

這篇文章主要介紹了關於wordpress使用markdown時採用prism進行程式碼高亮，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

背景： 最近將部落格的文章編輯器切換為markdown了，但是發現wordpress主題自帶的css無法實現代碼高亮，作為強迫症看著非常不舒服，遂想盡方法實現在markdown中實現代碼高亮。

1.使用markdown編輯器

首先，你需要將wordpress自帶的文章編輯器切換為markdown，這裡需要安裝markdown插件，幾經對比，選擇了WP Editor .md插件，一款可以即時預覽的markdown編輯器，具體有哪些優點可以詳細閱讀插件說明。
外掛程式截圖：

最主要的是該外掛程式碼高亮就是使用的prism，所以在編輯階段的程式碼會自動使用prism的語法，不需要額外設定。不信你可以查看你文章的html源碼，會有下面的語法：

<pre class="language-c"><code class="language-c">  code_here </code>

代碼高亮選項的開關在插件的設置，“語法高亮選項-支持Prism語法高亮”中開啟。

2.去prism官網下載自己專屬的css和js檔案

下載位址：http://prismjs.com/download.htm
選擇你常用的語言和配置，點選DOWNLOAD JS和DOWNLOAD CSS下載css和js文件，也就是prism.js和prism.css檔案。

3.修改wordpress主題

進入主題對應的資料夾，建立prism資料夾，將prism.js和prism.css檔案放入該資料夾

修改funcations.php文件，其中的自訂路徑就是prism.js和prism.css文件的存放路徑

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');

4.Enjoy

好了，這時候你再刷新你的文章，你會發現已經實現程式碼高亮了，就是這麼簡單！

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

WordPress 之在註冊介面實現註冊後密碼直接顯示在頁面上

##使用PHPstudy在Windows伺服器下部署PHP系統
#

以上是如何在wordpress使用markdown時採用prism將程式碼調亮的詳細內容。更多資訊請關注PHP中文網其他相關文章！