Markdown 转富文本
把 Markdown 转为带内联样式的富文本,直接粘进公众号和 Word
目标平台与样式
标题居中、二级标题带主题色竖线,正文行高较大,适合微信公众号阅读。
Markdown 源码361 字符
富文本效果
一篇可以直接粘进公众号的文章
Markdown 写作、一键转富文本,省掉在编辑器里反复调格式的时间。
为什么需要这一步
公众号编辑器不认识 Markdown,也不认识 CSS 类名,只认内联样式。所以需要把:
- 标题的字号与颜色
- 段落的行高与间距
- 引用块的背景与左边框
统统写进每个标签的 style 属性里。
这样粘贴过去,格式就不会丢。
支持的元素
| 元素 | 是否保留 |
|---|---|
| 标题 | 是 |
| 表格 | 是 |
| 代码块 | 是 |
| 外链图片 | 需重新上传 |
const html = inlineStyleHtml(markdownHtml);
写完记得点「复制富文本」。
导出
粘贴到各平台的注意事项
| 平台 | 效果 | 注意 |
|---|---|---|
| 微信公众号 | 标题、加粗、列表、引用、表格均保留 | 外链图片不显示,需在编辑器内重新上传插入 |
| Word / WPS | 完整保留样式,可继续编辑 | 粘贴时选择「保留源格式」 |
| 知乎 / 掘金 | 基本保留,平台会覆盖部分样式 | 这两个平台本身支持 Markdown,可直接粘源码 |
| 飞书 / 钉钉文档 | 标题与列表保留 | 代码块可能被转成普通段落 |
| 邮件客户端 | 保留内联样式 | 部分客户端会剥离背景色 |
样式全部写成了内联 style,这是公众号编辑器与 Word 唯一可靠识别的形式;外链
<style> 和 class 会被这些编辑器丢弃。 图片是个例外:Markdown 里的外链图片粘进公众号后无法显示,微信要求图片先上传到素材库,需要在编辑器里重新插入。 代码块不做语法高亮,保持等宽字体与浅色底,这样在各平台都不会串色。全部处理在浏览器本地完成,文档不会上传服务器。 功能介绍
Markdown 转富文本工具把 Markdown 渲染为所有样式都写进标签 style 属性的富文本,因此复制后可以直接粘贴到微信公众号编辑器、Word、飞书文档、邮件客户端等只识别内联样式的环境中,不会丢失排版。提供公众号阅读、正式文档、暖色阅读三套主题,主题色、正文字号与行高均可调节,标题、引用、代码块、表格、列表、分割线都会套用对应样式。复制时优先写入 HTML 剪贴板格式以保留格式,浏览器不支持时自动降级为选区复制,并给出手动复制提示。渲染前会对内嵌 HTML 做白名单清洗,去除脚本与危险属性。
使用说明
1、粘贴或输入 Markdown 内容;2、选择目标平台对应的主题,并调整主题色、字号与行高;3、在右侧确认富文本效果;4、点击复制富文本按钮;5、到公众号或 Word 中直接粘贴;6、若提示复制失败,按页面说明手动选中预览区后按 Ctrl+C。