开发🐁尾汁Markdown转换工具 | 项目复盘

简介: hzwz-markdown 是一款基于 Python 实现的,用于 将Markdown文件转换成带样式的公号文章HTML 的工具。

1、项目简介


hzwz-markdown 是一款基于 Python 实现的,用于 将Markdown文件转换成带样式的公号文章HTML 的工具。


仓库地址github.com/coder-pig/h…


简单点说就是:配个 样式模板,运行直接生成带样式的HTML,贴到公众号编辑器就可以直接发了。


2、项目背景


笔者习惯使用Markdown杜撰技术文稿,尔后发布到公号上,当然不能直接发,还需要进行 排版


排版可谓是体力活,特别遇到表格,一个个手动复制粘贴,常常一篇就要排上半个多小时。


而排版都是按照一个 统一样式 来排的,所以是重复劳动,急需一个工具提高我的排版效率。


网上有很多优秀的Markdown工具,如:Markdown转换工具Md2AllMPEditorMdnice 等。


一开始用还凑合,后面发现样式太单一了,一堆公号也在用,区分度不高,有些支持定制的,但要自己改CSS,有一定的门槛,没前端经验的用户可能难以下手。大部分的用户诉求可能跟我一致:


我不懂配色,不懂CSS,只是觉得别人文章样式好看,我也想在自己的文章里用上,仅此而已。


遂,萌生了一个自己写一个工具的想法,我希望它:


  • 样式灵活:样式我不会写,我会啊,看到喜欢的公号样式直接偷,还有谁?
  • 简单易用:用户通过尽可能简单的配置,一键完成转换,一劳永逸。
  • 纯粹&可定制:代码开源,没有私货,纯透明,会Python还能自行定制。


3、实践过程


① 技术选型及基本原理


基于 Python 进行开发,主要原因是Python笔者玩得溜一些,其他语言实现起来可能更简单(如JavaScript)。


工具的核心其实很简单:


解析Markdown文件对特定类型元素进行渲染生成HTML文件


接着是这三步的逐步细化:


① 解析Markdown文件


即解析Markdown且能对不同类型的元素做区分,此处使用轮子 → mistune



② 对特定类型元素进行渲染


即将不同类型的元素,转换成带 内联样式的HTML,直接使用字符串拼接,繁冗且复用性差,此处引入模板的概念,将每种元素的样式保存成单独html模板,用到时传参渲染,此处使用轮子 → jinja2 模板库。


③ 生成HTML文件


将所有元素渲染后的html代码拼接,也可进行一些DIY,如文章顶部和底部添加导流样式,最后输出到HTML文件中。


② 具体实现细节


就是 不同元素类型具体处理,以前写过一篇记录开发过程的文章,就不搬运了,感兴趣可移步至:《喂汁,用Python写个专属Markdown转换工具》 自行查阅:


网络异常,图片无法展示
|


给下笔者自定义且在用的两个样式,给各位看下效果:


Python系列


网络异常,图片无法展示
|


Kotlin系列:吹爆,头部封面图片+文/CoderPig,借鉴谷歌开发者公号样式,标题颜色按照红篮黄依次切换,超链接精美样式,底部引流end+图片~


网络异常,图片无法展示
|


网络异常,图片无法展示
|


4、总结思考


实际开发中其实踩坑不少,比如换行符\n被微信吃掉了,代码高亮怎么解决等,不过所幸也肝出来了。

自用过程中还是有些小bug,如段落换行的逻辑,引用出现莫名其妙的空格等,功能也不全,不支持Latex公式。


相关文章
|
1天前
|
Java Maven Kotlin
[AIGC] 请你写一遍博客介绍 “使用idea+kotinlin+springboot+maven 结合开发一个简单的接口“,输出markdown格式,用中文回答,请尽可能详细
[AIGC] 请你写一遍博客介绍 “使用idea+kotinlin+springboot+maven 结合开发一个简单的接口“,输出markdown格式,用中文回答,请尽可能详细
|
3月前
|
JavaScript
VueCli3+TypeScript3项目显示Markdown内容
VueCli3+TypeScript3项目显示Markdown内容
|
4月前
|
XML 搜索推荐 开发工具
全面指南:技术写作与编辑工具 Markdown、Git 研究工具
在技术写作领域,“工具”是指技术写作者用于创建、管理和发布高质量技术文档的各种软件和应用程序。这包括文字处理器、桌面出版应用程序、XML 编辑器、内容管理系统等等。一些技术写作者常用的工具示例包括 Microsoft Word、WPS、Typora、Notion、印象笔记、GitHub、飞书云文档 和 VSCode 等。这些工具通过允许文档版本控制、启用协作、提供用于一致格式设置的模板、提供管理大量内容的功能,甚至提供将文档翻译成多种语言的功能,从而提高了生产力。工具的选择取决于技术写作者或其工作的组织的具体需求和工作流程。
165 4
|
8月前
|
容器
Markdown编辑器学习笔记丨简单好用的排版与记录工具
Markdown编辑器学习笔记丨简单好用的排版与记录工具
|
11月前
|
Python Windows
工具:语雀导出MarkDown文档后图片修复
工具:语雀导出MarkDown文档后图片修复
378 0
|
11月前
|
JavaScript 前端开发 数据可视化
再不用怕Markdown中的绘图了,GitHub官方支持Mermaid图表绘制工具
再不用怕Markdown中的绘图了,GitHub官方支持Mermaid图表绘制工具
131 0
|
数据可视化 开发工具 Windows
推荐一款可以上传文件的markdown工具
推荐一款可以上传文件的markdown工具
206 0
|
JavaScript
vue项目中如何使用markdown编辑器插件
vue项目中如何使用markdown编辑器插件
396 0
MarkDown 项目中如何引入开源MarkDown? 史上最简单教程
MarkDown 项目中如何引入开源MarkDown? 史上最简单教程
154 0
MarkDown 项目中如何引入开源MarkDown? 史上最简单教程
|
自然语言处理 前端开发 JavaScript
开发一个 vscode 插件,提升 markdown 排版可读性🌿
开发一个 vscode 插件,提升 markdown 排版可读性🌿
400 0