將 Markdown一鍵變成小紅書配圖（附完整Python代碼和Skill）一個 Python 腳本 + 一個 Skill 說明文件，把你寫好的.md文章，自動變成多張「小紅書風(fēng)格」的配圖。（PS：注意配圖只有一種樣式，非多種；也需要配置Browserskill，如何配置Browserskill可以看上一篇文章）一、項目說明簡單說：你寫文章用 Markdown，用這個腳本或Skill能幫你直出小紅書圖片。你只需要準(zhǔn)備一篇.md文件（就像你平時寫筆記、寫推文那樣），然后運行這個腳本，它會：把 md 變成一個HTML和一張「帶統(tǒng)一配色的長圖 HTML」用瀏覽器把這張長圖渲染成 PNG按高度切成多張豎圖，每張底部帶上你的 slogan 和賬號最終你拿到的是這樣的圖片：每張1242 × 1656（約 3:4 豎圖，小紅書常用的豎向配圖比例）封面是翠綠色漸變橫幅，自動抓你 md 里第一個# 大標(biāo)題正文是白底卡片風(fēng)格：藍色小標(biāo)題、琥珀色小節(jié)標(biāo)題、綠色項目符號、深色代碼塊、橙色引言框最底下統(tǒng)一一欄：「讓重復(fù)瀏覽自動化，把時間留給思考 小紅書 / 公眾號：你的賬號」，這個文字也可以自行修改配套還有一個SKILL.md（Skill 說明文件），等于這份工具的「使用說明書」，也可以復(fù)用或交給 AI 照著做。提醒：文末和開頭截斷問題還是有點問題，后面還需要再調(diào)試。二、誰需要做這個東西，主要是為了解脫自己，大家可以用我做的這個玩一玩：1. 手動做圖太累一篇干貨文章要拆成好幾張圖，每張都要調(diào)尺寸、對齊、配色、加頁腳……做一次就累一次。2. Markdown 才是寫作最舒服的格式寫長文、列清單、貼代碼塊，md 最順手。但 md 不能直接發(fā)小紅書，中間缺一道「轉(zhuǎn)圖片」的工序。3. 風(fēng)格統(tǒng)一這個腳本直接固定配色，保證每張圖都同一個系列。4. 改一次，跑一次哪天文章改了幾個字、加了個小節(jié)，不用重新做圖。改 md，重新跑腳本，新圖就出來了，這才是「自動化」該有的樣子。一句話總結(jié)：把「寫」和「做圖」分開，你只管寫 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，不傳任何參數(shù)）等它跑完，圖片就出來了賬號、口號、封面小標(biāo)簽也能在那段配置里一起改（對應(yīng)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 本身需要瀏覽器里加載那個擴展，連不上時會自動提示你走手動。四、個性化部分大部分視覺規(guī)范（尺寸、配色、留白）已經(jīng)寫死在腳本里，一般不用動。你真正要關(guān)心的只有這幾處：要改什么改哪里示例文章路徑頂部MD_PATHr"C:/你的目錄/文章.md"輸出目錄頂部OUT_DIR（留空=和 md 同目錄）r""或r"C:/輸出"底部賬號署名頂部ACCOUNT或命令行--account"小紅書 / 公眾號：你的賬號"底部 slogan頂部SLOGAN或命令行--slogan"讓重復(fù)瀏覽自動化，把時間留給思考"封面右上小標(biāo)簽頂部PILL或命令行--pill"內(nèi)容分享"如果你想微調(diào)視覺風(fēng)格（不是必須）：單圖尺寸、留白、頁腳大?。涸谀_本頂部W / TOTAL_H / FOOTER_H / TOP_PAD / FONT_SIZE這幾個常量配色（綠色條、標(biāo)題顏色、代碼塊底色等）：在CSS = """..."""那段樣式里，全是普通 CSS，改顏色值即可一個小提醒：如果你習(xí)慣在# 大標(biāo)題下面用引用塊寫「來源說明 / PS / 前言」，這個工具會自動把它當(dāng)成正文里的橙色引言框，不會塞進封面。這樣封面就不會被一大段說明擠爆。排版補充：生成的是 3:4 豎圖，適合作為小紅書筆記里的多張配圖；五、完整代碼（md_to_images.py）下面是「通用版」代碼，頂部配置區(qū)用占位路徑，你拿到后填自己的即可。需要 Python 3 + 兩個庫：markdown（腳本會自動裝）和Pillow（畫頁腳用，沒裝的話pip install pillow）。#!/usr/bin/env python3# -*- coding: utf-8 -*-""" md_to_images.py — 把 Markdown 文章轉(zhuǎn)成小紅書豎圖（多張） 流程： md 文件（內(nèi)容源） ↓ 自動轉(zhuǎn)成帶 share-card 配色的長圖 HTML（自動取首個 H1 作封面標(biāo)題、其下首段作副標(biāo)題） stem-long.html ↓ 瀏覽器渲染（優(yōu)先 browser-skill / bsk，或手動用 Chrome 點下載） stem-long.png （1242 寬長圖） ↓ Pillow 切片 + 加統(tǒng)一頁腳 stem-文章圖_1~N.png 圖片規(guī)格（與分享圖一致）： - 每張 1242 × 1656（約 3:4 豎圖，小紅書正文常用比例） - 配色：白底卡片 / 頂部翠綠+琥珀條 / 藍色 H3 / 翠綠標(biāo)簽 / 琥珀色小節(jié)標(biāo)題欄 / 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 輸出目錄 # 可選參數(shù) --account "小紅書 / 公眾號：你的賬號" --slogan "一句話 slogan" --pill "封面小標(biāo)簽" """importosimportreimportsysimportglobimportshutilimportargparseimportsubprocess# ----------------------------------------------------------------------------# 配置# ----------------------------------------------------------------------------W=1242TOTAL_H=1656FOOTER_H=60CONTENT_H=TOTAL_H-FOOTER_H# 1596TOP_PAD=30# 第 2 張起頂部留白FONT_SIZE=19# 頁腳字號DEFAULT_SLOGAN="讓重復(fù)瀏覽自動化，把時間留給思考"DEFAULT_ACCOUNT="小紅書 / 公眾號：你的賬號"DEFAULT_PILL="內(nèi)容分享"# ===== 簡單模式配置（不在命令行傳參時自動使用）=====# 用法：把 MD_PATH 改成你的文章路徑，OUT_DIR 留空則輸出到 md 同目錄，# 然后直接運行本腳本（不傳任何命令參數(shù)）即可出圖。MD_PATH=r""# 待轉(zhuǎn)換的 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 直接作用于標(biāo)準(zhǔn) markdown 標(biāo)簽：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; } /* 頂部強調(diào)條（與分享圖一致） */ .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; } /* 二級標(biāo)題 = 小節(jié)標(biāo)題欄（琥珀色左條） */ 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; } /* 三級標(biāo)題（藍色） */ 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; } /* 行內(nèi)代碼 */ 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 轉(zhuǎn)換# ----------------------------------------------------------------------------defensure_markdown():try:importmarkdown# noqareturnmarkdownexceptImportError: 將 Markdown一鍵變成小紅書配圖（附完整Python代碼和Skill）
將 Markdown一鍵變成小紅書配圖（附完整Python代碼和Skill）一個 Python 腳本 + 一個 Skill 說明文件，把你寫好的.md文章，自動變成多張「小紅書風(fēng)格」的配圖。（PS：注意配圖只有一種樣式，非多種；也需要配置Browserskill，如何配置Browserskill可以看上一篇文章）一、項目說明簡單說：你寫文章用 Markdown，用這個腳本或Skill能幫你直出小紅書圖片。你只需要準(zhǔn)備一篇.md文件（就像你平時寫筆記、寫推文那樣），然后運行這個腳本，它會：把 md 變成一個HTML和一張「帶統(tǒng)一配色的長圖 HTML」用瀏覽器把這張長圖渲染成 PNG按高度切成多張豎圖，每張底部帶上你的 slogan 和賬號最終你拿到的是這樣的圖片：每張1242 × 1656（約 3:4 豎圖，小紅書常用的豎向配圖比例）封面是翠綠色漸變橫幅，自動抓你 md 里第一個# 大標(biāo)題正文是白底卡片風(fēng)格：藍色小標(biāo)題、琥珀色小節(jié)標(biāo)題、綠色項目符號、深色代碼塊、橙色引言框最底下統(tǒng)一一欄：「讓重復(fù)瀏覽自動化，把時間留給思考 小紅書 / 公眾號：你的賬號」，這個文字也可以自行修改配套還有一個SKILL.md（Skill 說明文件），等于這份工具的「使用說明書」，也可以復(fù)用或交給 AI 照著做。提醒：文末和開頭截斷問題還是有點問題，后面還需要再調(diào)試。二、誰需要做這個東西，主要是為了解脫自己，大家可以用我做的這個玩一玩：1. 手動做圖太累一篇干貨文章要拆成好幾張圖，每張都要調(diào)尺寸、對齊、配色、加頁腳……做一次就累一次。2. Markdown 才是寫作最舒服的格式寫長文、列清單、貼代碼塊，md 最順手。但 md 不能直接發(fā)小紅書，中間缺一道「轉(zhuǎn)圖片」的工序。3. 風(fēng)格統(tǒng)一這個腳本直接固定配色，保證每張圖都同一個系列。4. 改一次，跑一次哪天文章改了幾個字、加了個小節(jié)，不用重新做圖。改 md，重新跑腳本，新圖就出來了，這才是「自動化」該有的樣子。一句話總結(jié)：把「寫」和「做圖」分開，你只管寫 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，不傳任何參數(shù)）等它跑完，圖片就出來了賬號、口號、封面小標(biāo)簽也能在那段配置里一起改（對應(yīng)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 本身需要瀏覽器里加載那個擴展，連不上時會自動提示你走手動。四、個性化部分大部分視覺規(guī)范（尺寸、配色、留白）已經(jīng)寫死在腳本里，一般不用動。你真正要關(guān)心的只有這幾處：要改什么改哪里示例文章路徑頂部MD_PATHr"C:/你的目錄/文章.md"輸出目錄頂部OUT_DIR（留空=和 md 同目錄）r""或r"C:/輸出"底部賬號署名頂部ACCOUNT或命令行--account"小紅書 / 公眾號：你的賬號"底部 slogan頂部SLOGAN或命令行--slogan"讓重復(fù)瀏覽自動化，把時間留給思考"封面右上小標(biāo)簽頂部PILL或命令行--pill"內(nèi)容分享"如果你想微調(diào)視覺風(fēng)格（不是必須）：單圖尺寸、留白、頁腳大?。涸谀_本頂部W / TOTAL_H / FOOTER_H / TOP_PAD / FONT_SIZE這幾個常量配色（綠色條、標(biāo)題顏色、代碼塊底色等）：在CSS = """..."""那段樣式里，全是普通 CSS，改顏色值即可一個小提醒：如果你習(xí)慣在# 大標(biāo)題下面用引用塊寫「來源說明 / PS / 前言」，這個工具會自動把它當(dāng)成正文里的橙色引言框，不會塞進封面。這樣封面就不會被一大段說明擠爆。排版補充：生成的是 3:4 豎圖，適合作為小紅書筆記里的多張配圖；五、完整代碼（md_to_images.py）下面是「通用版」代碼，頂部配置區(qū)用占位路徑，你拿到后填自己的即可。需要 Python 3 + 兩個庫：markdown（腳本會自動裝）和Pillow（畫頁腳用，沒裝的話pip install pillow）。#!/usr/bin/env python3# -*- coding: utf-8 -*-""" md_to_images.py — 把 Markdown 文章轉(zhuǎn)成小紅書豎圖（多張） 流程： md 文件（內(nèi)容源） ↓ 自動轉(zhuǎn)成帶 share-card 配色的長圖 HTML（自動取首個 H1 作封面標(biāo)題、其下首段作副標(biāo)題） stem-long.html ↓ 瀏覽器渲染（優(yōu)先 browser-skill / bsk，或手動用 Chrome 點下載） stem-long.png （1242 寬長圖） ↓ Pillow 切片 + 加統(tǒng)一頁腳 stem-文章圖_1~N.png 圖片規(guī)格（與分享圖一致）： - 每張 1242 × 1656（約 3:4 豎圖，小紅書正文常用比例） - 配色：白底卡片 / 頂部翠綠+琥珀條 / 藍色 H3 / 翠綠標(biāo)簽 / 琥珀色小節(jié)標(biāo)題欄 / 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 輸出目錄 # 可選參數(shù) --account "小紅書 / 公眾號：你的賬號" --slogan "一句話 slogan" --pill "封面小標(biāo)簽" """importosimportreimportsysimportglobimportshutilimportargparseimportsubprocess# ----------------------------------------------------------------------------# 配置# ----------------------------------------------------------------------------W=1242TOTAL_H=1656FOOTER_H=60CONTENT_H=TOTAL_H-FOOTER_H# 1596TOP_PAD=30# 第 2 張起頂部留白FONT_SIZE=19# 頁腳字號DEFAULT_SLOGAN="讓重復(fù)瀏覽自動化，把時間留給思考"DEFAULT_ACCOUNT="小紅書 / 公眾號：你的賬號"DEFAULT_PILL="內(nèi)容分享"# ===== 簡單模式配置（不在命令行傳參時自動使用）=====# 用法：把 MD_PATH 改成你的文章路徑，OUT_DIR 留空則輸出到 md 同目錄，# 然后直接運行本腳本（不傳任何命令參數(shù)）即可出圖。MD_PATH=r""# 待轉(zhuǎn)換的 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 直接作用于標(biāo)準(zhǔn) markdown 標(biāo)簽：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; } /* 頂部強調(diào)條（與分享圖一致） */ .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; } /* 二級標(biāo)題 = 小節(jié)標(biāo)題欄（琥珀色左條） */ 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; } /* 三級標(biāo)題（藍色） */ 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; } /* 行內(nèi)代碼 */ 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 轉(zhuǎn)換# ----------------------------------------------------------------------------defensure_markdown():try:importmarkdown# noqareturnmarkdownexceptImportError: