专栏首页深度学习那些事儿WordPress中实现Markdown编辑的终极解决方案
原创

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 条评论
登录 后参与评论

相关文章

  • 利用pytorch实现神经网络风格迁移Neural Transfer

    载入图像输入大小无要求,最终会被剪裁到相同大小,这是因为神经网络设计了一个特定的输入大小,因此内容图像和风格图像必须大小一致。

    OLDPAN
  • 利用pytorch实现神经网络风格迁移Neural Transfer

    载入图像输入大小无要求,最终会被剪裁到相同大小,这是因为神经网络设计了一个特定的输入大小,因此内容图像和风格图像必须大小一致。

    OLDPAN
  • 浅谈深度学习中超参数调整策略

    深度学习中,设计模型以及保证模型的正确性是首要需要考虑的。当模型设置完成时,理论上模型不存在问题,实现效果也通过计算可以复现出来。一切准备就绪后,那么接下来需要...

    OLDPAN
  • Huginn 浅尝——通过 Rss 看小说

    不记得什么时候 Star 的了,只记得当时看 README 很厉害的样子,类似一个个人监控助理类的软件。大概就是一个加强版的 IFTTT,可以监控各种信息,然后...

    huginn 中文网
  • 利用 Cloudmailin 服务解析邮件

    Cloudmailin 服务可以将邮件转化成 HTTP POST,这与 Webhook Agent 结合使用的话,可以实现很多有趣的功能,具体的设置步骤如下:

    huginn 中文网
  • 在Mac下配置PHP开发环境:Apache+php+MySql

    <span class="pln">sudo apachectl start</span>

    慕白
  • CSS 使用 Flex 布局来制作一个骰子

    我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

    Nian糕
  • linux 定时任务 Crontab 使用方法

    用户所建立的 crontab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置,它的格式共分为六个字段,前五段是时间设定段,第六段是要执行的命令段,格式...

    huginn 中文网
  • 对libevent+多线程服务器模型的C++封装类

    最近在看memcached的源码,觉得它那种libevent+多线程的服务器模型真的很不错,我将这个模型封装成一个C++类,根据我的简单测试,这个模型的效率真...

    bear_fish
  • 创建一个新的 Huginn Agent

    请注意:Huginn API 一直在改进,因此一些无用的 Agent 或将被放弃。我们非常希望您能将您的使用方法以及 API 应该更改什么告诉我们。查看 #60...

    huginn 中文网

扫码关注云+社区

领取腾讯云代金券