微信公众号放Latex数学公式的完美解决方案 您所在的位置:网站首页 新时达电梯按钮不亮有信号怎么回事 微信公众号放Latex数学公式的完美解决方案

微信公众号放Latex数学公式的完美解决方案

2024-06-18 16:46| 来源: 网络整理| 查看: 265

做微信公众号的同学都知道,公众号编辑器上刚增加了贴代码的功能。但是对于我们这些理科生而言,光有贴代码的功能还是远远不够的。

有时候我们还需要放一些数学模型啦,数学公式啦之类的。所以怎么在公众号上贴数学公式呢?

初探

一般的做法是在word或者latex上写好,然后截图放上去。因为公众号是不支持类似latex和markdown等的公式输入的,但是截图的做法虽然很粗暴,但是效果却很差。

因为字体,大小,间距等不一致,以及截图上传后失真等。往往会给读者带来很差的视觉观感,比如下面:

所以,该办法并不是长远之计。得另辟蹊径,找到一条符合公众号情的社会主义贴公式之路才行。

再探

找着找着,了解到了用markdown写公众号的方式,因为现在很多markdown支持latex公式渲染了,直接在markdown上编辑渲染好,然后复制上去。

看起来很完美,不是么。说干就干,我们试试,这里推荐一个markdown的渲染平台:

https://mdnice.com/

对公众号的支持也非常不错,还有很多种可选的主题。将我们的测试片段放上去,复制右边渲染好的部分到公众号上。

好像成功了:

我们发送到手机上预览试试,完美!

修正

进行了上面的尝试,相信大家会很快发现一些问题。比如黏贴过去后,我们调整一下字体大小,然后点保存:

???看来还是有一些小差错需要修正。

更为关键的是,直接复制过去的,字体和公众号上的默认字体不一样,于是就有可能造成:

上面为markdown渲染的文本,下面为公众号原生输入的文本。字体很明显在手机上显示是不一样的。这是由于公众号默认输入字体和markdown渲染的字体不同导致,于是我们尝试更改markdown中复制过来的内容的字体:

改成默认字体后,emmm……又发生了上面的bug。难道真的没有办法了吗??好气,明明都快成功了。

终极解决方案

通过多方面的尝试,我们换一种思维方式。既然在公众号上改markdown渲染的文本不行,那我们为何不在markdown上直接改渲染后的文本格式,让markdown渲染后的文本格式适配公众号的格式,这样还省去了排版的烦恼,何乐而不为呢!

最开心的是,该markdown渲染平台允许自定义渲染格式(CSS)可以很方便对渲染的文本进行更改:

主要是更改字体和大小即可,其他的按照需要设置。字体好像公众号默认的是arial,所以我就选了这个,大小我一般喜欢15号字,所以就写15px。其他的边距啊啥的大家可自行设置,也可以直接使用默认的。

这里放上自己的CSS代码,上面的注释也写得很清楚了,稍微有点计算机常识的都知道怎么改。主要是为了适应公众号上的格式,渲染好的复制过去以后就尽量不要动了,因为稍微动一下可能就会出现上面所说的bug(即公式莫名其妙消失了)。

/*自定义样式,实时生效*/ /* 全局属性 * 页边距 padding:30px; * 全文字体 font-family:ptima-Regular; * 英文换行 word-break:break-all; */ #nice { font-family:arial; } /* 段落,下方未标注标签参数均同此处 * 上边距 margin-top:5px; * 下边距 margin-bottom:5px; * 行高 line-height:26px; * 词间距 word-spacing:3px; * 字间距 letter-spacing:3px; * 对齐 text-align:left; * 颜色 color:#3e3e3e; * 字体大小 font-size:16px; * 首行缩进 text-indent:0em; */ #nice p { margin:20px 10px 0px 0px; line-height:1.75; letter-spacing:0.2em; font-size:15px; word-spacing:0.1em; text-indent:0em; } /* 一级标题 */ #nice h1 { border-bottom:2px solid rgb(248,57,41); font-size:1.3em; } /* 一级标题内容 */ #nice h1 span { display:inline-block; font-weight:normal; background:rgb(248,57,41); color:#ffffff; padding:3px 10px 1px; border-top-right-radius:3px; border-top-left-radius:3px; margin-right:3px; } /* 一级标题修饰 请参考有实例的主题 */ #nice h1:after { } /* 二级标题 */ #nice h2 { text-align:left; margin:20px 10px 0px 0px; } /* 二级标题内容 */ #nice h2 span { font-family:STHeitiSC-Light; font-size:18px; font-weight:bolder; display:inline-block; padding-left:10px; border-left:5px solid rgb(248,57,41); } /* 二级标题修饰 请参考有实例的主题 */ #nice h2:after { } /* 三级标题 */ #nice h3 { } /* 三级标题内容 */ #nice h3 span { font-size:14px; color:rgb(165,213,93); } /* 三级标题修饰 请参考有实例的主题 */ #nice h3:after { } /* 无序列表整体样式 * list-style-type: square|circle|disc; */ #nice ul { font-size: 14px; } /* 无序列表整体样式 * list-style-type: upper-roman|lower-greek|lower-alpha; */ #nice ol { font-size: 14px; } /* 列表内容,不要设置li */ #nice li section { font-size:13px; } /* 引用 * 左边缘颜色 border-left-color:black; * 背景色 background:gray; */ #nice blockquote { font-style:normal; border-left:none; padding:10px; position:relative; line-height:1.8; border-radius:0px 0px 10px 10px; color:#FEEEED; background:#000; box-shadow:#84A1A8 0px 10px 15px; } #nice blockquote:before { content:" "; display:inline; color:#FFF; font-size:4em; font-family:Arial,serif; line-height:1em; font-weight:700; } /* 引用文字 */ #nice blockquote p { color:#FEEEED; font-size:13px; display:inline; } #nice blockquote:after { content:"”"; float:right; display:inline; color:#FFF; font-size:3em; line-height:1em; font-weight:500; } /* 链接 * border-bottom: 1px solid #009688; */ #nice a { color:rgb(248,57,41); border-bottom: 1px solid #ff3502; font-family:STHeitiSC-Light; } /* 加粗 */ #nice strong { font-weight:border; color:rgb(248,57,41); } /* 斜体 */ #nice em { color:rgb(248,57,41); letter-spacing:0.3em; } /* 加粗斜体 */ #nice strong em { color:rgb(248,57,41); letter-spacing:0.3em; } /* 删除线 */ #nice del { } /* 分隔线 * 粗细、样式和颜色 * border-top:1px solid #3e3e3e; */ #nice hr { height:1px; padding:0; border:none; border-top:medium solidid #333; text-align:center; background-image:linear-gradient(to right,rgba(248,57,41,0),rgba(248,57,41,0.75),rgba(248,57,41,0)); } /* 图片 * 宽度 width:80%; * 居中 margin:0 auto; * 居左 margin:0 0; */ #nice img { border-radius:0px 0px 5px 5px; display:block; margin:20px auto; width:85%; height:100%; object-fit:contain; box-shadow:#84A1A8 0px 10px 15px; } /* 图片描述文字 */ #nice figcaption { display:block; font-size:12px; font-family:PingFangSC-Light; } /* 行内代码 */ #nice p code,li code { color:rgb(271,93,108); } /* 非微信代码块 * 代码块不换行 display:-webkit-box !important; * 代码块换行 display:block; */ #nice pre code { } /* * 表格内的单元格 * 字体大小 font-size: 16px; * 边框 border: 1px solid #ccc; * 内边距 padding: 5px 10px; */ #nice table tr th, #nice table tr td { font-size: 14px; } /* 脚注文字 */ #nice .footnote-word { color:rgb(248,57,41); } /* 脚注上标 */ #nice .footnote-ref { color:rgb(248,57,41); } /*脚注链接样式*/ #nice .footnote-item em { color:#6E1E51; font-size:12px; } /* "参考资料"四个字 * 内容 content: "参考资料"; */ #nice .footnotes-sep:before { } /* 参考资料编号 */ #nice .footnote-num { } /* 参考资料文字 */ #nice .footnote-item p { } /* 参考资料解释 */ #nice .footnote-item p em { } /* 行间公式 * 最大宽度 max-width: 300% !important; */ #nice .block-equation svg { } /* 行内公式 */ #nice .inline-equation svg { }


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有