上个月月尾，花了些时间肝了Markdown转换工具的雏形出来，还顺手写了篇：《耗子喂汁，用Python写个专属Markdown转换工具》，后面因为来活了，自己杂事也比较多，就搁置一般了，连README.md都没来得及写。恰逢最近活少了些，忙里偷闲开始折腾，从可定制和易用性两方面入手优化，这不第一个可用版本来咯~
0x1、项目简介
1、工具是干嘛的？
hzwz-markdown 是一款基于 Python 实现的，用于 将Markdown文件转换成带样式的公号文章HTML的工具。
简单点说就是：
你配个样式模板，工具会根据此模板对md文件做转换，生成HTML，你贴到公众号编辑器里就可以直接发了。
大概用法可以参见视频：www.bilibili.com/video/BV135…
2、开发初衷
笔者习惯使用Markdown语法撰写技术文稿，然后把文章发布到公号上，每次发布最揪心的就是排版，特别是遇到表格，插入x行y列的表格，然后一个一个格子手动复制粘贴，浪费时间。而实际上，排版时都是按照一个统一的样式 来排版，纯粹的机械劳动，我需要一个工具来提高排版的效率。
网上已经有很多优秀的Markdown排版工具，如：
- Markdown转换工具：blog.didispace.com/tools/onlin…
- Md2All：md.aclickall.com/
- MPEditor：js8.in/mpeditor/
- Mdnice：www.mdnice.com/
一开始用觉得还凑合，但是慢慢发现样式同质化的情况严重，样式单一，你用别人也用，满大街的公号用和你同样的样式，区分度不高。其次，虽然有些工具支持定制，但是要自己去改CSS，有一定门槛，没有前端经验的用户可能难以下手。
可能大部分用户的诉求跟我一致：
我不懂配色，也不懂CSS，我只是觉得别人文章样式好看，我想自己的文章也用上，仅此而已。
遂有了自己写一个工具的想法，对这个工具的期许如下：
① 简单易用：不懂开发也没关系，配置文件改下配置项，一键运行自动生成； ② 样式灵活：提供一些笔者的样式可供直接使用，不够？看上别人的样式直接偷； ③ 纯粹&可定制：代码开源透明无私货，如果你会Python还可以做深一步定制。
0x2、技术选型及基本原理
工具采用Python进行开发，主要原因是笔者玩得熟一些，其他语言实现起来可能更简单，如JS。
工具的核心其实很简单：
解析Markdown文件 → 对特定类型元素进行渲染 → 生成HTML文件
然后就是这个三步的逐步细化了：
① 解析Markdown文件
即解析Markdown能对不同类型的元素做区分，此处使用轮子：mistune 库：
- 一个目前最快的纯Python markdown快速解析器，灵感来源于marked。
- 官方仓库：github.com/lepture/mis…
- 官方文档：mistune.readthedocs.io/en/latest/
② 对特定类型元素进行渲染
即将不同类型的元素，转换成带内联样式的HTML，直接用字符串拼接，繁冗且复用性差，故此处引入模板概念，将每个样式保存成单个html模板，用到时传参渲染，此时使用轮子：jinja2 模板库。
③ 生成HTML文件
在公号文章的头部和尾部我们习惯插入一些导流样式，可以与②步骤生成的文章正文进行拼接，最后输出到HTML中。
以上就是本工具的基本实现原理。
0x3、如何使用
1、一些准备工作
- Step 1：通过Git把代码clone到本地，或是直接Download代码压缩包；
- Step 2：安装Python，如何安装请自行百度，安装了的直接跳过；
- Step 3：通过pip命令安装用到的依赖库；
pip install -r requirements.txt
🐍Tips：安装Nodejs（可选），将highlight.js中的.css文件转换成.ini文件时用到。
2、如何直接使用(小白)
① 定制样式配置文件
先来到项目的styles文件夹下：
渲染时，只会应用custom文件夹里的样式配置文件！！！你可以：
- ① 复制 author 文件夹里笔者提供的配置文件到custom目录下；
- ② 复制 default_config.ini 文件到 custom 目录下，然后自行配置；
配置规则也很简单，如：
是的，修改下None的值，改成对应的模板文件，如：h2=1，就是指向模板：template/h2/1.html。
这里特别说下：codestyle 和 mac_window，前者为 代码高亮，基于highlight.js，通过黑魔法将css转换为ini，并将样式写入到HTML中。喜欢什么样式，可自行到官网挑选：highlightjs.org/
复制下样式名，如此处的：atom-one-dark 即可应用。
而 mac_window 则是 Mac窗口风格，样式提取自mdnice，有下述几种可供选择：
应用后的效果如下：
🐍Tips：样式配置文件只需配置一次，还支持同时渲染多种样式~
② 生成转换后带样式的HTML
将md文件置于 article/md 目录下，如：
双击项目中的app.bat文件一键生成：
接着打开输出文件，HTML代码看着有点乱，没关系。
③ 复制到微信公众号编辑器
打开微信公众号，新建文章，F12打开开发者工具，定位到空白内容，如下图：
右键Edit as HTML，把生成的带样式的HTML代码拷进去：
点击下外部空白区域，然后看下编辑器处的效果，看着有点乱？还错位了？
没关系，点击下保存或预览，即可恢复正常，即使还不正常，没关系，以手机上的预览效果为准！
可以，效果看起来针不戳，还有自定义头尾样式，文字看起来步骤多，实际上就几步。
3、自定义自己的样式(进阶)
如果笔者的模板满足不了你，你看上了别人的样式，可以直接偷过来~
① 模板的获取
以某公号样式为例：
图片黑框背景和二级标题不错，浏览器打开，F12开发者模式定位到对应结点：
右键Copy → Copy element，粘贴到工程的 wash/before/in.html，执行下清洗脚本：
这里的清洗，就是剔除掉一些没用的字符串，如data-radio=xxx：
将图片地址部分内容改成 {{ src }}，修改后：
将out.html文件放到template/custom/image目录下，改名为1.html，接着改下样式文件，image=1
运行后把生成的带样式的HTML复制到微信，点击保存后看下效果：
黑边到手，剩下的二级标题也是如法炮制：
看下效果：
可以，样式的获取大概就这样，传参和文件夹结构可以参照：template/author 进行创建。
🐍Tips：使用自定义模板，需要修改config.ini文件，给为：template_dir = template/custom，如图：
4、自定义渲染器(进阶)
如果笔者的渲染器还不满足你的需求，而你也有较强的动手能力，可以自定义一个渲染器。以下述文章图片样式为例：
在Markdown语法中，插入一个图片，语法如下：
笔者的渲染器只是对图片链接做了处理，图片描述是直接忽略掉的，如果想实现上述效果就需要自定义渲染器了。 当然也不难，抽取完样式，继承 mistune.HTMLRenderer，按需重写函数即可，此处重写image()
接着修改app.py：
最后运行，将生成的样式置于微信公号编辑器查看效果：
以上就是目前此工具的详细用法，后面会慢慢迭代优化，比如增加样式预览，也欢迎各位朋友提建议，如果觉得有用，可以给个star，谢谢~😘
