WordPress中實現Markdown編輯的終極解決方案

OLDPAN發表於2018-10-23

歡迎訪問Oldpan部落格，分享人工智慧有趣訊息，持續醞釀深度學習質量文。

既然我們的部落格
Oldpan部落格
主要的內容是人工智慧、機器學習、深度學習，許多理論推理和公示展示是必不可少的，不能因為公式編輯的不方便而減少對數學公式的展示和編寫，在文章中一個好的公式是很重要的，一個好的公式勝似千言萬語的解釋，所以，我們必須解決在部落格中寫公式的問題，另外圖片的展示也很重要，良好的視覺化可以大大減輕閱讀者的理解難度，達到見圖知意的目的

前言

之前我在這篇文章中簡單介紹過如何利用Markdown在wordpress中進行寫作：oldpan.me/archives/wo… (這篇文章與此篇文章接軌，建議都看)

但是，因為上面的方法是通過貼上渲染好的Markdown格式的html檔案到wordpress的文字中：

雖然可以正常顯示和利用markdown的格式排版，還是有缺點的：

公式渲染問題，公式渲染只能通過在wordpress的原生寫作框中進行，然後通過一個叫做QuickLatex的外掛進行渲染
圖片問題，圖片還需要一張一張去插入，寫MarkDown格式的地址，很麻煩

本來不是什麼大問題，但有一點！

既然我們的部落格主要的內容是人工智慧、機器學習、深度學習，許多理論推理和公示展示是必不可少的，不能因為公式編輯的不方便而減少對數學公式的展示和編寫，在文章中一個好的公式是很重要的，一個好的公式勝似千言萬語的解釋，所以，我們必須解決在部落格中寫公式的問題，另外圖片的展示也很重要，良好的視覺化可以大大減輕閱讀者的理解難度，達到見圖知意的目的

總之一句，這個問題必須解決，也有必要解決。

解決方法

解決方法其實並不難，不要被嚇到，我們把所有需要的基礎環境都搭好之後，就可以實現很方便快捷地去按照markdown的格式寫文章，渲染好，直接將html原始碼貼上到我們的wordpress中就可以看到效果了。

ps：最終效果在文末。

需要的環境

建議大家把在最上面提到的文章看一遍，這裡就不進行重複，總之我們需要：

VScode(或者類似的編輯器) + MPE Preview(或者類似的使用katex渲染的markdown編輯外掛)
Wordpress中的Elementor外掛(或者類似的可以在文章中直接貼上編輯html文字的外掛)
將相應的css檔案放置到你伺服器的正確地方： (程式碼高亮的css檔案在之前的文章中提到了，這裡不重複，katex公式的css檔案放置到你wordpress環境中文章頁面的文章div塊前)

七牛雲賬號充當圖床(或者又拍雲，總之就是可以上傳圖片提供外鏈並且提供API的服務商)

katex的css檔案從這裡獲取：github.com/Khan/KaTeX

注意，上面環境如果沒有設定好，下面的操作無效

公式配置

我們公式的顯示，最多使用的是MathJax，通過一些在markdown編輯器中，我們只要成$$f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$這樣，就可以渲染成下面的形式：

f(x)=∫∞−∞^f(ξ)e2πiξxdξ(如果顯示亂碼，大家請在最上方檢視原文連結~)

但這裡我們使用的是katex，一個類似於Mathjax的開源的公式框架，使用的語法類似，但是顯示的速度和效果都比前者更好。

我們簡單談一下公式的渲染流程：利用js程式碼渲染組成程式碼的html格式然後配合css檔案去整體顯示。

這裡我們採取的方案是，利用vscode中的MPE Preview外掛得到公式通過js渲染好的html檔案，然後配合我們伺服器(網站)上自己的katex-css檔案去達到顯示效果： (這個外掛詳細資訊看上面提到的之前的文章)

得到利用Markdown外掛編輯好文字的html的檔案，

其中，我們的程式碼塊的html內容為(部分展示)：

<span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mo>=</mo><msubsup><mo>∫</mo><mrow><mo>−</mo><mi mathvariant="normal">∞</mi></mrow><mi mathvariant="normal">∞</mi></msubsup><mover accent="true"><mi>f</mi><mo>^</mo></mover><mo>(</mo><mi>ξ</mi><mo>)</mo><mspace width="0.16667em"></mspace><msup><mi>e</mi><mrow><mn>2</mn><mi>π</mi><mi>i</mi><mi>ξ</mi><mi>x</mi></mrow></msup><mspace width="0.16667em"></mspace><mi>d</mi><mi>ξ</mi></mrow><annotation encoding="application/x-tex">f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:1.414292em;"></span><span class="strut bottom" style="height:2.384573em;vertical-align:-0.970281em;"></span><span class="base"><span class="mord mathit" style="margin-right:0.10764em;">f</span><span class="mopen">(</span><span class="mord mathit">x</span><span class="mclose">)</span><span class="mord rule" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mord rule" style="margin-right:0.2777777777777778em;"></span><span class="mop"><span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011249999999999316em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.414292em;"><span style="top:-1.7880500000000001em;margin-left:-0.44445em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">−</span><span class="mord mtight">∞</span></span></span></span><span style="top:-3.8129000000000004em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">∞</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.970281em;"></span></span></span></span></span><span class="mord rule" style="margin-right:0.16666666666666666em;"></span><span class="mord accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.9578799999999998em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathit" style="margin-right:0.10764em;">f</span></span><span style="top:-3.26344em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.08332999999999999em;">^</span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.19444em;"></span></span></span></span><span class="mopen">(</span><span class="mord mathit" style="margin-right:0.04601em;">ξ</span><span class="mclose">)</span><span class="mspace thinspace"></span><span class="mord"><span class="mord mathit">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8991079999999999em;"><span style="top:-3.1130000000000004em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">2</span><span class="mord mathit mtight" style="margin-right:0.03588em;">π</span><span class="mord mathit mtight">i</span><span class="mord mathit mtight" style="margin-right:0.04601em;">ξ</span><span class="mord mathit mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace thinspace"></span><span class="mord mathit">d</span><span class="mord mathit" style="margin-right:0.04601em;">ξ</span></span></span></span></span>複製程式碼

上面這些程式碼就是前面那個公式的html程式碼，很多吧，一個小小的程式碼用html表示出來竟然這麼多。

但是要注意，這時我們並不能直接將這些html檔案貼上到wordpress中的原生編輯器的文字中，因為這個原生的編輯器會導致貼上過去的公式的html標籤自動轉化為亂碼。(這個編輯器會將識別不了的tag轉化為空格，導致我們根本無法正確顯示我們的程式碼),我們需要貼上的只是html文字，所以我們需要一個可以在文章頁面中貼上html文字的外掛：

這裡使用Elementor這個外掛來直接貼上html文字(你也可以使用其他的html外掛):

經測試，Elementor這個外掛中插入html檔案也是遵循wordpress的自動格式轉化語法，所以沒法使用，那麼應該怎麼辦，想了想，可以通過自定義端的方式來實現：

新增一個自定義端，名稱隨便起，我這裡是show_html，然後內容就是我們的要貼上的html原始碼。

然後在你的文章頁面，也就是修改你的文章的html頁面:

在文章內容tag附近選擇合適的位置新增顯示這個自定義端的程式碼：

<div class="kratos-post-content" data-name="<?php echo the_author_nickname(); ?>">
<?php the_content(); ?>
<div class="post-content-mine"><?php echo get_post_meta($post->ID,'show_html',true); ?></div>複製程式碼

上面第三行就是我們新增的程式碼。

這樣儲存自定義段就可以將自定義段當做文章內容來進行顯示了。