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博客公众号，持续酝酿深度学习质量文：