点击左侧箭头调整阅读页面大小

WordPress中实现Markdown编辑的终极解决方案

 

《Wordpress中实现Markdown编辑的终极解决方案》

既然我们的博客主要的内容是人工智能、机器学习、深度学习,许多理论推理和公示展示是必不可少的,不能因为公式编辑的不方便而减少对数学公式的展示和编写,在文章中一个好的公式是很重要的,一个好的公式胜似千言万语的解释,所以,我们必须解决在博客中写公式的问题,另外图片的展示也很重要,良好的可视化可以大大减轻阅读者的理解难度,达到见图知意的目的

前言

之前我在这篇文章中简单介绍过如何利用Markdown在wordpress中进行写作:https://oldpan.me/archives/wordpress-markdown-rightway
(这篇文章与此篇文章接轨,建议都看)

但是,因为上面的方法是通过粘贴渲染好的Markdown格式的html文件到wordpress的文本中:

TIM截图20180616111821

虽然可以正常显示和利用markdown的格式排版,还是有缺点的:

  • 公式渲染问题,公式渲染只能通过在wordpress的原生写作框中进行,然后通过一个叫做QuickLatex的插件进行渲染
  • 图片问题,图片还需要一张一张去插入,写MarkDown格式的地址,很麻烦

本来不是什么大问题,但有一点!

既然我们的博客主要的内容是人工智能、机器学习、深度学习,许多理论推理和公示展示是必不可少的,不能因为公式编辑的不方便而减少对数学公式的展示和编写,在文章中一个好的公式是很重要的,一个好的公式胜似千言万语的解释,所以,我们必须解决在博客中写公式的问题,另外图片的展示也很重要,良好的可视化可以大大减轻阅读者的理解难度,达到见图知意的目的

总之一句,这个问题必须解决,也有必要解决。

解决方法

解决方法其实并不难,不要被吓到,我们把所有需要的基础环境都搭好之后,就可以实现很方便快捷地去按照markdown的格式写文章,渲染好,直接将html源码粘贴到我们的wordpress中就可以看到效果了。

ps:最终效果在文末。

需要的环境

建议大家把在最上面提到的文章看一遍,这里就不进行重复,总之我们需要:

  • VScode(或者类似的编辑器) + MPE Preview(或者类似的使用katex渲染的markdown编辑插件)
    Wordpress中的Elementor插件(或者类似的可以在文章中直接粘贴编辑html文本的插件)
  • 将相应的css文件放置到你服务器的正确地方:
    (代码高亮的css文件在之前的文章中提到了,这里不重复,katex公式的css文件放置到你wordpress环境中文章页面的文章div块前)

TIM截图20180616190427

  • 七牛云账号充当图床(或者又拍云,总之就是可以上传图片提供外链并且提供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ξ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文件去达到显示效果:
(这个插件详细信息看上面提到的之前的文章)

TIM截图20180616114316

得到利用Markdown插件编辑好文本的html的文件,

TIM截图20180616121214

其中,我们的代码块的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的自动格式转化语法,所以没法使用,那么应该怎么办,想了想,可以通过自定义端的方式来实现:

TIM截图20180616191044

添加一个自定义端,名称随便起,我这里是show_html,然后内容就是我们的要粘贴的html源码。

然后在你的文章页面,也就是修改你的文章的html页面:

TIM截图20180616191230

在文章内容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实现图片的快速上传:

TIM截图20180616120028

设置好之后,然后在预览窗口右键点击image Helper

TIM截图20180616115837

然后选择qiniu也就是七牛做图床,然后upload图片。这样你的图片就会出现在编辑器中,自己随便调整位置就行,很方便。

TIM截图20180616115919

显示效果

图片展示,上面的图片已经都很好的展示了,现在展示一下公式的效果:

At first, we sample f(x)f(x) in the NN (NN is odd) equidistant points around xx^*:
fk=f(xk),xk=x+kh,k=N12,,N12f_k = f(x_k),\: x_k = x^*+kh,\: k=-\frac{N-1}{2},\dots,\frac{N-1}{2}
where hh is some step.

Then we interpolate points {(xk,fk)}\{(x_k,f_k)\} by polynomial
PN1(x)=j=0N1ajxjP_{N-1}(x)=\sum_{j=0}^{N-1}{a_jx^j}
Its coefficients {aj}\{a_j\} are found as a solution of system of linear equations:
{PN1(xk)=fk},k=N12,,N12\left\{ P_{N-1}(x_k) = f_k\right\},\quad k=-\frac{N-1}{2},\dots,\frac{N-1}{2}

最终的效果就是,我们在markdown编辑器中编辑好我们的文章,什么公式什么图片的都弄好,然后直接将markdown文章生成的html源码粘贴到Wordpress中即可。

  点赞
本篇文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
转载请务必注明来源: https://oldpan.me/archives/wordpress-markdown-ultra-solution

   欢迎关注Oldpan博客微信公众号,同步更新博客深度学习文章。


 猜你喜欢

说点什么吧(邮箱、网址选填)

avatar
280
  订阅  
提醒