分类
未分类

使用QuickLaTeX生成适于在微信公众号中使用的高清LaTeX数学公式图片

很早以前开了一个微信公众号订阅号,打算用来记录自己的数学学习历程,没想到一直荒废到现在。昨天做数学建模作业,想到不如发到公众号里。但想要在公众号文章中插入数学公式的话,只能采用图片的形式,那我该怎么将LaTeX公式转为图片呢?这可犯了难。

方案1(失败)

我首先想到的是Typora,这是一个Markdown编辑器,非常漂亮,所见即所得,支持插入数学公式。Typora可以把文档导出为多种格式,基础的支持PDF、html和图片,其他格式需要借助Pandoc来完成。我把文档导出为html格式,发现公式被转为了svg格式。但微信公众号不能使用svg格式的图片。

方案2(失败)

我接着就想,想办法把svg格式图片转换成png格式吧,因为Typora的排版真的太好看了,不想放弃。找了一圈,最让我心动的是mathjax-node的拓展mathjax-node-svg2png和它所依赖的svg2png。不过我没时间去鼓捣它了,放弃。

方案3(失败)

WordPress官方的 JetPack 插件附带的 Beautiful Math with LaTeX 模块也是以图片显示公式的,公式也很清晰,但只支持行内公式。官方的说法是,\begin{}\end{}这样的环境不支持。只能放弃了。

方案4(成功)

那么,只能用QuickLaTeX插件了,虽然它的公式很模糊(别急)。这是一个WP插件,也可以在WP站点上显示图片格式的LaTeX公式。我想,既然没有更好的办法,那就先凑合吧。

我用了一下,发现效果确实很糟糕。这是我这种稍微有一些DIY能力的人所不能容忍的。

我想,怎么提高图片清晰度呢。

方案4-1(失败)

我首先想到的是,插件代码里有没有控制生成的图片清晰度的选项?我去看了看插件代码,发现公式是在远程服务器上生成图片后又缓存到本地的。失败。

方案4-2(成功)

我又想,先用着吧。但就在这个时候,我注意到了一个惊人的事实:插件的后台选项里是可以调整字体大小的,数值越大,那么生成的图片越大。也就是说,虽然图片100%大小显示时很模糊 ,但我只要让它显示为50%的大小,那看起来不就更清晰了吗?!!

来试一下。我在浏览器里把用来测试的公式的图片的img标签的width属性调小,把height属性删除(删掉后,只要width调整,height会跟着等比例变化,所以这个属性是多余的),可行。

修改插件

那开始着手修改插件代码吧。

先把插件停用,然后打开Plugin Editor,我发现,我们要修改的代码都在 wp-quicklatex/wp-quicklatex.php 里面。

width属性的属性值是由$image_width变量来控制的,height的属性值是由$image_height变量来控制的。不过后者就不用在意了,直接删掉就是了。这几句模板代码大概在1580行左右,有好几句,因为公式有好几种,图片有不同的img标签。修改后就像这样:

$out_str .= "<img src=\"$image_url\""." width=\"$image_width\""." class=\"ql-img-picture $extrastyles\""." />";

我顺便把title属性和alt属性也给删了,因为会显示烦人的“公式由quicklatex生成”(原话是英语,我记不清了,因为没备份)。

接下来我们要修改的是 $image_width 变量的赋值。我发现,赋值是有两种方式。如果缓存的有图片属性值,那就用缓存里面的;如果图片还没缓存,那就从远程服务器获取图片和图片信息,得到图片的宽度。控制这两者的代码一个是在1440行左右,一个是在1500行左右。前者我们不需要修改,我们把后者修改为:

$image_width  = $regs[4];
改为:
$image_width  = $regs[4]/2;

来看看是否有效果。保存代码,启用插件。成功。

但是生成的公式有一点错位,我看了看代码,发现图片的行高line-height属性是与$image_height值有关的;图片的垂直偏移量vertical-align是和$image_align值有关的。那也很简单,把这几个变量值都同比例缩小就好了。另外,我觉得在保证清晰度的同时(我的LaTeX字体大小为50px),1/2还是有些大,调成1/3更合适。代码如下:

$status       = $regs[1];
$image_url    = $regs[2];
$image_align  = $regs[3]/3;
$image_width  = $regs[4]/3;
$image_height = $regs[5]/3;
$error_msg    = $regs[6];

保存代码;启用插件。完美!!效果:

复制,然后粘贴到微信公众号编辑器。完美。

我想说

很早以前,我就在想办法解决公众号里插入数学公式的问题。发现一个叫“数海拾贝”的公众号的公式很清晰(现在已经停止更新了)。还见到一个老哥,也有和我同样的需求,非常锲而不舍😂,先是在一篇文章里提问,而后又到知乎提问。不知道现在解决没有。如果还没,我想,这篇文章应该能帮到他吧。😄😄

像我这样的代码水平,也只能做一些这样小修小补的工作了。不知道未来的什么时候,我会由“追求完美”完全转变为“能用就行”。我还是继续钻研数学更好一些。

我的微信公众号:我是小白那些年(greenhandme),想看公式效果可以去瞧一瞧。我觉得还是在WordPress写文章更舒服。

“使用QuickLaTeX生成适于在微信公众号中使用的高清LaTeX数学公式图片”上的2条回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注