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

歡迎訪問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>複製代碼

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

這樣保存自定義段就能夠將自定義段當作文章內容來進行顯示了。

圖片配置

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

可是，若是圖片一旦多了，咱們總不可能上傳一張圖片，而後獲得地址，而後這樣寫，而後繼續....這樣寫太太太麻煩了，因此仍是利用MPE Preview這個插件來實現方面的圖片上傳：

首先咱們須要設置這個插件的圖片上傳渠道，我這邊是七牛雲，因此在用戶設置中設置密匙API，能夠經過七牛雲專門的API實現圖片的快速上傳：

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

而後選擇qiniu也就是七牛作圖牀，而後upload圖片。這樣你的圖片就會出如今編輯器中，本身隨便調整位置就行，很方便。

顯示效果

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

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

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

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