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) = \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文本(你也可以使用其他的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博客公众号,持续酝酿深度学习质量文:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

pyecharts(一):Python可视化利器

專 欄 ❈陈键冬,Python中文社区专栏作者 GitHub: https://github.com/chenjiandongx ❈ pyecharts 是一...

63950
来自专栏来自地球男人的部落格

使用BibTex格式时缩小参考文献的字体

在使用BibTex写参考文献的时候,所有参考文献通常是写在一个后缀为.bib文件当中。例如:所有的参考文献按照bibtex格式写在references.b...

33790
来自专栏用户2442861的专栏

Tesseract:训练

http://www.zmonster.me/2015/05/05/tesseract-training.html

17110

控制MongoDB中的集群分片

分片标记是MongoDB 2.2.0版中的一项新功能。它应该强制写入到本地数据中心,但也可以用来将集合固定到一个分片或一组分片。

22070
来自专栏北京马哥教育

4KB 扇区磁盘上的 Linux:实际建议

为何更改为 4096 字节扇区? 如果您熟悉磁盘结构,就知道磁盘是被分解成扇区 的,大小通常是 512 字节;所有读写操作均在成倍大小的扇区中进行。仔细查看,就...

36680
来自专栏沃趣科技

Oracle并行基础

Oracle并行基础 概述 ? Oracle企业版有一项非常厉害的技术:并行查询,也就是说一个语句可以雇佣多个服务器进程(parallel slaves也叫PX...

49770
来自专栏专注数据中心高性能网络技术研发

[RoCE]网络QoS总结

 1.什么是QoS QoS是一种机制,它给一个网络流赋予一个优先级,并且管理它的最低需求(guarantees),极限能力(limitations)和它相比其他...

41050
来自专栏Python中文社区

Django 博客教程(三):创建应用和编写数据库模型

專 欄 ❈追梦人物,Python中文社区专栏作者。电子科技大学计算机学院研究生,从事大数据分析研究方向。主要使用 Python 语言进行相关数据的分析,熟练使...

21790
来自专栏机器之心

资源 | Parris:机器学习算法自动化训练工具

35890
来自专栏Golang语言社区

【译】用Go实现一个静态博客生成器

静态站点生成器是一种工具,给一些输入(例如,markdown),使用HTML,CSS和JavaScript生成完全静态的网站。 为什么这很酷?一般来说,搭建一个...

65440

扫码关注云+社区

领取腾讯云代金券