从 markdown 到公众号编辑器说起

美好生活从尝试开始

你的问题拆开了涉及如下几个知识点。

markdown是什么

一种纯文本的语法，用一些简单的符号做为标记，表示我们常见的某种“修饰”含义，比如字体加粗，斜体 等等。按照 markdown 语法进行写作，使用能够解析这种语法的工具就可以生成可见的带有各种格式的文本。参考链接

微信编辑器是什么

与 markdown 这种纯文本语法对应的另一种格式叫做富文本格式(Rich Text Forma，RTF)，接受这种编辑方法的工具叫做富文本编辑器，也就是通过鼠标的点击来展示输出格式，由微软公司开发。类似于我们的 word，微信编辑器等等。

你看到的是什么

从目前来看，几乎在所有屏幕上看到的文字都是通过HTML(超文本标记语言)标记语言来展示的，比如所有的网站网页和绝大多数移动应用。无论是 markdown 还是富文本格式，他们标记出来的东西只要是呈现在网页上，就都需要被转换为HTML格式。随后浏览器使用 HTML 标签和脚本来诠释网页内容，但不会将它们显示在页面上。而在HTML 中又可以嵌入 CSS (层叠样式表)来定义文本的外观和布局。

两者是如何实现转化

既然markdown，富文本和HTML(CSS)都是用来给我们的文字内容定义外观和布局的，那么他们三者之间就一定可以通过一些方法相互转换。我们平时需求最多的是把markdown转换为富文本，也就是题目中说的要在公众号中保存发表。这个过程我们称之为渲染。markdown的好处就是把本来必须要我们自己分开做的输入内容和排版工作合二为一了，所有的排版都可以被我们在键盘上打出来，然后交给编辑器去解析为其它格式，最常见的是解析为HTML格式，然后再复制富文本格式到富文本编辑器中。

在线工具有哪些

目前常见的在线格式转换器有如下几个，排名有先后：Md2All ；Phodal ；2md 。这些在线工具的开发者都是一线的大牛程序猿。

它们的本质思路就是如上面讲的，把markdown语法转变为html语法，通过css的设定展示排版。至于为什么每一个解析出来的样子都不一样，就是因为他们每一个markdown标记语法对应的css解析格式不一样。比如有人把markdown 的# (一级标题)解析为 h1 {color:red; font-size:14px;} 有的人就会解析为 h1 {color:black; font-size:20px;} 。那么后者的颜色和字体大小就都和前者不一样。你提到的 markdown here 也是这么个逻辑。

我们可以怎么做

如果你觉得所有目前已有在线编辑器给出的渲染方式都太丑，就可以写一个属于自己的CSS文件进行渲染。然后把这个你写好的CSS文件放在一个支持自定义CSS文件的编辑器里。你渲染出来的格式有多美现在就只取决于你自己。所以，不要甩锅。

图片怎么渲染

引文markdown本身是纯文本的，他要插入图片也有自己的语法，就是[图片上传失败...(image-a2aa25-1529777790400)]，这个路径就是图片的位置，如果你的图片在本地就是你计算机的路径，如果这个图片在网络上，那这个路径就是你这个图片的网络地址。

所以，要想能够所谓的支持渲染图片，你这个图片位置就不能是本地的路径，只能是网络地址。那么我们自己的图片如何才能获得一个属于他自己的网络地址呢，类似这样![](http://upload-images.jianshu.io/upload_images/177622-718197433639ec25.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)？这里就涉及到了图床的概念。所谓图床，就是图片在网络上的床。首先把图片传到网络上，然后这个存储图片的地方会给你生成一个专属的图片地址。常用的图床类云服务存储比如七牛云，而图床管理工具我常用的是极简图床。

当然，如果自己学会使用图床工具对你有难度，你又一定要渲染支持图片。还有一个曲线救国的方法。那就是利用已有的支持图片上传的在线文本编辑平台，比如幕布或者等等。你的图片一旦上传到，就意味着有了一个自己的地址且免费的用了的云服务器，可谓一举两得。

具体操作方法如下，申请一个账号，把文本编辑器调整到 markdown 格式，然后把本地图片直接往编辑器上拖，接下来就是见证奇迹的时刻，他会自动给你生成一个markdown格式的图片地址。复制使用即可。你可以把一篇文章设为私密，专门就用来存放图片。想想真是既省心又开心。多说一句，你也可以在上用 markdown 来写，然后打开预览模式直接复制，就可以完成你渲染图片的目的。只不过不能自定义格式罢了。

最终推荐：

• 在线编辑器 Md2All
  使用说明 ，支持自定义 css 格式和图床功能。

• 本地编辑器 typora
  typora 是一个目前win端最好用和mac端最好用之一的markdown编辑器。它基本上可以满足你对 markdown 写作的一切幻想，尽管目前还是beta版本。但也正因为是beta版所以还有个一巨大的优势：所有功能免费。
  这里面就包括了样式丰富的第三方渲染主题以及支持自行编写CSS文件。在偏好设置中打开主题文件夹，就能看到CSS文件。关于这个软件的介绍 和使用说明，GitHub地址，第三方主题 ，你甚至可以自己写一个主题提交给开发者。
  typora 的特点是实时渲染，写完了直接复制到编辑器就可以，再配合上你薅的图床羊毛，齐活。

对了，typora的作者是个中国人，91年生，毕业于上海交大。其它信息不详。
另外，如果你问我CSS怎么写，点击这里 。这年头，写个公众号都得学一点点前端了。
最后，这篇文章已经包括了基础的语法，如果你感兴趣，可以全文复制然后放到这里 去看看。当然，如果不渲染也不影响理解，你说是不。