0x1、需求分析
一直使用 Markdown 语法编写文章，然后用Markdown转换工具转换下，常用的工具有：
- Markdown转换工具：blog.didispace.com/tools/onlin…
- Md2All：md.aclickall.com/
- MPEditor：js8.in/mpeditor/
- Markdown Nice：www.mdnice.com/
转换后的文章样式(以Md2All为例)：
还行，简洁够用。但，人总是很难满足于现状，三个诱因让我有了改变的念头：
- 工具毕竟不是开源的，你用别人也用，样式烂大街，都是改改颜色，替换图片、审美疲劳；
- 老弟给我安利的公号编辑插件，如新媒体管家(已凉)，壹伴助手，秀米，135、小蚂蚁等;
作为漆黑中的萤火虫，怎甘平平无奇，于是花了点时间，来定制自己的文章排版~
在参(chao)考(xi)完多个公号后，整理了自己的公号排版规范，有需要的可以参考一波~
# 字号：正文(14、15)，注释-标注来源-超链接-代码(12) # 字间距：(1、1.5) # 行间距：(1.5、1.75、2) # 页边距：即双端缩进、两端对齐，页面左右留白，建议缩进尺寸为1.0 # 字体颜色：标题 #000000；正文 #4C4C4C；标注 #888888；其他 #B2B2B2 # 正文也可以尝试：#545454；#3f3f3f；#7f7f7f；#2f2f2f # 备注性文字：#a5a5a5 # Tips：除去字体颜色，公号排版颜色不宜超过三种，颜色一旦多起来，风格就很难定，2-3种尤佳； # 比如我的三种颜色：蕾姆蓝#5A78EA；拉姆粉#FF4081；艾米莉亚：#C65BDA # 符号系统：建立自己的符号系统，用作内容分割，比如用//////////作为正文大段落的分隔，- 作为段落小结的分隔，有时还可以使用一些表情符号来增加趣味性：http://cn.piliapp.com/symbol/ # 不管怎么排，要有自己固定的设置，如：段落和图片间空2行、图片大小控制在一屏版面的1/3面积内、一个段落不超过3行字、每当一屏版面文字太满时，拆解段落做分段或做一些highlight制造空间感等。 # 总而言之，尽量利用 简单的基础设置 去优化阅读体验，让整体排版看起来简洁但有序、不密集、不沉重、不压抑。 # 采用固定格式的公号封面图!!! # 固定版式形成强烈的个人特色，制作新的封面图只需置换文字和图片，好看又方便。
具体效果可以看下：mp.weixin.qq.com/s/why-ikTbb…
大概的样式，其实就下面这几种：
而每次写完文章，想发布到公号，我需要这样：
复制文章内容() 无格式粘贴到公号文章编辑处() for(其中一行：所有内容) { when(其中一行) { is 一级标题 → 应用一级标题样式 is 二级标题 → 应用一级标题样式 is 正文 → 应用正文样式 ... } }
机器重复，费事费力费神，特别是表格复制粘贴，令人绝望，文章内容多的时候，得花上半把小时，热情也被消磨殆尽... 迫切需一种工具，帮我跳出这样的困境，不能全自动，也要尽可能减少我花在排版上的时间。
0x2、工具设计
转换工具的核心：→ 解析Markdown文件 → 对特定类型元素进行渲染 → 生成HTML文件
这里的渲染，其实没那么高深，以 Md2All工具为例，输入：# 一级标题
点击复制，然后随便贴到一个IDE，保存为.html后缀，格式化一下：
因为微信公众号文章不支持CSS和JS(不过支持SVG)，所以只能在HTML标签里写内联样式。 所以，这里的渲染其实只是：当解析到特定类型元素时，替换成对应的带内联样式的HTML代码。
所以，想写这样的工具，要点就是：
- ① 解析Markdown，能对不同类型的元素做区分；
- ② 各种带有样式的HTML代码；
先是解析Markdown的问题，秉着有轮子就不自己造的精神，直接搜关键字Python MarkDown解析，在众多的库中选择了mistune。
而样式HTML的获取，就简单多了，善用Chrome开发者工具的Elements即可，比如：
看上的样式，直接偷
当然，获取到的样式可能还需要微调下，接着到工具开发环节~
0x3、我啪的就站起来了，很快嗷
上面也说了，使用浑元功法(mistune)，来解析Markdown，简要介绍下此库：
- 一个目前最快的纯Python markdown快速解析器，灵感来源于marked。
- 官方仓库：github.com/lepture/mis…
- 官方文档：mistune.readthedocs.io/en/latest/
直接用pip命令安装一波：
pip install mistune==2.0.0a4
用法也很简单，写个简单的Demo体验体验：
默认渲染样式显然不能满足我们的需求，需要自定义渲染器，定义一个渲染器 mistune.HTMLRenderer 的子类，重写相应的函数即可。同样写个简单例子，以#、##的解析为例：
运行输出结果如下：
接着塞到文章编辑器里验证下，微信不支持粘贴源码，借助开发者工具，定位到正文元素，右键选中：
粘贴一波：
回到编辑器看下效果：
可以，跟预期一致，大概玩法就这样，接着就是具体逻辑的细化及优化了。更多渲染器中可供重写的函数可以参见下述链接：mistune.readthedocs.io/en/latest/a…
0x4、松果弹抖闪电鞭
接着是记录开发此工具的细节，有兴趣想自定义的可以借鉴一波，不感兴趣的直接跳过用成品亦可，后续会慢慢更新一些主题，也欢迎投稿~
① 一鞭 → 样式采集示例
因为用的壹伴助手插件，复制元素的时候带了点没用的东西：
有些洁癖，写个正则清洗一下：
清洗完：
强迫症作祟，格式化下代码，这里用的lxml，你也可以用BeautifulSoup或者其他：
看下效果：
可以，舒适感up↑，后续采集到的样式，先放这个池子里清洗一下，再用，也可添加新的过滤规则。
样式搞到手了，接着就该想想怎么存了，总不能像Demo那里一样，复制一堆字符串吧。繁冗不说，复用性也差，这里引入模板的概念，将每个样式保存成单个html，用到传参渲染，此处使用jinja2模板库。
pip命令安装一波：
pip install Jinja2
接着把文本部分，替换成一个变量text：
再接着使用jinja2获取模板并渲染：
输出结果如下：
可以，很强，关于Jinja2的具体用法可参见：
- 或之前写的一篇文章：《偷个懒，公号抠腚早报80%自动化——3.Flask速成大法》
创建模板，使用模板渲染的流程就这样，接下来演示下每种样式的具体获取过程。
