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:样式配置文件只需配置一次,还支持同时渲染多种样式~