公众号的Markdown排版利器:Md2All

5,602 阅读4分钟

微信公众号:颜家大少
如有问题或建议,请公众号留言

本文所用排版工具:Md2All,http://md.aclickall.com

公众号排版工具

公众号的排版编辑工具还真的不少,但功能大同小异,大部分是针对富文本的排版,更多的是偏重素材,及各种花巧的样式,给人一种眼花缭乱的感觉,以内容为主似乎演变成了以花巧为王。

Markdown与公众号

Markdown以简单的语法深受写作朋友的喜爱,让写作回归到内容本身,而不是花巧的样式。但公众号并不支持Markdown,所以Markdown here在蛮长的一段时间成了markdown写作朋友们的必备插件。但Markdown here并不是专门针对公众号的工具,出现了各种水土不服,常见的有:

  • 换行失效了,各行挤在了一起;
  • 代码块在iPone、iPad等平台不能正常显示;
  • 样式丢失了;
    等等。。。

虽然,后来又有了不少高人针对Markdown here在转公众号时出现的种种问题提供了各种方法,但并没有完美的解决方案。

对IT人士来说,最困扰的是代码块的显示问题,当时比较流行的解决方法是把代码块截屏保存为图片,把图片上传到公众号,然后再把图片链接加到Markdown中。

但这种做法不但操作起来很复杂,对读者也是不友好的,图片显示的代码块失真了,不能直接复制代码等。。。

大家对公众号的Markdown排版苦不堪言。

Md2All的由来

有这样一位程序猿,也同样被公众号的Markdown排版折磨得苦不堪言,花了差不多一个星期的时间,研究各种现有的工具,但并没有找到较为满意的解决方案。

因为这位程序猿比较喜欢较真,于是就萌生了自己写一个公众号Markdown排版工具的想法,这就有了现在的Md2All。虽然开发的过程也因遇到的各种奇芭的坑而艰苦异常,但结果还是令人满意的,起码上面提到的问题都解决了。

Md2All的功能预览

先来张Md2All的截图
image.png

会看到,版面简洁,所有的功能一目了然。

  • 支持“一键排版”的样式模板选择,和自定义css;
  • 支持边编辑,边预览;
  • 支持左右滚动联动;
  • 对IT人士特别友好,支持80多种代码主题;(因为作者也是IT人士嘛:p);
  • 支持通用的Markdown语法和部分扩展语法(如:表格,任务列表,katex数学公式,注脚等...),并对html,css样式有很好的支持。
  • 预览OK后,只需要一键"复制"就能轻松粘贴到公众号。

Md2All的一键排版

“一键排版”中提供了几种常用的排版样式模版,也提供了足够多的注释,让初学者也能很容易根据注释中的提示个性化自己的样式
image.png
如上图左边所示,大家会看到,我只选了"字距增大”的样式,右边的预览效果就完全不一样了,
也会看到用“绿色”文字作了注释,而用“红色”来表示这个是修改过的位置。
左边就是标准的css样式,如果现有的样式模板不适合你,那就大胆尝试去改吧,就算改错了也就”恢复预设值“就OK了,所以不用担心呵。记得“保存”了才生效呵。

Md2All的代码主题

因为作者本身是程序猿,所以在代码的高亮显示部分花足了功夫,80多种代码高亮主题,可以看到下图右上角可以选择“代码主题”,下面的是favorite主题的:

public class MyActivity extends AppCompatActivity {
@Override //override the function
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
} catch (IOException e) {
e.printStackTrace();
}
}

code.png
再来张xt256代码主题的

public class MyActivity extends AppCompatActivity {
@Override //override the function
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
} catch (IOException e) {
e.printStackTrace();
}
}

code2.png
如果80多种都不合你心意,那也没问题,可以参考:“一键排版”下的“代码块样式”自定义自己的代码高亮样式呵。

把内容复制到公众号

预览OK后,只要点下图的“复制”就能把内容一键复制到公众号:
md2all_preview_2.png
到公众号的效果如下:
weixin.png
可以看到复制到公众号的最终效果和Md2All的预览效果是一致的。
是不是很简单呀。

最后

Md2All正在不断完善中,更多的功能正在开发中,希望大家多多关注,Md2All的所有功能都是免费的,希望大家多多支持,如有问题或建议,请公众号留言
这里写图片描述