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

歡迎訪問Oldpan博客，分享人工智能有趣消息，持續醞釀深度學習質量文。

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

前言

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

但是，因爲上面的方法是通過粘貼渲染好的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文件從這裏獲取：https://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>

上面第三行就是我們添加的代碼。

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

圖片配置

圖片在markdown中也就是一句話的事兒，有專門的格式：![圖片標題](圖片地址)

但是，如果圖片一旦多了，我們總不可能上傳一張圖片，然後得到地址，然後這樣寫，然後繼續....這樣寫太太太麻煩了，所以還是利用MPE Preview這個插件來實現方面的圖片上傳：

首先我們需要設置這個插件的圖片上傳渠道，我這邊是七牛雲，所以在用戶設置中設置密匙API，可以通過七牛雲專門的API實現圖片的快速上傳：

設置好之後，然後在預覽窗口右鍵點擊image Helper

然後選擇qiniu也就是七牛做圖牀，然後upload圖片。這樣你的圖片就會出現在編輯器中，自己隨便調整位置就行，很方便。

顯示效果

圖片展示，上面的圖片已經都很好的展示了，現在展示一下公式的效果：

最終的效果就是，我們在markdown編輯器中編輯好我們的文章，什麼公式什麼圖片的都弄好，然後直接將markdown文章生成的html源碼粘貼到Wordpress中即可。

文章來源於OLDPAN博客，歡迎來訪:Oldpan博客

歡迎關注Oldpan博客公衆號，持續醞釀深度學習質量文：