掘金是一个非常友好的技术写作平台,它支持 Markdown 写作,并且支持了主题排版,让创作者只需专注内容输出。
对于技术写作者来说,可能会把文章发布到多个平台,比如掘金上发布后,也会在个人公众号进行发布。我们知道,公众号后台编辑器作为一个通用型的富文本编辑器,它不支持 Markdown 写作,代码块还是前几年才支持的,像 Mermaid 流程图、LaTex 数学公式等都谈不上会支持了,非常影响技术/专业写作者的效率。
能不能在掘金平台上写好文章后,再同时发布到公众号呢?如果使用全文复制去公众号后台粘贴的方式,文章中很多排版样式将丢失,造成文章内容错乱。
另外,有一款知名浏览器插件:微信文章同步助手,它可以将掘金上的文章同步到公众号及其它多个平台,但是测试后也有不少的问题,比如一些致命的:
- 排版样式同步后没法保持
- 数学公式同步后会错乱
Mermaid流程图同步后显示有问题,矩形框出现黑色背景- 不支持
WebP格式动图同步 - ...
基于这些问题,我想只有自己动手了。由于之前我开发开源了一款 Markdown 写作编辑器,配套也开发了文章同步公众号的工具,有这方面的基础积累。
这款插件已上架市场,插件名称:
公众账号助手:多账号登录文章同步素材采集。Chrome Web Store 安装地址:qr10.cn/BGsmSn,Edge Add-ons 安装地址:qr10.cn/CwFJIk
我分析了掘金文章,Mermaid 图表使用 svg 渲染,还比较好办,因为公众号文章兼容支持显示 svg ,只需在样式上做下优化调整,但数学公式比较麻烦了。
掘金文章里的数学公式是用的 latexjs 这个库渲染的,这个库用到了外部字体,而公众号文章不支持嵌入外部字体。要是用 mathjax 这个库渲染就很好办了,因为 mathjax 也用 svg 进行公式渲染。
起初,我想能不能将 latexjs 渲染出来的数学公式(html)先转回 latex 文本,再使用 mathjax 渲染出 svg 格式的数学公式就好办了。
研究了一番,实在没找到方法将渲染出来的数学公式(html)转回 latex 文本,就想到将html格式的数学公式转成图片算了。实验了一下,效果还可以。
解决了 Mermaid 图表和 LaTex 数学公式,测试中又发现了其它几个问题:
- 掘金排版主题中,有用到绝对定位样式(
position: absolute),同步后绝对定位样式丢失,导致有些内容排版错乱 - 文章中引用了微信外链(非公众号文章链接),同步后外链丢失
- 代码块同步后,换行符丢失
对于第一个问题,由于公众号文章不支持绝对定位样式,会主动移除掉绝对样式,因此,也没有好的解决办法,后只好在同步前将文章中有绝对定位样式的元素先移除掉,避免文章排版错乱。这些绝对定位元素一般是一些排版修饰元素,比如标题中的前、后修饰等,移除后确实影响了排版的完整美观性,但至少可以保证文章排版不错乱,不影响内容阅读。这里也提醒下写作者,如果要将文章同步公众号,选择排版主题时尽量避免有绝对定位样式的主题。
对于第二个问题,参考了开源项目微信markdown编辑器中的做法,文章同步时支持选择将文章中的微信外链转换成文章底部引用,测试后效果还不错。
对于第三个问题,只好给代码块中每个代码行后插入一个 <br/> ,显示效果也满足。
对于第四个问题,后也已解决,请查看文章:# 支持将 WebP 格式动图一键同步到公众号
插件安装完成后,可以在掘金平台文章 Markdown 编辑器界面上部工具栏中看到 同步公众号 按钮,如下图:
同时,在掘金文章详情页上也可以看到 同步公众号 按钮,如果需要转载文章到自己公众号,这个功能很实用,如下图:
另外,建议同步掘金文章时,如果图片同步失败,可以勾上
图片上传素材库 后再同步试试。
如名称所示,这款插件除了支持文章同步,还支持浏览器中同时登录多个公众号/小程序,支持将网络图片同步到公众号的素材库,另外,还支持互动消息提醒、数据统计、快捷操作等等,如上图所示。
最后,欢迎大家在 Chrome Web Store 或 Edge Add-ons 中安装使用,Chrome Web Store 安装地址:qr10.cn/BGsmSn,Edge Add-ons 安装地址:qr10.cn/CwFJIk。