如何在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></pre>

代碼高亮選項的開關在外掛程式的設定，“文法高亮選項-支援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

好了，這時候你再重新整理你的文章，你就會發現已經實現代碼高亮了，就是這麼簡單！

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！