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

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

② 生成转换后带样式的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语法中,插入一个图片,语法如下:


![发生甚么事了?](http:xxx)


笔者的渲染器只是对图片链接做了处理,图片描述是直接忽略掉的,如果想实现上述效果就需要自定义渲染器了。 当然也不难,抽取完样式,继承 mistune.HTMLRenderer,按需重写函数即可,此处重写image()


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


接着修改app.py:


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


最后运行,将生成的样式置于微信公号编辑器查看效果:


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


以上就是目前此工具的详细用法


相关文章
|
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 和多个在线平台。
75 0
|
6月前
|
人工智能 前端开发 开发者
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
Markdown 是一种标记语言,对于 SaaS 服务商和 AI 提示词编写者来说是必备技能。它使用简单的符号如 `#`, `-`, `>` 进行文本排版,无需复杂富文本编辑器。通过键盘输入即可实现标题、列表等样式,比 WPS 或 Word 更便捷。Markdown 广泛应用于云平台社区、问答网站、GitHub 项目文档及开源程序。了解基础后,适应不同平台的自定义语法相对容易,且有多种 Markdown 客户端工具可供选择,如 Typora、MarkText 和 Obsidian。Visual Studio Code 配合插件也是强大工具,适合撰写公众号推文等。
51 4
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
|
6月前
|
XML 搜索推荐 开发工具
全面指南:技术写作与编辑工具 Markdown、Git 研究工具
在技术写作领域,“工具”是指技术写作者用于创建、管理和发布高质量技术文档的各种软件和应用程序。这包括文字处理器、桌面出版应用程序、XML 编辑器、内容管理系统等等。一些技术写作者常用的工具示例包括 Microsoft Word、WPS、Typora、Notion、印象笔记、GitHub、飞书云文档 和 VSCode 等。这些工具通过允许文档版本控制、启用协作、提供用于一致格式设置的模板、提供管理大量内容的功能,甚至提供将文档翻译成多种语言的功能,从而提高了生产力。工具的选择取决于技术写作者或其工作的组织的具体需求和工作流程。
442 4
Markdown编辑器学习笔记丨简单好用的排版与记录工具
Markdown编辑器学习笔记丨简单好用的排版与记录工具
|
Python Windows
工具:语雀导出MarkDown文档后图片修复
工具:语雀导出MarkDown文档后图片修复
531 0
|
1月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
81 1
Linux系统之部署轻量级Markdown文本编辑器
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
136 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 )的使用