解決WP中MarkDown編輯器與Crayon Syntax Highlighter的衝突

背景介紹

眾所周知，使用MarkDown可以極高的提高寫博客的效率。

而WordPress對於MarkDown的原生支持很弱，對於這方面能力的彌補就只能靠強大的插件社區。

官方的JP插件能力強大但過於臃腫，留下算是能力尚可的MarkDown只剩下三款

• JP Markdown -- 官方JP插件的閹割版，預覽切換很麻煩。
• WP Editor.md -- 民間製作，功能全面。
• Markdown Editor --功能精簡不具備代碼高亮,完成度低BUG多。

而我們使用的WP Editor.md功能完善，代碼風格好，方便我們對其進行修改。

而代碼高亮插件我們可以使用強大開源免費的Crayon Syntax Highlighter插件。

問題

Markdown Editor和Crayon Syntax Highlighter的兼容性還是很好的，但有一個很讓人尷尬的問題是--Crayon Syntax Highlighter無法辨認Markdown Editer生成的代碼塊的語言。

圖片打不開請檢查github是否被屏蔽

問題原因追蹤

我們來到Crayon Syntax Highlighter的github官網,在readme.md的Pre-formatted Tags處可以看到,Crayon Syntax Highlighter識別代碼塊是使用pre標籤的lang屬性的。例如：

<pre lang="cpp">blahblahblah....</pre>

我們先關閉Crayon Syntax Highlighter，在博文處檢查元素。

發現pre標籤只有為prism準備的屬性，而代碼語言的格式到code標籤里去了。

解決問題

由此我們打開wordpress安裝文件夾

$attr_str = class="language-.$this->code_class_prefix.$classname.";

改為

$attr_str = lang=".$this->code_class_prefix.$classname.";

而後又搜索

$codeblock = "<pre$pre_attr_str><code$code_attr_str>$codeblock</code></pre>";

將其改為

$codeblock = "<pre$pre_attr_str $code_attr_str><code$code_attr_str>$codeblock</code></pre>";

將文章更新一下~

別忘了打開Crayon Syntax Highlighter

更多文章可以前往James的小筆記本，還請不吝賜教~