欢迎访问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?这样，就可以渲染成下面的形式：

但这里我们使用的是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文件也是遵循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博客公众号，持续酝酿深度学习质量文：