Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

JerryAction@jerryaction

Install

openclaw skills install @jerryaction/wechat-article-html

微信公众号文章 HTML 转换器

将 Markdown 源文件转换为微信公众号编辑器兼容的纯 HTML 格式。

转换规则（强制）

所有 Markdown 语法必须转为带内联样式的 HTML 标签。禁止输出任何残留 Markdown 语法。

标题映射

Markdown	HTML
`# 标题`	`<h1 style="margin:1.5em 0 0.5em;font-weight:700;">标题</h1>`
`## 标题`	`<h2 style="margin:1.5em 0 0.5em;font-weight:700;">标题</h2>`
`### 标题`	`<h3 style="margin:1.5em 0 0.5em;font-weight:700;">标题</h3>`
`#### 标题`	`<h4 style="margin:1.5em 0 0.5em;font-weight:700;">标题</h4>`

正文段落

text

<p style="margin:10px 0;font-size:14px;line-height:1.8;">内容</p>

列表

html

<ul style="margin:10px 0;padding-left:24px;">
  <li style="margin:4px 0;">内容</li>
</ul>

有序列表用 <ol style="margin:10px 0;padding-left:24px;">。

粗体

**文字** → <strong>文字</strong>

行内代码

`代码` → <code style="background:#f6f8fa;color:#005cc5;padding:1px 4px;border-radius:3px;font-size:0.9em;">代码</code>

表格

html

<table style="border-collapse:collapse;width:100%;font-size:14px;line-height:1.6;margin:10px 0;">
  <thead>
    <tr>
      <th style="background:#f6f8fa;border:1px solid #d0d7de;padding:6px 12px;text-align:left;font-weight:600;">表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border:1px solid #d0d7de;padding:6px 12px;">内容</td>
    </tr>
  </tbody>
</table>

引用块

html

<blockquote style="background:#f6f8fa;border-left:4px solid #0969da;margin:16px 0;padding:12px 20px;color:#1f2328;">
  <p style="margin:0;font-size:14px;line-height:1.8;">引用内容</p>
</blockquote>

代码块

代码块使用 <section> + 每行一个 <p> 的结构（微信编辑器会吞掉 <pre>/<code> 的空白和换行）：

html

<section style="background:#282c34;color:#abb2bf;border-radius:6px;padding:12px 16px;margin:10px 0;overflow-x:auto;">
  <p style="margin:0;padding:0;font-size:14px;line-height:1.6;">第一行代码</p>
  <p style="margin:0;padding:0;font-size:14px;line-height:1.6;">第二行代码</p>
</section>

代码块语法高亮配色（GitHub Dark × #282c34）

元素	CSS color 值
基础文本	`#ffffff`
关键字	`#ff7b72`
函数名	`#d2a8ff`
字符串	`#a5d6ff`
数字	`#79c0ff`
注释	`#8b949e`
内置命令	`#7ee787`
类名	`#f0883e`

行首缩进用   替换空格。注释行单独加 color:#8b949e。

配图

html

<figure style="text-align:center;margin:20px 0;">
  <img src="CDN_URL" style="max-width:100%;border-radius:8px;" alt="图片说明">
  <figcaption style="margin-top:8px;font-size:13px;color:#666;text-align:center;"></figcaption>
</figure>

配图位置：引言 blockquote 后面。

链接

[文字](url) → 纯文本「文字」（去掉链接语法，保留文字）

删除项

YAML front matter（--- 开头的元数据块）
--- 分隔线
本地图片路径（替换为 CDN URL）

工作流程

读取源 Markdown 文件
按上述规则逐行转换为 HTML
<section> 代码块原样保留（已是正确 HTML）
配图用 <figure> 包裹，CDN URL 替换本地路径
输出 *_for_paste.html 文件，供用户复制粘贴到微信草稿箱

关键字上色（可选）

用户可指定关键字上色方案。默认配色：

颜色	色值	用途
🔴 红	`#d73a49`	核心概念
🟣 紫	`#6f42c1`	工具/命令
🔵 蓝	`#005cc5`	参数/文件名
🟠 橙	`#e36209`	关键数值/信号

注意事项

禁止使用 <pre> / <code> 包裹代码块（微信会吞掉空白）
每行代码必须是独立的 <p> 元素
中文内容原样保留，不做任何修改或扩展
输出文件编码必须为 UTF-8（ensure_ascii=False）