将 Markdown一键变成小红书配图（附完整Python代码和Skill）一个 Python 脚本 + 一个 Skill 说明文件，把你写好的.md文章，自动变成多张「小红书风格」的配图。（PS：注意配图只有一种样式，非多种；也需要配置Browserskill，如何配置Browserskill可以看上一篇文章）一、项目说明简单说：你写文章用 Markdown，用这个脚本或Skill能帮你直出小红书图片。你只需要准备一篇.md文件（就像你平时写笔记、写推文那样），然后运行这个脚本，它会：把 md 变成一个HTML和一张「带统一配色的长图 HTML」用浏览器把这张长图渲染成 PNG按高度切成多张竖图，每张底部带上你的 slogan 和账号最终你拿到的是这样的图片：每张1242 × 1656（约 3:4 竖图，小红书常用的竖向配图比例）封面是翠绿色渐变横幅，自动抓你 md 里第一个# 大标题正文是白底卡片风格：蓝色小标题、琥珀色小节标题、绿色项目符号、深色代码块、橙色引言框最底下统一一栏：「让重复浏览自动化，把时间留给思考 小红书 / 公众号：你的账号」，这个文字也可以自行修改配套还有一个SKILL.md（Skill 说明文件），等于这份工具的「使用说明书」，也可以复用或交给 AI 照着做。提醒：文末和开头截断问题还是有点问题，后面还需要再调试。二、谁需要做这个东西，主要是为了解脱自己，大家可以用我做的这个玩一玩：1. 手动做图太累一篇干货文章要拆成好几张图，每张都要调尺寸、对齐、配色、加页脚……做一次就累一次。2. Markdown 才是写作最舒服的格式写长文、列清单、贴代码块，md 最顺手。但 md 不能直接发小红书，中间缺一道「转图片」的工序。3. 风格统一这个脚本直接固定配色，保证每张图都同一个系列。4. 改一次，跑一次哪天文章改了几个字、加了个小节，不用重新做图。改 md，重新跑脚本，新图就出来了，这才是「自动化」该有的样子。一句话总结：把「写」和「做图」分开，你只管写 md，出图交给脚本。三、用法工具就两个文件：md_to_images.py（主脚本）SKILL.md（说明文件）下面三种用法，挑最顺手的就行。用法 1：简单模式（最推荐，不用记命令）用编辑器打开md_to_images.py滚到文件最顶部，找到一段「简单模式配置」，把路径改成你的：# ===== 简单模式配置 =====MD_PATH=r"C:\你的目录\文章.md"# ← 改成你的 md 文件路径OUT_DIR=r"C:\你的目录"# 留空 = 输出到 md 同目录# =========================保存，直接运行这个 py 文件（或者在终端里python md_to_images.py，不传任何参数）等它跑完，图片就出来了账号、口号、封面小标签也能在那段配置里一起改（对应ACCOUNT/SLOGAN/PILL）。要是忘了填MD_PATH就运行，它会提示你「先填路径」，不会乱报错。用法 2：命令行（灵活一点）python md_to_images.py build 文章.md--out输出目录一行搞定：md → 长图 → 切片出多张图。用法 3：手动渲染（没装 browser-skill 时用）如果你不想装浏览器自动化那套，也可以：# 1) 先生成 HTML（不依赖浏览器）python md_to_images.py build 文章.md--out输出目录# 2) 用 Chrome 打开生成的 输出目录/文章-long.html，点页面上的「下载为图片」# 得到一个 文章-long.png# 3) 再切片python md_to_images.py slice 文章-long.png--out输出目录小贴士：用法1和用法2脚本需要bsk（browser-skill 的命令行工具）才能「自动」渲染长图。没装也行，就走用法3的手动方式。bsk 本身需要浏览器里加载那个扩展，连不上时会自动提示你走手动。四、个性化部分大部分视觉规范（尺寸、配色、留白）已经写死在脚本里，一般不用动。你真正要关心的只有这几处：要改什么改哪里示例文章路径顶部MD_PATHr"C:/你的目录/文章.md"输出目录顶部OUT_DIR（留空=和 md 同目录）r""或r"C:/输出"底部账号署名顶部ACCOUNT或命令行--account"小红书 / 公众号：你的账号"底部 slogan顶部SLOGAN或命令行--slogan"让重复浏览自动化，把时间留给思考"封面右上小标签顶部PILL或命令行--pill"内容分享"如果你想微调视觉风格（不是必须）：单图尺寸、留白、页脚大小：在脚本顶部W / TOTAL_H / FOOTER_H / TOP_PAD / FONT_SIZE这几个常量配色（绿色条、标题颜色、代码块底色等）：在CSS = """..."""那段样式里，全是普通 CSS，改颜色值即可一个小提醒：如果你习惯在# 大标题下面用引用块写「来源说明 / PS / 前言」，这个工具会自动把它当成正文里的橙色引言框，不会塞进封面。这样封面就不会被一大段说明挤爆。排版补充：生成的是 3:4 竖图，适合作为小红书笔记里的多张配图；五、完整代码（md_to_images.py）下面是「通用版」代码，顶部配置区用占位路径，你拿到后填自己的即可。需要 Python 3 + 两个库：markdown（脚本会自动装）和Pillow（画页脚用，没装的话pip install pillow）。#!/usr/bin/env python3# -*- coding: utf-8 -*-""" md_to_images.py — 把 Markdown 文章转成小红书竖图（多张） 流程： md 文件（内容源） ↓ 自动转成带 share-card 配色的长图 HTML（自动取首个 H1 作封面标题、其下首段作副标题） stem-long.html ↓ 浏览器渲染（优先 browser-skill / bsk，或手动用 Chrome 点下载） stem-long.png （1242 宽长图） ↓ Pillow 切片 + 加统一页脚 stem-文章图_1~N.png 图片规格（与分享图一致）： - 每张 1242 × 1656（约 3:4 竖图，小红书正文常用比例） - 配色：白底卡片 / 顶部翠绿+琥珀条 / 蓝色 H3 / 翠绿标签 / 琥珀色小节标题栏 / Noto Sans SC - 封面 = 翠绿渐变横幅 - 第 1 张（封面）顶部 0 留白；第 2 张起顶部留白 30px（不顶格） - 底部页脚：slogan + 账号（60px 高、19px 字） 用法： # 模式：直接在脚本顶部 CONFIG 填好 md 路径，然后运行即可 python md_to_images.py # 一步到位：md - 长图 - 切片出多图（需 bsk 已连接浏览器） python md_to_images.py build 文章.md --out 输出目录 # 只切片（已有长图 PNG 时，例如手动在浏览器点过“下载为图片”） python md_to_images.py slice 文章-long.png --out 输出目录 # 可选参数 --account "小红书 / 公众号：你的账号" --slogan "一句话 slogan" --pill "封面小标签" """importosimportreimportsysimportglobimportshutilimportargparseimportsubprocess# ----------------------------------------------------------------------------# 配置# ----------------------------------------------------------------------------W=1242TOTAL_H=1656FOOTER_H=60CONTENT_H=TOTAL_H-FOOTER_H# 1596TOP_PAD=30# 第 2 张起顶部留白FONT_SIZE=19# 页脚字号DEFAULT_SLOGAN="让重复浏览自动化，把时间留给思考"DEFAULT_ACCOUNT="小红书 / 公众号：你的账号"DEFAULT_PILL="内容分享"# ===== 简单模式配置（不在命令行传参时自动使用）=====# 用法：把 MD_PATH 改成你的文章路径，OUT_DIR 留空则输出到 md 同目录，# 然后直接运行本脚本（不传任何命令参数）即可出图。MD_PATH=r""# 待转换的 Markdown 文件，例如 r"C:/你的目录/文章.md"OUT_DIR=r""# 输出目录，留空 = 与 md 同目录ACCOUNT=DEFAULT_ACCOUNT SLOGAN=DEFAULT_SLOGAN PILL=DEFAULT_PILL# ===================================================# 中文字体候选（用于 Pillow 画页脚）FONT_CANDIDATES=[r"C:\Windows\Fonts\msyh.ttc",r"C:\Windows\Fonts\msyh.ttf",r"C:\Windows\Fonts\simhei.ttf",r"C:\Windows\Fonts\simsun.ttc",]# ----------------------------------------------------------------------------# HTML 模板（CSS 直接作用于标准 markdown 标签：h1/h2/h3/code/pre/table/...）# ----------------------------------------------------------------------------CSS=""" * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f3f4f6; color: #374151; } .canvas { width: 1242px; margin: 0 auto; background: #ffffff; overflow: hidden; } /* 顶部强调条（与分享图一致） */ .topbar { display: flex; height: 10px; width: 100%; } .topbar .g { flex: 1; background: #10b981; } .topbar .a { width: 120px; background: #fbbf24; } /* 封面 */ .cover { background: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%); color: #fff; padding: 56px 60px 48px; } .cover .pill { display: inline-block; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 15px; padding: 6px 16px; border-radius: 9999px; margin-bottom: 22px; } .cover h1 { font-size: 52px; font-weight: 900; line-height: 1.15; letter-spacing: 1px; } .cover .sub { margin-top: 18px; font-size: 19px; font-weight: 400; opacity: 0.95; line-height: 1.6; } .body { padding: 44px 60px 40px; } /* 二级标题 = 小节标题栏（琥珀色左条） */ h2 { position: relative; padding-left: 16px; font-size: 27px; font-weight: 700; color: #111827; margin: 70px 0 18px; } h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; background: #f59e0b; } /* 三级标题（蓝色） */ h3 { font-size: 19px; font-weight: 700; color: #2563eb; margin: 50px 0 12px; } p { font-size: 15.5px; line-height: 1.75; margin: 12px 0; color: #374151; } strong { color: #111827; font-weight: 700; } ul, ol { margin: 12px 0 12px 4px; padding-left: 22px; } li { font-size: 15.5px; line-height: 1.7; margin: 7px 0; } ul li::marker { color: #10b981; } /* 行内代码 */ code { background: #f1f5f9; color: #0f172a; padding: 2px 7px; border-radius: 5px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13.5px; } /* 代码块 */ pre { background: #1e293b; color: #e2e8f0; padding: 18px 20px; border-radius: 12px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; margin: 14px 0; white-space: pre; } pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: 13px; } /* 表格 */ table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; } th, td { border: 1px solid #e5e7eb; padding: 10px 12px; text-align: left; vertical-align: top; } th { background: #ecfdf5; color: #065f46; font-weight: 700; } td code, th code { font-size: 12.5px; } /* 引用块 */ blockquote { border-left: 5px solid #10b981; background: #ecfdf5; padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 14px 0; color: #065f46; font-size: 14.5px; line-height: 1.7; } .divider { height: 1px; background: #e5e7eb; margin: 30px 0; } .btnrow { text-align: center; padding: 20px; } .btnrow button { background: #2563eb; color: #fff; border: 0; cursor: pointer; font-size: 15px; padding: 10px 24px; border-radius: 10px; } """TEMPLATE="""!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" title{DL_NAME}/title link style{CSS}/style /head body div divdiv/divdiv/div/div div span{PILL}/span h1{TITLE}/h1 div{SUBTITLE}/div /div div {BODY} /div /div divbutton下载为图片/button/div script/script script function downloadImage() { const el = document.getElementById('article'); html2canvas(el, { scale: 1, useCORS: true, backgroundColor: '#ffffff' }) .then(canvas = { const link = document.createElement('a'); link.download = '{DL_NAME}.png'; link.href = canvas.toDataURL('image/png'); link.click(); }); } /script /body /html """# ----------------------------------------------------------------------------# md - html 转换# ----------------------------------------------------------------------------defensure_markdown():try:importmarkdown# noqareturnmarkdownexceptImportError: