🤡公号文章排版利器 | 🐁尾汁Markdown转换工具来咯~(上)

简介: 从可定制和易用性两方面入手优化,这不第一个可用版本来咯~

0x1、项目简介


项目地址github.com/coder-pig/h…


1、工具是干嘛的?


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


简单点说就是:


你配个样式模板,工具会根据此模板对md文件做转换,生成HTML,你贴到公众号编辑器里就可以直接发了。


大概用法可以参见视频:www.bilibili.com/video/BV135…


2、开发初衷


笔者习惯使用Markdown语法撰写技术文稿,然后把文章发布到公号上,每次发布最揪心的就是排版,特别是遇到表格,插入x行y列的表格,然后一个一个格子手动复制粘贴,浪费时间。而实际上,排版时都是按照一个统一的样式 来排版,纯粹的机械劳动,我需要一个工具来提高排版的效率。


网上已经有很多优秀的Markdown排版工具,如:



一开始用觉得还凑合,但是慢慢发现样式同质化的情况严重,样式单一,你用别人也用,满大街的公号用和你同样的样式,区分度不高。其次,虽然有些工具支持定制,但是要自己去改CSS,有一定门槛,没有前端经验的用户可能难以下手。


可能大部分用户的诉求跟我一致:


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


遂有了自己写一个工具的想法,对这个工具的期许如下:


简单易用:不懂开发也没关系,配置文件改下配置项,一键运行自动生成; ② 样式灵活:提供一些笔者的样式可供直接使用,不够?看上别人的样式直接偷; ③ 纯粹&可定制:代码开源透明无私货,如果你会Python还可以做深一步定制。


0x2、技术选型及基本原理


工具采用Python进行开发,主要原因是笔者玩得熟一些,其他语言实现起来可能更简单,如JS。


工具的核心其实很简单:


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


然后就是这个三步的逐步细化了:


① 解析Markdown文件


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


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


即将不同类型的元素,转换成带内联样式的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


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


这里特别说下:codestylemac_window,前者为 代码高亮,基于highlight.js,通过黑魔法将css转换为ini,并将样式写入到HTML中。喜欢什么样式,可自行到官网挑选:highlightjs.org/


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


复制下样式名,如此处的:atom-one-dark 即可应用。


mac_window 则是 Mac窗口风格,样式提取自mdnice,有下述几种可供选择:


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


应用后的效果如下:


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


🐍Tips:样式配置文件只需配置一次,还支持同时渲染多种样式~

相关文章
|
6月前
|
Android开发
我用过的笔记 Markdown Wiki 工具
我用过的笔记 Markdown Wiki 工具
|
4月前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
5月前
|
开发者
Markdown:解放排版,简洁高效的文字创作神器!
Markdown 是一种轻量级标记语言,以易读易写著称,常用于生成 HTML 页面。其简洁的语法加速了排版,尤其在写作、博客和文档领域广泛应用。虽然不擅长复杂排版,但能轻松实现字体大小调整、插入表格、图片和超链接等。Markdown 通过键盘快捷操作,避免了 Word 等软件的繁琐设置。本文将深入讲解 Markdown 语法,助你提升效率。Markdown 适合快速学习,兼容各种文本编辑器,支持导出多种格式,广泛应用于 GitHub 和多个在线平台。
79 0
|
6月前
|
人工智能 前端开发 开发者
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
Markdown 是一种标记语言,对于 SaaS 服务商和 AI 提示词编写者来说是必备技能。它使用简单的符号如 `#`, `-`, `>` 进行文本排版,无需复杂富文本编辑器。通过键盘输入即可实现标题、列表等样式,比 WPS 或 Word 更便捷。Markdown 广泛应用于云平台社区、问答网站、GitHub 项目文档及开源程序。了解基础后,适应不同平台的自定义语法相对容易,且有多种 Markdown 客户端工具可供选择,如 Typora、MarkText 和 Obsidian。Visual Studio Code 配合插件也是强大工具,适合撰写公众号推文等。
54 4
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
|
6月前
|
XML 搜索推荐 开发工具
全面指南:技术写作与编辑工具 Markdown、Git 研究工具
在技术写作领域,“工具”是指技术写作者用于创建、管理和发布高质量技术文档的各种软件和应用程序。这包括文字处理器、桌面出版应用程序、XML 编辑器、内容管理系统等等。一些技术写作者常用的工具示例包括 Microsoft Word、WPS、Typora、Notion、印象笔记、GitHub、飞书云文档 和 VSCode 等。这些工具通过允许文档版本控制、启用协作、提供用于一致格式设置的模板、提供管理大量内容的功能,甚至提供将文档翻译成多种语言的功能,从而提高了生产力。工具的选择取决于技术写作者或其工作的组织的具体需求和工作流程。
464 4
Markdown编辑器学习笔记丨简单好用的排版与记录工具
Markdown编辑器学习笔记丨简单好用的排版与记录工具
|
Python Windows
工具:语雀导出MarkDown文档后图片修复
工具:语雀导出MarkDown文档后图片修复
538 0
|
1月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
97 1
Linux系统之部署轻量级Markdown文本编辑器
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
152 0
|
2月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
下一篇
无影云桌面