Wechat Article Formatter

Name: Wechat Article Formatter
Author: bnd-1

bnd-1/wechat_article_mini

33 installs
1 repo stars
Updated April 12, 2026
bnd-1/wechat_article_mini

wechat-article-formatter is a skill that converts Markdown articles into beautified HTML formatted for WeChat public-account publishing using preset templates.

About

wechat-article-formatter is a skill that converts a Markdown article into styled HTML formatted for WeChat public accounts. A developer or writer invokes it after drafting an article to one-click beautify it. It defaults to a preset template, skips the H1 title (WeChat has its own title field), and converts code blocks to a WeChat-compatible format. This is the 'mini' fast variant that pairs with the WeChat writer and publisher skills. Docs are in Chinese.

Converts Markdown articles into WeChat-ready styled HTML
Defaults to a 'VSCode blue tech' template with no theme prompt
Converts code blocks into WeChat-compatible format via a Python script

Wechat Article Formatter by the numbers

33 all-time installs (skills.sh)
Ranked #1,393 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

wechat-article-formatter capabilities & compatibility

Capabilities: markdown to html · wechat formatting · code block conversion
Use cases: copywriting · marketing
Pricing: Free

From the docs

What wechat-article-formatter says it does

**默认使用 `VSCode 蓝色科技风` 模板**，不需要问用户选主题。

SKILL.md

**跳过 Markdown 中的 H1 标题**（微信有独立标题栏）

SKILL.md

写完文章 → **说"美化文章"触发本skill** → 说"推送到微信"触发 publisher

SKILL.md

npx skills add https://github.com/bnd-1/wechat_article_mini --skill wechat-article-formatter

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bnd-1/wechat_article_mini/wechat-article-formatter.svg)](https://skillselion.com/skills/bnd-1/wechat_article_mini/wechat-article-formatter)

Installs	33
repo stars	★ 1
Last updated	April 12, 2026
Repository	bnd-1/wechat_article_mini ↗

What it does

Convert a Markdown article into beautified WeChat-ready HTML using a default template, then hand off to the publisher skill.

Who is it for?

Writers who want a one-click Markdown-to-WeChat-HTML conversion with a sensible default template.

Skip if: Publishing the article; that is handled by the separate wechat-draft-publisher skill.

When should I use this skill?

The user says '美化文章', '转换为HTML', or '格式化' (beautify article / convert to HTML / format).

What you get

A WeChat-compatible styled HTML file ready to paste into the editor.

WeChat-ready HTML file (_formatted.html)

By the numbers

four selectable HTML templates
three-step workflow

Files

examples/
references/
scripts/
templates/

SKILL.mdMarkdownGitHub ↗

微信公众号文章格式化（小龙虾极速版）

核心理念：默认精美，一键完成

---

执行流程（3步搞定）

步骤1：找到文章

场景	处理方式
用户给了文件路径	直接用
用户粘贴了内容	先 Write 保存为 .md
刚写完文章	自动找最新的 .md 文件
只说"美化文章"	问一下路径

# 自动检测最新文章
ls -t *.md 2>/dev/null | head -1

步骤2：使用精美模板转换

默认使用 `VSCode 蓝色科技风` 模板，不需要问用户选主题。

执行方式： 1. 读取 examples/VSCode 蓝色科技风.html 模板 2. 跳过 Markdown 中的 H1 标题（微信有独立标题栏） 3. 在 HTML 开头添加： 4. 将 Markdown 内容映射到模板的组件结构中：

导语块 → 文章开头引子
序号章节标题 → H2 标题
功能卡片 → 要点列表
操作步骤 → 教程内容

5. 转换代码块格式（如有代码）：

   python scripts/convert-code-blocks.py input.html output.html

6. 输出 {文件名}_formatted.html

如果用户不满意默认模板，再提供选择：

模板	适用场景
VSCode 蓝色科技风	技术文章（默认）
红蓝对决·深度测评	对比评测
极客暗黑风	深度技术
现代极简风	通用文章

步骤3：告诉用户结果

✅ 文章已格式化！

文件：{输出路径}

你可以：
1. 说"推送到微信"→ 直接发布到公众号草稿箱
2. 在浏览器打开预览：file://{绝对路径}
3. 手动操作：浏览器打开HTML → Ctrl+A全选 → Ctrl+C复制 → 粘贴到微信编辑器

⚠️ 记得在微信编辑器的标题栏填写文章标题

---

错误处理

问题	解决
文件找不到	问用户路径
代码没高亮	检查 Markdown 是否指定了语言
图片不显示	提醒在微信编辑器重新上传
样式不满意	提供其他模板选择

---

与其他skill联动

写完文章 → 说"美化文章"触发本skill → 说"推送到微信"触发 publisher

使用示例

本文档提供3个完整的使用示例，展示如何使用 wechat-article-formatter skill 将Markdown文章转换为适合微信公众号的美化HTML。

---

示例1：单篇技术文章转换（科技风主题）

场景描述

你已经用 wechat-tech-writer skill 写好了一篇关于Claude Sonnet 4的技术文章，现在需要将其转换为美观的HTML格式，以便粘贴到微信公众号编辑器。

输入文件

文件路径: /home/user/articles/Claude_Sonnet_4介绍.md

文件内容节选:

# Claude Sonnet 4：AI推理能力的新巅峰

![封面图](cover.png)

## 什么是Claude Sonnet 4？

Claude Sonnet 4是Anthropic公司于2024年10月发布的最新大语言模型...

## 核心功能特性

### 1. 强大的推理能力

Claude Sonnet 4在复杂推理任务上表现出色，在多个基准测试中超越了GPT-4...

示例代码

import anthropic

client = anthropic.Anthropic(api_key="your-api-key") response = client.messages.create( model="claude-sonnet-4-20241022", max_tokens=1024, messages=[{"role": "user", "content": "解释量子计算原理"}] )


### 2. 多模态理解

支持图片、文档等多种输入格式...

> **提示**: Claude Sonnet 4在代码生成和调试任务上表现尤为出色。

## 性能对比

| 模型 | MMLU | HumanEval | MATH |
|------|------|-----------|------|
| Claude Sonnet 4 | 88.7% | 92.0% | 71.1% |
| GPT-4 Turbo | 86.4% | 90.2% | 68.3% |

## 总结

Claude Sonnet 4代表了AI推理能力的新高度...

执行步骤

步骤1：使用命令行转换

# 进入技能目录
cd /root/.claude/skills/wechat-article-formatter

# 转换文章（使用科技风主题）
python scripts/markdown_to_html.py \
  --input /home/user/articles/Claude_Sonnet_4介绍.md \
  --theme tech \
  --output /home/user/articles/Claude_Sonnet_4介绍.html \
  --preview

命令参数说明:

--input: 输入的Markdown文件路径
--theme tech: 使用科技风主题（蓝紫渐变，适合技术文章）
--output: 输出的HTML文件路径
--preview: 转换完成后自动在浏览器打开预览

步骤2：查看输出结果

控制台输出:

✅ 转换成功！
📄 输入文件: /home/user/articles/Claude_Sonnet_4介绍.md
📄 输出文件: /home/user/articles/Claude_Sonnet_4介绍.html
🎨 使用主题: tech
🌐 已在浏览器中打开预览

💡 提示：
   1. 在浏览器中打开HTML文件预览效果
   2. 使用浏览器的"审查元素"工具查看样式
   3. 复制HTML内容粘贴到微信公众号编辑器
   4. 在微信编辑器中可能需要微调图片和代码块

步骤3：在浏览器中预览

浏览器会自动打开生成的HTML文件，你会看到：

视觉效果:

✅ H1标题带有紫蓝渐变左侧边框
✅ H2标题带有渐变下划线
✅ H3标题带有紫色左侧边框
✅ 代码块使用Atom One Dark配色方案，深色背景
✅ 表格表头使用紫蓝渐变背景
✅ 引用块带有紫色左侧边框和浅紫色背景
✅ 图片居中显示，带有阴影效果

步骤4：复制到微信公众号编辑器

1. 在浏览器中按 Ctrl+A 选中全部内容 2. 按 Ctrl+C 复制 3. 打开微信公众号后台编辑器 4. 在编辑器中按 Ctrl+V 粘贴 5. 检查格式，微调图片位置（如需要） 6. 保存并预览

预期结果

HTML文件大小: ~50KB（包含内联CSS）

样式特点:

科技感强烈的蓝紫渐变配色
代码块专业的深色主题
表格和引用块视觉层次清晰
移动端自适应，阅读体验良好

关键学习点

1. 主题选择: 技术文章使用 tech 主题效果最佳 2. 预览功能: 使用 --preview 参数可以立即查看效果，无需手动打开文件 3. 内联样式: 生成的HTML包含所有内联样式，可以直接粘贴到微信编辑器 4. 代码高亮: 代码块自动应用语法高亮，保持专业外观

---

示例2：批量转换多篇文章（简约风主题）

场景描述

你有一个文章目录，包含10篇不同主题的文章，需要批量转换为HTML格式。这次使用简约风主题，适合更广泛的内容类型。

输入文件结构

/home/user/blog/
├── AI工具推荐.md
├── Python入门教程.md
├── 数据分析实战.md
├── 机器学习基础.md
├── Web开发技巧.md
├── Git使用指南.md
├── Docker容器化部署.md
├── 微服务架构解析.md
├── 前端性能优化.md
└── 数据库设计原则.md

执行步骤

步骤1：批量转换

# 批量转换目录下的所有Markdown文件
python scripts/batch_convert.py \
  --input /home/user/blog/ \
  --output /home/user/blog/html_output/ \
  --theme minimal \
  --workers 8

命令参数说明:

--input: 输入目录（包含多个Markdown文件）
--output: 统一输出目录
--theme minimal: 使用简约风主题（黑白灰，极简设计）
--workers 8: 使用8个并发线程加速转换

步骤2：查看转换进度

控制台输出:

📚 找到 10 个Markdown文件
🎨 使用主题: minimal
⚙️  并发数: 8

📁 输出目录: /home/user/blog/html_output/

🚀 开始转换...
────────────────────────────────────────────────────────────
✅ [1/10] AI工具推荐.md → AI工具推荐.html (0.34s)
✅ [2/10] Python入门教程.md → Python入门教程.html (0.42s)
✅ [3/10] 数据分析实战.md → 数据分析实战.html (0.38s)
✅ [4/10] 机器学习基础.md → 机器学习基础.html (0.45s)
✅ [5/10] Web开发技巧.md → Web开发技巧.html (0.31s)
✅ [6/10] Git使用指南.md → Git使用指南.html (0.29s)
✅ [7/10] Docker容器化部署.md → Docker容器化部署.html (0.36s)
✅ [8/10] 微服务架构解析.md → 微服务架构解析.html (0.41s)
✅ [9/10] 前端性能优化.md → 前端性能优化.html (0.33s)
✅ [10/10] 数据库设计原则.md → 数据库设计原则.html (0.37s)
────────────────────────────────────────────────────────────

📊 转换摘要
────────────────────────────────────────────────────────────
总文件数: 10
✅ 成功: 10
❌ 失败: 0
────────────────────────────────────────────────────────────
✨ 成功率: 100.0%

步骤3：验证输出文件

# 查看输出目录
ls -lh /home/user/blog/html_output/

# 输出结果
AI工具推荐.html          45K
Python入门教程.html      52K
数据分析实战.html        48K
机器学习基础.html        51K
Web开发技巧.html         43K
Git使用指南.html         39K
Docker容器化部署.html    47K
微服务架构解析.html      54K
前端性能优化.html        42K
数据库设计原则.html      46K

预期结果

转换速度: 使用8个并发线程，10篇文章共耗时约3.7秒（平均0.37秒/篇）

样式特点（简约风主题）:

极简的黑白灰配色
H1标题居中显示
H2标题带有淡灰色下划线
代码块使用浅灰色背景
表格使用GitHub风格
整体设计简洁大方，适合各类内容

关键学习点

1. 批量处理: 使用 batch_convert.py 可以一次性转换整个目录 2. 并发加速: --workers 参数控制并发线程数，提高处理速度 3. 统一输出: --output 参数将所有HTML文件输出到同一目录，方便管理 4. 主题一致性: 批量转换时使用同一主题，保持文章风格统一

---

示例3：实时预览编辑（商务风主题）

场景描述

你正在撰写一篇商业分析报告，需要边写边预览效果，确保格式符合预期。这次使用商务风主题，适合专业报告和企业内容。

输入文件

文件路径: /home/user/reports/2024_Q4_业绩分析.md

初始内容:

# 2024年Q4业绩分析报告

## 执行摘要

本季度公司营收达到1.2亿元，同比增长35%...

## 关键指标

| 指标 | Q4 2024 | Q3 2024 | 同比增长 |
|------|---------|---------|----------|
| 营收 | 1.2亿 | 0.9亿 | 35% |
| 利润 | 2400万 | 1800万 | 33% |

## 市场分析

...

执行步骤

步骤1：启动实时预览服务

# 启动实时预览
python scripts/preview_generator.py \
  --input /home/user/reports/2024_Q4_业绩分析.md \
  --theme business \
  --port 8080

控制台输出:

🚀 启动实时预览服务...
📄 监听文件: /home/user/reports/2024_Q4_业绩分析.md
📁 输出目录: /home/user/preview
🎨 使用主题: business

🌐 本地服务器已启动: http://localhost:8080
🌐 已在浏览器中打开预览: http://localhost:8080/2024_Q4_业绩分析.html

👀 正在监听文件变化...
💡 提示：修改Markdown文件后，刷新浏览器即可看到最新效果
⏹️  按Ctrl+C停止服务

步骤2：在编辑器中修改Markdown文件

在你的Markdown编辑器（如VS Code）中继续编辑文件：

# 2024年Q4业绩分析报告

## 执行摘要

本季度公司营收达到1.2亿元，同比增长35%。核心业务表现强劲，新产品线贡献显著。

## 关键指标

| 指标 | Q4 2024 | Q3 2024 | 同比增长 |
|------|---------|---------|----------|
| 营收 | 1.2亿 | 0.9亿 | 35% |
| 利润 | 2400万 | 1800万 | 33% |
| 客户数 | 5000+ | 3800+ | 32% |

## 市场分析

### 行业趋势

当前市场呈现以下特点：

1. **数字化转型加速** - 企业对AI工具的需求持续增长
2. **市场竞争加剧** - 新进入者增多，需要差异化策略
3. **客户需求多样化** - 定制化服务成为竞争优势

> **重要提示**: 下季度需要重点关注客户留存率和复购率。

## 未来展望

基于当前趋势，预计Q1 2025营收将达到1.5亿元...

步骤3：保存并查看实时更新

保存Markdown文件后，控制台显示：

[14:35:22] ✅ 已更新预览: 2024_Q4_业绩分析.html

在浏览器中按 F5 刷新，立即看到更新后的效果。

步骤4：继续编辑直到满意

重复"编辑 → 保存 → 刷新浏览器"的流程，直到文章格式完全符合预期。

步骤5：停止预览服务

编辑完成后，在控制台按 Ctrl+C 停止服务：

^C
👋 预览服务已停止

生成的HTML文件保存在 /home/user/preview/2024_Q4_业绩分析.html，可以直接使用。

预期结果

样式特点（商务风主题）:

专业的深蓝 + 金色配色
H1标题带有金色下划线
H2标题带有金色左侧边框
表格表头使用深蓝渐变背景
引用块使用淡蓝色背景
整体风格稳重大气，适合商务报告

编辑体验:

实时监听文件变化，无需手动转换
刷新浏览器即可查看最新效果
本地HTTP服务器，预览效果接近真实环境
边写边看，提高编辑效率

关键学习点

1. 实时预览: preview_generator.py 提供了边写边看的编辑体验 2. 文件监听: 保存Markdown文件后自动重新转换，无需手动操作 3. 本地服务器: HTTP服务器提供更真实的预览环境 4. 主题选择: 商务风主题适合报告、分析等专业内容 5. 高效工作流: 实时预览大幅提高文章格式调整的效率

---

三个示例对比总结

特性	示例1：单篇转换	示例2：批量转换	示例3：实时预览
场景	转换已完成的单篇文章	批量处理多篇文章	边写边预览
使用脚本	`markdown_to_html.py`	`batch_convert.py`	`preview_generator.py`
主题	tech（科技风）	minimal（简约风）	business（商务风）
文件数量	1篇	10篇	1篇（持续编辑）
转换时间	~0.4秒	~3.7秒（8线程并发）	实时（<1秒）
适用场景	技术文章、教程	博客、文章库	报告、专业内容
特色功能	`--preview`自动打开浏览器	`--workers`并发加速	文件监听+HTTP服务器
输出位置	指定路径	统一输出目录	预览目录

最佳实践建议

1. 主题选择建议

tech（科技风）: 适合技术文章、开发教程、AI/科技内容
特点：蓝紫渐变，现代科技感，代码高亮专业
示例：AI模型介绍、编程教程、技术解析

minimal（简约风）: 适合通用文章、文学作品、简洁风格
特点：黑白灰，极简设计，易读性强
示例：生活随笔、读书笔记、产品介绍

business（商务风）: 适合商业分析、企业内容、专业报告
特点：深蓝金色，专业稳重，数据展示清晰
示例：业绩报告、市场分析、商业计划

2. 工作流程建议

方案A：先写后转（推荐用于成熟内容） 1. 使用 wechat-tech-writer 完成文章写作 2. 使用 markdown_to_html.py 转换单篇文章 3. 使用 --preview 参数在浏览器检查效果 4. 复制到微信公众号编辑器发布

方案B：边写边看（推荐用于格式要求高的内容） 1. 启动 preview_generator.py 实时预览服务 2. 在Markdown编辑器中写作 3. 保存后刷新浏览器查看效果 4. 重复直到满意 5. 复制到微信公众号编辑器发布

方案C：批量处理（推荐用于历史文章整理） 1. 将多篇Markdown文章放在同一目录 2. 使用 batch_convert.py 批量转换 3. 逐一在浏览器中检查效果 4. 复制到微信公众号编辑器批量发布

3. 性能优化建议

单篇文章: 直接使用 markdown_to_html.py，速度最快
少量文章（<5篇）: 使用 batch_convert.py --workers 4
大量文章（≥10篇）: 使用 batch_convert.py --workers 8 或更高
实时编辑: 使用 preview_generator.py，文件变化后<1秒完成转换

4. 常见问题处理

问题1：粘贴到微信编辑器后样式丢失

原因：微信编辑器会过滤部分CSS属性
解决：使用内联样式（本工具已自动处理）

问题2：代码块显示不正常

原因：微信不支持JavaScript语法高亮
解决：使用CSS实现的静态语法高亮（本工具已实现）

问题3：图片无法显示

原因：微信不支持本地图片路径
解决：在微信编辑器中重新上传图片，或使用图床URL

问题4：表格在手机上显示异常

原因：表格过宽超出屏幕
解决：使用响应式表格样式（本工具已实现），或减少列数

---

反馈与改进

如果你在使用过程中遇到问题或有改进建议，欢迎： 1. 查看 references/ 目录下的详细文档 2. 修改 templates/ 目录下的CSS主题文件以自定义样式 3. 参考本文档中的最佳实践建议

<!-- 【外层容器】控制全局字体、行高、对齐方式 -->
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.8; color: #333; padding: 15px; max-width: 100%; box-sizing: border-box; background-color: #ffffff; text-indent: 0;">

    <!-- ⚠️ 标题请在微信公众号编辑器中单独填写，不要在 HTML 中包含 -->

    <!-- 【1. 导语/摘要块】用于文章开篇的背景介绍 - 使用TABLE结构确保微信兼容性 -->
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 30px;">
        <tr>
            <td style="background-color: #f0f7ff; border-left: 5px solid #007acc; padding: 20px; text-align: left;">
                <p style="margin: 0; font-size: 15px; color: #444; text-indent: 0; text-align: left;">
                    这里填写导语内容。例如：如果你最近打开某某网站，会发现一个显眼的标语...
                </p>
            </td>
        </tr>
    </table>

    <!-- 【2. 章节标题模块】序号+文字（已解决对齐与间距问题） -->
    <h2 style="margin: 40px 0 20px; text-align: left; line-height: 32px;">
        <span style="display: inline-block; background-color: #007acc; color: #fff; width: 28px; height: 28px; border-radius: 50%; text-align: center; line-height: 28px; font-size: 14px; vertical-align: middle;">01</span>
        <span style="display: inline-block; font-size: 20px; color: #007acc; font-weight: bold; vertical-align: middle; margin-left: 8px;">
            这里填写章节大标题
        </span>
    </h2>

    <!-- 【3. 标准正文】 -->
    <p style="margin-bottom: 15px; text-indent: 0; text-align: left;">
        这里填写正常的正文段落。可以使用 <strong style="color: #007acc;">蓝色加粗</strong> 来强调核心词汇。
    </p>

    <!-- 【4. 重点/比喻对比块】用于重点强调或打比方 - 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
        <tr>
            <td style="background-color: #fffaf0; border-left: 5px solid #ff9800; padding: 15px; font-size: 15px; color: #666; text-indent: 0;">
                <p style="margin-bottom: 8px; text-indent: 0;">🏗️ <strong>维度 A：</strong> 描述旧的方式或基础内容。</p>
                <p style="margin: 0; text-indent: 0;">✨ <strong>维度 B：</strong> 描述新的方式或核心亮点。</p>
            </td>
        </tr>
    </table>

    <!-- 【5. 核心功能/要点卡片】适合列出3-4个关键功能点 - 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
        <tr>
            <td style="background-color: #f0f7ff; border-left: 5px solid #007acc; padding: 15px;">
                <strong style="color: #007acc; display: block; margin-bottom: 5px;">📍 功能/要点名称</strong>
                <p style="margin: 0; font-size: 14px; color: #555; text-indent: 0;">这里详细描述该要点的内容。</p>
            </td>
        </tr>
    </table>
    <!-- 如有更多卡片，复制上方 table 即可 -->

    <table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
        <tr>
            <td style="background-color: #f0fff4; border-left: 5px solid #10b981; padding: 15px;">
                <strong style="color: #10b981; display: block; margin-bottom: 5px;">📍 功能/要点名称2</strong>
                <p style="margin: 0; font-size: 14px; color: #555; text-indent: 0;">这里详细描述该要点的内容。</p>
            </td>
        </tr>
    </table>

    <!-- 【6. 列表操作指南】适合步骤说明 -->
    <p style="margin-bottom: 10px; text-indent: 0; text-align: left; font-weight: bold;">具体操作步骤：</p>
    <ul style="padding-left: 20px; color: #444; text-indent: 0;">
        <li style="margin-bottom: 10px;">第一步：内容描述。</li>
        <li style="margin-bottom: 10px;">第二步：内容描述。</li>
    </ul>

    <!-- 【7. 总结/文末语】 -->
    <h2 style="margin: 40px 0 20px; text-align: left; line-height: 32px;">
        <span style="display: inline-block; background-color: #007acc; color: #fff; width: 28px; height: 28px; border-radius: 50%; text-align: center; line-height: 28px; font-size: 14px; vertical-align: middle;">✓</span>
        <span style="display: inline-block; font-size: 20px; color: #007acc; font-weight: bold; vertical-align: middle; margin-left: 8px;">总结</span>
    </h2>

    <!-- 【8. 总结内容块】 - 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
        <tr>
            <td style="background-color: #fff5f0; border-left: 5px solid #ff6b35; padding: 20px;">
                <p style="margin: 0; font-size: 15px; color: #333;">这里填写总结内容。可以总结全文要点，给出行动建议。</p>
            </td>
        </tr>
    </table>

    <!-- 9. 资源链接（干净的页脚） -->
    <section style="border-top: 1px dashed #ccc; padding-top: 20px; font-size: 14px; color: #888; text-indent: 0;">
        <p style="margin-bottom: 10px; font-weight: bold; text-indent: 0;">🔗 相关资源：</p>
        <p style="margin: 5px 0; text-indent: 0;">资源 A：<span style="color: #1a2a6c;">domain-a.com</span></p>
        <p style="margin: 5px 0; text-indent: 0;">资源 B：<span style="color: #1a2a6c;">domain-b.com</span></p>
    </section>

</div>

<!-- 【1. 模拟文档属性区】用于展示文章元数据 (作者/分类/时间) -->
<!-- 使用表格结构，带有轻微的底部边框 -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 30px; border-bottom: 1px solid #e0e0e0;">
    <tr>
        <td style="padding-bottom: 15px;">
            <p style="margin: 0 0 5px 0; font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 1px;">Product Weekly</p>
            <h1 style="margin: 0; font-size: 22px; font-weight: bold; color: #333; line-height: 1.4;">
                这里填写文章主标题
            </h1>
            <div style="margin-top: 10px; font-size: 14px; color: #666;">
                <span style="background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: 12px; margin-right: 8px;">PM 笔记</span>
                <span style="background: #e3f2fd; color: #0277bd; padding: 2px 6px; border-radius: 4px; font-size: 12px;">深度复盘</span>
            </div>
        </td>
    </tr>
</table>

<!-- 【2. 核心观点/摘要块（Callout）】 -->
<!-- 经典的文档“提示块”风格，用于写摘要或核心结论 -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 30px;">
    <tr>
        <td style="background-color: #f7f9fa; border-radius: 6px; padding: 16px; border: 1px solid #ebeced;">
            <p style="margin: 0; font-size: 16px; margin-bottom: 5px;">💡 <strong>核心观点</strong></p>
            <p style="margin: 0; font-size: 15px; color: #555;">
                这里填写文章的 TL;DR（太长不看版）。例如：本文分析了 X 功能的迭代逻辑，结论是留存率提升的关键在于优化首屏加载体验。
            </p>
        </td>
    </tr>
</table>

<!-- 【3. 章节标题】带有左侧色条的文档标题风格 -->
<h2 style="margin: 40px 0 20px; text-align: left; line-height: 1.5;">
    <span style="display: inline-block; border-left: 4px solid #3370ff; padding-left: 12px; font-size: 18px; color: #333; font-weight: bold;">
        01. 需求背景与洞察
    </span>
</h2>

<!-- 【4. 标准正文】 -->
<p style="margin-bottom: 15px; font-size: 15px; color: #37352f;">
    这里是正文部分。作为产品经理，我们经常需要拆解复杂的问题。可以使用 <span style="background-color: #fff5cc; padding: 0 4px; border-radius: 2px; color: #333;">高亮底色</span> 来标记关键指标或结论，这种风格类似于在文档中做标记。
</p>

<!-- 【5. 用户故事/场景卡片（User Story）】 -->
<!-- 适合描述用户痛点或场景 -->
<table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
    <tr>
        <!-- 左侧头像模拟列 -->
        <td style="width: 50px; vertical-align: top; padding-right: 10px;">
            <div style="width: 40px; height: 40px; background-color: #f0f0f0; border-radius: 50%; text-align: center; line-height: 40px; font-size: 20px;">👤</div>
        </td>
        <!-- 右侧对话气泡 -->
        <td style="background-color: #f5f7ff; border-radius: 0 12px 12px 12px; padding: 15px; position: relative;">
            <p style="margin: 0; font-size: 12px; color: #3370ff; font-weight: bold; margin-bottom: 5px;">User Story @典型用户</p>
            <p style="margin: 0; font-size: 14px; color: #444; font-style: italic;">
                "作为一个高频用户，我每次打开 App 都要点击 4 次才能找到我的订单，这让我感到非常沮丧，尤其是在赶时间的时候。"
            </p>
        </td>
    </tr>
</table>

<!-- 【6. 逻辑分析/框架图替代方案】 -->
<!-- 用列表展示 SWOT、5W1H 或 迭代计划 -->
<div style="border: 1px solid #e0e0e0; border-radius: 6px; padding: 15px; margin: 20px 0;">
    <p style="margin: 0 0 10px 0; font-weight: bold; font-size: 14px; color: #666; border-bottom: 1px solid #eee; padding-bottom: 8px;">📌 迭代计划 (Roadmap)</p>
    
    <p style="margin: 8px 0; font-size: 14px; display: flex; align-items: center;">
        <span style="display: inline-block; width: 14px; height: 14px; background: #e0e0e0; border-radius: 3px; margin-right: 8px; flex-shrink: 0;"></span>
        <span style="text-decoration: line-through; color: #999;">P0: 基础功能上线 (Done)</span>
    </p>
    <p style="margin: 8px 0; font-size: 14px; display: flex; align-items: center;">
        <span style="display: inline-block; width: 14px; height: 14px; border: 1px solid #3370ff; background: #3370ff; border-radius: 3px; margin-right: 8px; position: relative; flex-shrink: 0;">
             <span style="color:white; font-size: 10px; position: absolute; top: -2px; left: 2px;">✓</span>
        </span>
        <span>P1: 核心体验优化 (Doing)</span>
    </p>
    <p style="margin: 8px 0; font-size: 14px; display: flex; align-items: center;">
        <span style="display: inline-block; width: 14px; height: 14px; border: 1px solid #ccc; border-radius: 3px; margin-right: 8px; flex-shrink: 0;"></span>
        <span>P2: 数据后台搭建 (Todo)</span>
    </p>
</div>

<!-- 【7. 数据对比/AB Test 结果块】 -->
<!-- 适合展示数据变化，使用左右两列结构 -->
<table style="width: 100%; border-collapse: separate; border-spacing: 5px 0; margin: 20px 0;">
    <tr>
        <td style="background-color: #fff1f0; padding: 15px; border-radius: 4px; text-align: center; width: 50%;">
            <p style="margin: 0; font-size: 12px; color: #888;">旧方案转化率</p>
            <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #cf1322;">12.5%</p>
        </td>
        <td style="background-color: #f6ffed; padding: 15px; border-radius: 4px; text-align: center; width: 50%;">
            <p style="margin: 0; font-size: 12px; color: #888;">新方案转化率</p>
            <p style="margin: 5px 0 0; font-size: 24px; font-weight: bold; color: #389e0d;">18.2%</p>
            <p style="margin: 0; font-size: 10px; color: #389e0d;">⬆️ 提升显著</p>
        </td>
    </tr>
</table>

<!-- 章节 2 -->
<h2 style="margin: 40px 0 20px; text-align: left; line-height: 1.5;">
    <span style="display: inline-block; border-left: 4px solid #3370ff; padding-left: 12px; font-size: 18px; color: #333; font-weight: bold;">
        02. 解决方案拆解
    </span>
</h2>

<p style="margin-bottom: 15px; font-size: 15px; color: #37352f;">
    基于上述数据，我们制定了新的产品策略。以下是具体的实施细节：
</p>

<!-- 【8. 引用块】用于强调方法论或名言 -->
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
    <tr>
        <td style="border-left: 3px solid #333; padding-left: 15px; font-style: italic; color: #666;">
            <p style="margin: 0;">"Don't make me think. (不要让用户思考)"</p>
            <p style="margin: 5px 0 0; font-size: 12px; color: #999;">—— Steve Krug</p>
        </td>
    </tr>
</table>

<!-- 【9. 总结/行动建议】 -->
<h2 style="margin: 40px 0 20px; text-align: left; line-height: 1.5;">
    <span style="display: inline-block; background-color: #3370ff; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 14px; vertical-align: middle; margin-right: 8px;">SOP</span>
    <span style="display: inline-block; font-size: 18px; color: #333; font-weight: bold; vertical-align: middle;">
        后续行动建议
    </span>
</h2>

<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
    <tr>
        <td style="background-color: #f7f7f5; padding: 20px; border-radius: 6px;">
            <ul style="margin: 0; padding-left: 20px; color: #37352f; font-size: 15px;">
                <li style="margin-bottom: 8px;"><strong>短期：</strong>完成 A/B 测试全量上线。</li>
                <li style="margin-bottom: 8px;"><strong>中期：</strong>监控漏斗数据，关注流失率。</li>
                <li><strong>长期：</strong>探索 AI 辅助决策的可能性。</li>
            </ul>
        </td>
    </tr>
</table>

<!-- 【10. 底部元数据】 -->
<section style="border-top: 1px solid #eee; margin-top: 40px; padding-top: 20px; font-size: 13px; color: #999; text-align: center;">
    <p style="margin-bottom: 5px;">Created with Product Thinking</p>
    <p style="margin: 0;">
        <span style="margin: 0 5px;">🔗 需求文档</span> | 
        <span style="margin: 0 5px;">📊 数据看板</span>
    </p>
</section>

<!-- 全局容器 -->
<section style="margin: 10px auto; max-width: 100%; font-family: -apple-system-font, Helvetica, Arial, sans-serif; color: #000; line-height: 1.7; text-align: justify;">

    <!-- 1. 醒目开篇框：使用 rgba 避免遮挡，边框改用 solid color -->
    <section style="background-color: #ccff00; border: 3px solid #000; padding: 20px; margin-bottom: 40px; box-shadow: 6px 6px 0px rgba(0,0,0,0.8);">
        <h1 style="margin: 0 0 10px 0; font-size: 24px; font-weight: 900; line-height: 1.2; color: #000;">
            WAKE UP!<br>DESIGN TRENDS
        </h1>
        <p style="margin: 0; font-size: 14px; font-weight: bold; color: #000;">
            高对比度柠檬黄 + 粗黑框。在深色模式下，微信通常会降低黄色的亮度，但文字依然保持对比，这是安全的。
        </p>
    </section>

    <!-- 2. 章节标题：反白胶囊 -->
    <section style="margin: 40px 0 20px; text-align: left;">
        <span style="display: inline-block; background: #000; color: #fff; padding: 6px 14px; font-weight: bold; font-size: 16px; border-radius: 50px; border: 2px solid #000;">
            # 01. 潮流趋势
        </span>
    </section>

    <!-- 3. 正文 -->
    <p style="margin-bottom: 20px; font-size: 16px; font-weight: 500; color: #222;">
        正文部分。这里不追求细腻，而是追求<span style="background-color: #b388ff; color: #fff; padding: 0 4px;">态度的表达</span>。去除渐变背景色，改用实色背景强调，在任何模式下都清晰。
    </p>

    <!-- 4. 对话框/Tip -->
    <section style="border: 3px solid #000; margin: 30px 0;">
        <div style="background: #000; color: #fff; padding: 5px 10px; font-weight: bold; font-size: 12px;">
            SYSTEM MESSAGE
        </div>
        <div style="padding: 15px; background: transparent;">
            <p style="margin: 0; font-family: monospace; font-weight: bold; color: #333;">
                > 这里适合放极客观点。<br>> 这种简单的黑白结构，在深色模式下会自动反转（黑变白，白变黑），完全兼容。
            </p>
        </div>
    </section>

    <!-- 5. 装饰性页脚 -->
    <div style="margin-top: 50px; height: 10px; background: repeating-linear-gradient(45deg, #000, #000 10px, transparent 10px, transparent 20px); border-top: 2px solid #000; border-bottom: 2px solid #000;"></div>
    <p style="text-align: center; font-weight: bold; margin-top: 10px; color: #000;">KEEP IT REAL.</p>

</section>

<!-- 全局容器 -->
<section style="margin: 10px auto; max-width: 100%; font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; color: #333; line-height: 1.75; letter-spacing: 0.5px; text-align: justify;">

    <!-- 1. 顶部装饰：保留渐变条（Div背景渐变是安全的） -->
    <section style="height: 6px; background: linear-gradient(90deg, #9b51e0, #2f80ed, #56ccf2); border-radius: 3px; margin-bottom: 30px; opacity: 0.9;"></section>

    <!-- 2. 摘要块：用半透明边框代替纯玻璃态，适配暗黑模式 -->
    <section style="background-color: rgba(244, 246, 248, 0.5); border: 1px solid #e1e4e8; border-radius: 8px; padding: 20px; margin-bottom: 35px;">
        <h3 style="margin: 0 0 10px 0; font-size: 15px; color: #2f80ed; font-weight: bold; letter-spacing: 1px;">INSIGHT / 洞察</h3>
        <p style="margin: 0; font-size: 15px; color: #555;">
            “我们正处于从‘弱人工智能’向‘通用人工智能（AGI）’跃迁的关键奇点。本文将探讨 Multi-modal（多模态）融合的最新进展。”
        </p>
    </section>

    <!-- 3. 章节标题：实色字 + 底部渐变装饰线 -->
    <section style="margin: 40px 0 20px; display: inline-block;">
        <span style="font-size: 20px; font-weight: 900; color: #2f80ed; display: block; margin-bottom: 4px;">
            01. 模型架构的演进
        </span>
        <!-- 用这个线条代替文字渐变，效果一样好且兼容 -->
        <span style="display: block; width: 100%; height: 4px; background: linear-gradient(90deg, #2f80ed, #9b51e0); border-radius: 2px;"></span>
    </section>

    <p style="margin-bottom: 20px; font-size: 16px; color: #333;">
        传统的 Transformer 架构面临长文本处理的挑战。最近，<strong style="color: #2f80ed;">MoE (Mixture of Experts)</strong> 混合专家模型成为了降低推理成本的首选方案。
    </p>

    <!-- 4. 数据可视化：使用标准边框，确保深色模式可见 -->
    <section style="padding: 15px; border: 1px solid #eee; border-radius: 8px; margin: 25px 0;">
        <p style="margin: 0 0 10px 0; font-size: 12px; color: #888; font-weight: bold;">推理速度 (Tokens/sec)</p>
        <!-- A -->
        <div style="margin-bottom: 12px;">
            <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: #555;">
                <span>Groq LPU</span>
                <span>500 T/s</span>
            </div>
            <div style="width: 100%; background: #f0f0f0; height: 6px; border-radius: 3px; overflow: hidden;">
                <div style="width: 95%; background: #2f80ed; height: 6px;"></div>
            </div>
        </div>
        <!-- B -->
        <div>
            <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: #555;">
                <span>Standard GPU</span>
                <span>80 T/s</span>
            </div>
            <div style="width: 100%; background: #f0f0f0; height: 6px; border-radius: 3px; overflow: hidden;">
                <div style="width: 25%; background: #ccc; height: 6px;"></div>
            </div>
        </div>
    </section>

    <!-- 5. 引用块 -->
    <section style="margin: 30px 0; padding-left: 15px; border-left: 4px solid #9b51e0;">
        <p style="margin: 0; font-size: 17px; font-weight: normal; color: #555; font-style: italic;">
            "Scale is all you need? Maybe not anymore. Data quality is the new gold."
        </p>
        <p style="margin: 8px 0 0 0; font-size: 12px; color: #999;">— Sam Altman, OpenAI</p>
    </section>

    <!-- 页脚 -->
    <section style="margin-top: 50px; text-align: center;">
        <span style="display: inline-block; width: 40px; height: 3px; background: #eee;"></span>
        <p style="font-size: 12px; color: #ccc; margin-top: 8px;">FUTURE INTELLIGENCE WEEKLY</p>
    </section>

</section>

<!-- 全局容器：移除强制白色背景，改为透明，字体设为深灰 -->
<div style="font-family: 'Consolas', 'Monaco', 'PingFang SC', monospace; line-height: 1.8; color: #333; padding: 15px; text-align: justify;">

    <!-- 1. 顶部导语区：模拟终端窗口 (使用table确保微信兼容性) -->
    <!-- 使用 table 而非 section，确保边框在微信中完整显示 -->
    <table style="width: 100%; border: 2px solid #1e2229; border-radius: 4px; margin-bottom: 30px; border-collapse: separate; border-spacing: 0; background-color: #282c34;">
        <tbody>
            <!-- 模拟 Mac 窗口红绿灯 -->
            <tr>
                <td style="background: #21252b; padding: 8px 12px; border: none; border-bottom: 1px solid #181a1f;">
                    <span style="display: inline-block; width: 10px; height: 10px; background: #ff5f56; border-radius: 50%; margin-right: 6px;"></span>
                    <span style="display: inline-block; width: 10px; height: 10px; background: #ffbd2e; border-radius: 50%; margin-right: 6px;"></span>
                    <span style="display: inline-block; width: 10px; height: 10px; background: #27c93f; border-radius: 50%;"></span>
                </td>
            </tr>
            <!-- 内容区：文字颜色改为更亮的颜色，确保高对比度 -->
            <tr>
                <td style="padding: 20px; background-color: #282c34; border: none;">
                    <p style="margin: 0; color: #dcdfe4; font-size: 14px; line-height: 1.6;">
                        <span style="color: #c678dd;">import</span> { <span style="color: #e06c75;">Future</span> } <span style="color: #c678dd;">from</span> <span style="color: #98c379;">'Programming'</span>;
                    </p>
                    <p style="margin: 10px 0 0 0; color: #7f848e; font-style: italic;">// 这里填写导语内容</p>
                    <p style="margin: 5px 0 0 0; color: #d19a66;">
                        "AI正在重塑开发的边界，我们不仅在写代码，也在编织氛围。"
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 2. 章节标题 -->
    <section style="margin: 40px 0 20px;">
        <h2 style="margin: 0; border-bottom: 2px solid #61afef; display: inline-block; padding-bottom: 5px;">
            <span style="color: #007acc; font-weight: bold; font-size: 20px;">&gt; Step_01.</span>
            <span style="font-size: 20px; color: #333; font-weight: bold; margin-left: 5px;">章节名称内容</span>
        </h2>
    </section>

    <p style="margin-bottom: 15px; color: #333;">
        正文内容放在这里。删除了 `text-indent`，因为代码风通常不缩进。
        <span style="background-color: rgba(0,0,0,0.05); color: #e05260; padding: 2px 6px; border-radius: 4px; border: 1px solid #e0e0e0; font-family: monospace; font-size: 14px;">Highlight Code</span>
        使用了半透明背景，这样在深色模式下会自动变深，不会刺眼。
    </p>

    <!-- 代码块：深色背景 + 语法高亮 -->
    <!-- ⚠️ 重要：微信不支持 <pre> 标签，必须使用 <div> + <br> + &nbsp; 格式 -->
    <!-- ⚠️ 空格必须用 &nbsp;，换行必须用 <br>，否则微信会删除所有空格 -->
    <p style="margin-bottom: 10px; color: #333;">示例代码：</p>
    <section style="background-color: #282c34; border-radius: 4px; border: 1px solid #1e2229; padding: 15px; margin: 15px 0; overflow-x: auto;">
        <div style="margin: 0; color: #dcdfe4; font-size: 13px; line-height: 1.6; font-family: 'Consolas', 'Monaco', monospace;"><span style="color: #c678dd;">import</span>&nbsp;asyncio<br>
<br>
<span style="color: #c678dd;">async</span>&nbsp;<span style="color: #c678dd;">def</span>&nbsp;<span style="color: #61dafb;">main</span>():<br>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c678dd;">for</span>&nbsp;i&nbsp;<span style="color: #c678dd;">in</span>&nbsp;<span style="color: #61dafb;">range</span>(<span style="color: #d19a66;">10</span>):<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #61dafb;">print</span>(<span style="color: #98c379;">f"Hello&nbsp;</span><span style="color: #98c379;">{</span>i<span style="color: #98c379;">}</span><span style="color: #98c379;">"</span>)<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c678dd;">await</span>&nbsp;asyncio.<span style="color: #61dafb;">sleep</span>(<span style="color: #d19a66;">1</span>)</div>
    </section>

    <!-- 3. 数据展示：列表式布局（替代表格，避免微信圆角问题）-->
    <!-- ⚠️ 重要：微信对 table 标签强制添加圆角，无法覆盖 -->
    <!-- 使用列表式布局：左侧竖线 + 分隔线，完全直角 -->
    <div style="border-left: 3px solid #282c34; margin: 20px 0; padding-left: 0;">
        <div style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0;">
            <strong style="color: #282c34;">数据项1：</strong><span style="color: #666; margin-left: 8px;">具体内容描述</span>
        </div>
        <div style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0;">
            <strong style="color: #282c34;">数据项2：</strong><span style="color: #666; margin-left: 8px;">具体内容描述</span>
        </div>
        <div style="padding: 12px 15px;">
            <strong style="color: #282c34;">数据项3：</strong><span style="color: #666; margin-left: 8px;">具体内容描述</span>
        </div>
    </div>

    <!-- ⚠️ 对比式列表（3列对比改为分组列表）-->
    <!-- 用于展示产品对比、功能对比等场景 -->
    <div style="border-left: 3px solid #282c34; margin: 20px 0; padding-left: 0;">
        <div style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0;">
            <strong style="color: #282c34;">对比维度1：</strong><br>
            <span style="color: #666; margin-left: 8px; display: inline-block; margin-top: 5px;">• 产品A：特性描述</span><br>
            <span style="color: #666; margin-left: 8px; display: inline-block;">• 产品B：特性描述</span>
        </div>
        <div style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0;">
            <strong style="color: #282c34;">对比维度2：</strong><br>
            <span style="color: #666; margin-left: 8px; display: inline-block; margin-top: 5px;">• 产品A：特性描述</span><br>
            <span style="color: #666; margin-left: 8px; display: inline-block;">• 产品B：特性描述</span>
        </div>
        <div style="padding: 12px 15px;">
            <strong style="color: #282c34;">对比维度3：</strong><br>
            <span style="color: #666; margin-left: 8px; display: inline-block; margin-top: 5px;">• 产品A：特性描述</span><br>
            <span style="color: #666; margin-left: 8px; display: inline-block;">• 产品B：特性描述</span>
        </div>
    </div>

    <!-- 4. 提示/卡片块：改为线框风格（Wireframe）-->
    <!-- 纯色块风险大，改为边框+浅底，兼容性最强 -->
    <section style="margin: 25px 0; border: 2px solid #333; padding: 0; background-color: rgba(255,255,255,0.5);">
        <div style="background: #333; color: #fff; padding: 4px 10px; font-size: 12px; font-weight: bold; display: inline-block;">
            PRO TIP:
        </div>
        <div style="padding: 15px;">
            <p style="margin: 0; color: #444; font-size: 15px; font-weight: bold;">
                这里是核心结论。
            </p>
            <p style="margin: 5px 0 0 0; color: #666; font-size: 14px; line-height: 1.6;">
                我们将背景改为了线框风格。这种设计在Light Mode下很干净，在Dark Mode下边框会自动反白，内容极其清晰。
            </p>
        </div>
    </section>

    <!-- 4. 资源链接 -->
    <section style="border-top: 1px dashed #bbb; margin-top: 40px; padding-top: 20px; font-size: 14px; color: #666;">
        <p style="margin-bottom: 10px; font-weight: bold; color: #333;">🔗 相关资源：</p>
        <p style="margin: 5px 0;">资源 A：<span style="color: #0969da; text-decoration: underline;">domain-a.com</span></p>
        <p style="margin: 5px 0;">资源 B：<span style="color: #0969da; text-decoration: underline;">domain-b.com</span></p>
    </section>

</div>

<!-- 全局容器 -->
<section style="margin: 10px auto; max-width: 100%; font-family: 'Optima', -apple-system-font, 'PingFang SC', sans-serif; color: #5d4037; line-height: 1.8; letter-spacing: 1px; text-align: justify;">

    <!-- 1. 导语：去除大面积背景色，改用上下边框，更稳妥 -->
    <section style="border-top: 2px dashed #ffb7b2; border-bottom: 2px dashed #ffb7b2; padding: 20px 0; margin-bottom: 30px;">
        <p style="margin: 0; font-size: 15px; color: #8d6e63;">
            ✏️ <strong>写在前面：</strong><br>
            为了适应深色模式，我们将大面积的奶油色背景去掉了，改用虚线边框。这样无论底色是黑是白，看起来都足够清爽。
        </p>
    </section>

    <!-- 2. 章节标题 -->
    <section style="text-align: center; margin: 45px 0 25px;">
        <span style="display: inline-block; border-bottom: 3px solid #ffccbc; padding-bottom: 6px; font-size: 17px; color: #5d4037; font-weight: bold; letter-spacing: 2px;">
            🌿 01. 温柔的章节名
        </span>
    </section>

    <!-- 3. 正文段落 -->
    <p style="margin-bottom: 20px; font-size: 15px; color: #5d4037;">
        正文内容放在这里。文字颜色选用了深褐色（#5d4037），在浅色模式下很温柔，在深色模式下微信会将其反转为浅粉褐色，阅读体验依然很好。<span style="border-bottom: 2px solid #f57f17; color: #f57f17;">这里是重点内容</span>。
    </p>

    <!-- 4. 金句卡片：使用简单的圆角框 -->
    <section style="border: 1px solid #efebe9; border-radius: 12px; padding: 25px; margin: 25px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
        <p style="font-family: Georgia, serif; font-style: italic; font-size: 15px; color: #8d6e63; margin: 0; text-align: center;">
            “去掉复杂的阴影和背景，留白多一点，呼吸感强一点。”
        </p>
    </section>

    <!-- 5. 重点清单 -->
    <section style="margin: 20px 0; padding: 15px; border-left: 4px dotted #ffab91; background-color: rgba(255, 248, 245, 0.5);">
        <p style="margin: 0 0 8px 0; font-weight: bold; color: #e64a19;">💡 小贴士：</p>
        <p style="margin: 0; font-size: 14px; color: #6d4c41;">1. 使用半透明背景 (rgba) 能更好融合。</p>
        <p style="margin: 5px 0 0 0; font-size: 14px; color: #6d4c41;">2. 避免使用纯黄背景。</p>
    </section>

    <!-- 页脚 -->
    <section style="margin-top: 40px; text-align: center; border-top: 1px solid #eee; padding-top: 20px;">
        <p style="font-size: 12px; color: #bcaaa4;">End. 愿你今天也拥有好心情</p>
    </section>

</section>

<div style="font-family: -apple-system, system-ui, sans-serif; line-height: 1.9; color: #1d1d1f; padding: 20px; max-width: 100%; box-sizing: border-box; text-indent: 0;">

    <!-- ⚠️ 标题请在微信公众号编辑器中单独填写，不要在 HTML 中包含 -->

    <!-- 章节标题：带细线的极简感 -->
    <h2 style="margin: 50px 0 20px; text-align: left;">
        <span style="font-size: 14px; color: #000; display: block; margin-bottom: 8px; font-weight: bold; letter-spacing: 2px; text-indent: 0;">CHAPTER 01</span>
        <span style="font-size: 22px; color: #1d1d1f; font-weight: 600; border-top: 1px solid #eee; display: block; padding-top: 15px; text-indent: 0;">核心观点章节标题</span>
    </h2>

    <p style="margin-bottom: 20px; text-indent: 0; color: #424245;">
        正文部分建议增加行高。这里的样式非常干净，没有任何多余的颜色干扰阅读。
    </p>

    <!-- 悬浮感重点内容 - 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 30px 0;">
        <tr>
            <td style="padding: 25px; background-color: #f8f8f8; border-left: 3px solid #1d1d1f; text-indent: 0;">
                <p style="margin: 0; font-size: 16px; color: #1d1d1f; line-height: 1.8; text-indent: 0;">
                    "这里填入一段非常有深度的话，或者核心的总结内容。这种卡片样式会非常突出。"
                </p>
            </td>
        </tr>
    </table>

    <!-- 细线分隔符 -->
    <hr style="border: 0; border-top: 1px solid #eee; margin: 40px 0;">

    <!-- 8. 资源链接（干净的页脚） -->
    <section style="border-top: 1px dashed #ccc; padding-top: 20px; font-size: 14px; color: #888; text-indent: 0;">
        <p style="margin-bottom: 10px; font-weight: bold; text-indent: 0;">相关资源：</p>
        <p style="margin: 5px 0; text-indent: 0;">资源 A：<span style="color: #1a2a6c;">domain-a.com</span></p>
        <p style="margin: 5px 0; text-indent: 0;">资源 B：<span style="color: #1a2a6c;">domain-b.com</span></p>
    </section>

</div>

<!-- 全局容器：强制重置缩进，设定标准字号 -->
<div style="margin: 10px auto; max-width: 100%; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; line-height: 1.75; letter-spacing: 0.5px; text-indent: 0;">

    <!-- ⚠️ 标题请在微信公众号编辑器中单独填写，不要在 HTML 中包含 -->

    <!-- 1. 侧边栏引导语（左侧强调）- 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
        <tr>
            <td style="padding: 0 15px; color: #666; font-size: 15px; border-left: 4px solid #1a2a6c; text-indent: 0; text-align: left;">
                这里输入前言或背景介绍。文字会自动紧贴左侧，不会产生意外缩进。
            </td>
        </tr>
    </table>

    <!-- 3. 章节标题模块（已优化对齐） -->
    <h2 style="margin: 35px 0 20px; border-bottom: 2px solid #1a2a6c; padding-bottom: 8px; text-align: left; line-height: 30px;">
        <span style="display: inline-block; background: #1a2a6c; color: #fff; padding: 0 10px; border-radius: 4px; font-size: 14px; vertical-align: middle;">01</span>
        <span style="display: inline-block; font-size: 20px; color: #1a2a6c; font-weight: bold; vertical-align: middle; margin-left: 5px;">第一章节标题</span>
    </h2>

    <!-- 4. 对比卡片（红/蓝双色，用于突出差异）- 使用TABLE结构 -->
    <!-- 红色卡片（建议用于选手A或旧方案） -->
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <tr>
            <td style="background-color: #fff5f5; border-left: 5px solid #d9534f; padding: 20px; text-indent: 0;">
                <strong style="color: #d9534f; font-size: 18px; display: block; margin-bottom: 10px;">选手 A 名称/特性</strong>
                <p style="margin: 0; font-size: 15px; color: #444; text-indent: 0;">这里描述选手A的核心优势，或者方案A的详细参数。</p>
            </td>
        </tr>
    </table>

    <!-- 蓝色卡片（建议用于选手B或新方案） -->
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <tr>
            <td style="background-color: #f0f7ff; border-left: 5px solid #0275d8; padding: 20px; text-indent: 0;">
                <strong style="color: #0275d8; font-size: 18px; display: block; margin-bottom: 10px;">选手 B 名称/特性</strong>
                <p style="margin: 0; font-size: 15px; color: #444; text-indent: 0;">这里描述选手B的核心优势，适合做正面交锋的对比排版。</p>
            </td>
        </tr>
    </table>

    <!-- 5. 数据对比表（响应式设计） -->
    <section style="margin-top: 35px; text-indent: 0;">
        <h2 style="margin: 20px 0; font-size: 18px; color: #1a2a6c; font-weight: bold; text-indent: 0;">📊 关键指标对比表</h2>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; text-align: center; text-indent: 0;">
                <tr style="background-color: #1a2a6c; color: white;">
                    <th style="padding: 12px; border: 1px solid #ddd;">维度</th>
                    <th style="padding: 12px; border: 1px solid #ddd;">选手 A</th>
                    <th style="padding: 12px; border: 1px solid #ddd;">选手 B</th>
                </tr>
                <tr>
                    <td style="padding: 10px; border: 1px solid #ddd; background: #fdfdfd;">指标名称</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">数值/表现</td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #d9534f; font-weight: bold;">胜出项</td>
                </tr>
                <tr style="background: #f9f9f9;">
                    <td style="padding: 10px; border: 1px solid #ddd;">指标名称</td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #d9534f; font-weight: bold;">胜出项</td>
                    <td style="padding: 10px; border: 1px solid #ddd;">数值/表现</td>
                </tr>
            </table>
        </div>
    </section>

    <!-- 6. 引用金句（红/蓝风格）- 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
        <tr>
            <td style="background-color: #fff4f4; border-left: 5px solid #d9534f; padding: 15px; text-indent: 0;">
                <em style="color: #333;">"这里填入专家观点或核心评价，红色风格看起来更有警示感或权威感。"</em>
            </td>
        </tr>
    </table>

    <table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
        <tr>
            <td style="background-color: #f0f7ff; border-left: 5px solid #0275d8; padding: 15px; text-indent: 0;">
                <em style="color: #333;">"这里填入另一个核心评价，蓝色风格看起来更加理性、技术化。"</em>
            </td>
        </tr>
    </table>

    <!-- 7. 终极决策盒（深色高亮总结）- 使用TABLE结构 -->
    <table style="width: 100%; border-collapse: collapse; margin: 40px 0;">
        <tr>
            <td style="padding: 25px; background-color: #2c3e50; color: #ecf0f1; text-indent: 0;">
                <h3 style="text-align: center; color: #fdbb2d; margin: 0 0 20px 0; font-size: 20px; text-indent: 0;">🚀 该怎么选？</h3>
                <p style="color: #fdbb2d; font-weight: bold; margin-bottom: 8px; text-indent: 0;">推荐 A 的场景：</p>
                <p style="font-size: 13px; margin: 0 0 15px 0; text-indent: 0;">• 场景一：高稳定性<br>• 场景二：特定行业</p>
                <p style="color: #fdbb2d; font-weight: bold; margin-bottom: 8px; text-indent: 0;">推荐 B 的场景：</p>
                <p style="font-size: 13px; margin: 0; text-indent: 0;">• 场景一：极致速度<br>• 场景二：创新应用</p>
            </td>
        </tr>
    </table>

    <!-- 8. 资源链接（干净的页脚） -->
    <section style="border-top: 1px dashed #ccc; padding-top: 20px; font-size: 14px; color: #888; text-indent: 0;">
        <p style="margin-bottom: 10px; font-weight: bold; text-indent: 0;">🔗 相关资源：</p>
        <p style="margin: 5px 0; text-indent: 0;">资源 A：<span style="color: #1a2a6c;">domain-a.com</span></p>
        <p style="margin: 5px 0; text-indent: 0;">资源 B：<span style="color: #1a2a6c;">domain-b.com</span></p>
    </section>

</div>

<!-- 全局容器：模拟 IDE 暗色背景，代码字体优先 -->
<div style="margin: 10px auto; max-width: 100%; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'PingFang SC', sans-serif; color: #c9d1d9; background-color: #0d1117; line-height: 1.7; padding: 15px; border-radius: 8px; text-indent: 0;">

    <!-- 1. 头部：模拟终端命令行 -->
    <table style="width: 100%; border-collapse: collapse; margin-bottom: 30px; border-bottom: 1px solid #30363d;">
        <tr>
            <td style="padding: 15px 0;">
                <p style="margin: 0; font-size: 13px; color: #8b949e; font-family: monospace;">
                    <span style="color: #58a6ff;">user@ai-lab</span>:<span style="color: #79c0ff;">~</span>$ ./start_review.sh --target="GPT-5 vs Claude-4"
                </p>
                <p style="margin: 10px 0 0 0; color: #3fb950; font-weight: bold; font-size: 14px;">
                    > 系统初始化完成...<br>
                    > 正在加载评测数据...
                </p>
            </td>
        </tr>
    </table>

    <!-- 2. 章节标题：带有光标效果 -->
    <h2 style="margin: 40px 0 20px; border-left: 4px solid #f78166; padding-left: 15px;">
        <span style="color: #ffffff; font-weight: bold; font-size: 20px;">01 // 核心架构分析</span>
    </h2>

    <p style="margin-bottom: 20px; color: #c9d1d9; font-size: 15px;">
        在这里介绍模型的参数量、训练数据或架构创新点。暗色背景下，文字显得更加沉浸。
    </p>

    <!-- 3. 代码/Prompt 块：模拟代码高亮 -->
    <table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
        <tr>
            <td style="background-color: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 0;">
                <div style="padding: 8px 15px; border-bottom: 1px solid #30363d; font-size: 12px; color: #8b949e; background: #0d1117; border-top-left-radius: 6px; border-top-right-radius: 6px;">
                    📝 System Prompt / Python Code
                </div>
                <div style="padding: 15px; font-family: monospace; font-size: 13px; color: #e6edf3; overflow-x: scroll;">
                    <span style="color: #ff7b72;">def</span> <span style="color: #d2a8ff;">evaluate_model</span>(input):<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;prompt = <span style="color: #a5d6ff;">"你是谁？"</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #8b949e;"># 这里展示关键代码或提示词</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ff7b72;">return</span> model.generate(prompt)
                </div>
            </td>
        </tr>
    </table>

    <!-- 4. 跑分对比表：红绿对比 -->
    <table style="width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 14px; text-align: center;">
        <thead>
            <tr style="background-color: #21262d; color: #f0f6fc;">
                <th style="padding: 10px; border: 1px solid #30363d;">Benchmark</th>
                <th style="padding: 10px; border: 1px solid #30363d;">Llama-3</th>
                <th style="padding: 10px; border: 1px solid #30363d;">Mixtral 8x7B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 10px; border: 1px solid #30363d; color: #8b949e;">MMLU</td>
                <td style="padding: 10px; border: 1px solid #30363d; color: #3fb950; font-weight: bold;">78.5 (Win)</td>
                <td style="padding: 10px; border: 1px solid #30363d; color: #c9d1d9;">70.6</td>
            </tr>
            <tr>
                <td style="padding: 10px; border: 1px solid #30363d; color: #8b949e;">GSM8K</td>
                <td style="padding: 10px; border: 1px solid #30363d; color: #c9d1d9;">75.2</td>
                <td style="padding: 10px; border: 1px solid #30363d; color: #f78166; font-weight: bold;">77.4 (Win)</td>
            </tr>
        </tbody>
    </table>

    <!-- 5. 结论卡片：HUD 风格 -->
    <table style="width: 100%; border-collapse: collapse; margin: 30px 0;">
        <tr>
            <td style="background: rgba(56, 139, 253, 0.1); border: 1px solid #388bfd; border-radius: 6px; padding: 20px;">
                <strong style="color: #58a6ff; display: block; margin-bottom: 10px; font-size: 16px;">🚀 部署建议 / Verdict</strong>
                <p style="margin: 0; font-size: 14px; color: #c9d1d9;">
                    如果是生产环境，建议使用 <strong>Model A</strong>，虽然推理成本略高，但逻辑推理能力（Reasoning）显著更强。适合 Agent 场景。
                </p>
            </td>
        </tr>
    </table>

    <!-- 6. 页脚 -->
    <div style="margin-top: 40px; border-top: 1px dashed #30363d; padding-top: 20px; font-size: 12px; color: #484f58; text-align: center;">
        <p>&lt;/ EOF &gt; Powered by Open Source</p>
    </div>

</div>

<!-- 全局容器 -->
<section style="margin: 15px auto; max-width: 100%; font-family: 'Times New Roman', 'Songti SC', 'SimSun', serif; color: #222; line-height: 1.8; text-align: justify;">

    <!-- 1. 核心摘要：深色底色块是安全的，微信通常不会反转深色块内的浅色文字 -->
    <section style="margin-bottom: 40px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
        <div style="background-color: #1c2331; padding: 25px;">
            <div style="border-left: 3px solid #c5a065; padding-left: 15px;">
                <h3 style="margin: 0 0 10px 0; font-size: 15px; color: #c5a065; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif;">Executive Summary</h3>
                <p style="margin: 0; font-size: 14px; color: #eeeeee; font-family: sans-serif; line-height: 1.6; opacity: 0.95;">
                    这里是核心摘要。使用 #1c2331 这种深蓝灰色比纯黑更有质感，且白色文字在此背景上，无论微信如何切换模式，通常都能保持可读性。
                </p>
            </div>
        </div>
    </section>

    <!-- 2. 章节标题 -->
    <section style="margin: 40px 0 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px;">
        <span style="display: inline-block; font-family: sans-serif; background: #c5a065; color: #fff; padding: 3px 8px; font-size: 12px; vertical-align: middle; margin-right: 8px;">PART 01</span>
        <span style="font-size: 18px; font-weight: bold; color: #1c2331; vertical-align: middle;">宏观分析与趋势</span>
    </section>

    <!-- 3. 正文 -->
    <p style="margin-bottom: 20px; font-size: 16px; color: #333;">
        正文推荐使用宋体。<strong style="color: #c5a065;">这里是强调的内容</strong>。我们避免了文字下划线渐变，改用颜色强调。
    </p>

    <!-- 4. 关键洞察：灰色背景块 -->
    <section style="background-color: rgba(0, 0, 0, 0.03); border: 1px solid #e0e0e0; padding: 20px; margin: 30px 0;">
        <p style="margin: 0 0 10px 0; font-size: 18px; color: #1c2331; font-weight: bold;">“ 关键洞察 ”</p>
        <p style="margin: 0; font-size: 15px; color: #555; line-height: 1.7; font-family: sans-serif;">
            使用 rgba(0,0,0,0.03) 作为背景色，在浅色模式下是浅灰，在深色模式下几乎不可见（变成透明），这避免了背景变成奇怪的深灰色，保证了文字（反白后）的清晰度。
        </p>
    </section>

    <!-- 5. 策略建议 -->
    <section style="border: 2px solid #1c2331; padding: 25px 20px 20px; margin: 30px 0; position: relative;">
        <span style="background: #fff; padding: 0 10px; color: #1c2331; font-weight: bold; position: absolute; top: -12px; left: 20px; font-size: 14px;">STRATEGY</span>
        <!-- 在深色模式下，上面的 'background: #fff' 会变成深色，文字变白，刚好融合，非常完美 -->
        <ul style="margin: 0; padding-left: 20px; font-size: 15px; font-family: sans-serif; color: #333;">
            <li style="margin-bottom: 8px;">第一步：优化资产配置结构</li>
            <li style="margin-bottom: 8px;">第二步：建立风险对冲机制</li>
            <li>第三步：数字化转型落地</li>
        </ul>
    </section>

    <!-- 页脚 -->
    <section style="border-top: 4px solid #1c2331; margin-top: 50px; padding-top: 15px;">
        <p style="font-size: 12px; color: #999; text-align: right; font-family: sans-serif;">
            © 2025 Professional Insight Report
        </p>
    </section>

</section>

快速参考卡 - WeChat Article Formatter

3 分钟快速上手指南

---

🚀 最快速的使用方式

单行命令（最常用）

cd /root/.claude/skills/wechat-article-formatter
python scripts/markdown_to_html.py --input article.md --theme tech --preview

效果：

✅ 转换 Markdown 为 HTML
✅ 应用科技风主题
✅ 自动在浏览器打开预览

---

🎨 主题选择（3 秒决策）

文章类型	主题	命令
技术文章/编程/AI	`tech`	`--theme tech`
生活/读书/通用	`minimal`	`--theme minimal`
商业/数据/报告	`business`	`--theme business`

---

📋 完整工作流（2 分钟）

# 1. 进入目录
cd /root/.claude/skills/wechat-article-formatter

# 2. 转换
python scripts/markdown_to_html.py \
  --input "你的文章.md" \
  --theme tech \
  --preview

# 3. 浏览器会自动打开预览

# 4. 复制粘贴到微信公众号
# Ctrl+A → Ctrl+C → 粘贴到微信编辑器 → 发布

---

🔄 与 wechat-tech-writer 配合

场景：刚用 wechat-tech-writer 生成了文章

# 自动查找最新文章并转换
latest=$(ls -t *.md | head -1)
python scripts/markdown_to_html.py --input "$latest" --theme tech --preview

---

❌ 常见问题（5 秒解决）

问题	解决方案
代码块没高亮	Markdown 中用 \`\`\`python（指定语言）
粘贴后样式丢失	用"粘贴"不要用"粘贴并匹配样式"
图片显示不了	在微信编辑器重新上传图片
表格太宽	减少列数（≤4列）或接受横向滚动

---

🔧 高级用法

批量转换

python scripts/batch_convert.py --input articles/ --theme minimal --workers 8

实时预览

python scripts/preview_generator.py --input article.md --theme business

自定义主题

# 1. 复制现有主题
cp templates/tech-theme.css templates/my-theme.css

# 2. 编辑颜色
# 修改 my-theme.css

# 3. 使用
python scripts/markdown_to_html.py --input article.md --theme my

---

📖 需要更多帮助？

SKILL.md - Claude 执行指南（详细步骤）
README.md - 完整功能说明
EXAMPLES.md - 3 个实战示例
references/ - 详细技术文档

---

记住核心：Markdown → 一键转换 → 复制粘贴 → 发布（2 分钟）

WeChat Article Formatter

将Markdown文章转换为适合微信公众号的美化HTML，一键生成专业排版。

---

✨ 核心功能

📝 Markdown转HTML - 完整支持Markdown语法
🎨 多套主题 - tech（科技风）、minimal（简约风）、business（商务风）
💅 样式美化 - 专业的CSS样式，适配微信公众号
🌈 代码高亮 - 支持多种编程语言的语法高亮
📱 响应式设计 - 完美适配移动端阅读
⚡ 批量转换 - 支持批量处理多个文件
👀 实时预览 - 边写边看，提高效率
🔧 高度可定制 - 支持自定义CSS主题

---

🚀 快速开始

1. 转换单篇文章

python scripts/markdown_to_html.py \
  --input article.md \
  --theme tech \
  --preview

2. 批量转换

python scripts/batch_convert.py \
  --input articles/ \
  --theme minimal \
  --workers 8

3. 实时预览

python scripts/preview_generator.py \
  --input article.md \
  --theme business

---

📚 文档导航

入门文档

[SKILL.md](SKILL.md) - 完整使用指南和快速参考
[EXAMPLES.md](EXAMPLES.md) - 3个详细使用示例

参考文档

[references/](references/) - 详细技术文档
wechat-constraints.md - 微信平台限制说明
conversion-guide.md - 转换过程详解
publishing-guide.md - 发布完整指南
theme-customization.md - 主题自定义指南

---

🎨 主题预览

Tech主题（科技风）

配色: 蓝紫渐变
适用: 技术文章、开发教程、AI/科技内容
特点: 现代科技感，Atom One Dark代码高亮

Minimal主题（简约风）

配色: 黑白灰
适用: 通用文章、文学作品、简洁风格
特点: 极简设计，GitHub风格代码块

Business主题（商务风）

配色: 深蓝金色
适用: 商业分析、企业内容、专业报告
特点: 专业稳重，Monokai代码高亮

---

📦 文件结构

wechat-article-formatter/
├── SKILL.md                    # 主技能文档
├── README.md                   # 本文件
├── EXAMPLES.md                 # 使用示例
├── requirements.txt            # Python依赖
├── test_article.md             # 测试文件
│
├── scripts/                    # 转换脚本
│   ├── markdown_to_html.py     # 主转换脚本
│   ├── batch_convert.py        # 批量转换
│   └── preview_generator.py    # 实时预览
│
├── templates/                  # CSS主题模板
│   ├── tech-theme.css          # 科技风主题
│   ├── minimal-theme.css       # 简约风主题
│   └── business-theme.css      # 商务风主题
│
└── references/                 # 参考文档
    ├── README.md               # 文档导航
    ├── wechat-constraints.md   # 平台限制
    ├── conversion-guide.md     # 转换详解
    ├── publishing-guide.md     # 发布指南
    └── theme-customization.md  # 主题定制

---

🛠️ 安装依赖

# 安装Python依赖
pip install -r requirements.txt

依赖包说明

markdown - Markdown解析
beautifulsoup4 - HTML处理
cssutils - CSS解析
lxml - XML/HTML解析
watchdog - 文件监听（实时预览用）
Pygments - 语法高亮（可选）

---

📖 使用示例

示例1: 转换技术文章

# 使用tech主题转换
python scripts/markdown_to_html.py \
  --input /path/to/tech-article.md \
  --theme tech \
  --output /path/to/output.html \
  --preview

输出: 带有蓝紫渐变配色、Atom One Dark代码高亮的HTML文件

示例2: 批量转换博客文章

# 批量转换目录下所有Markdown文件
python scripts/batch_convert.py \
  --input /path/to/blog/ \
  --output /path/to/output/ \
  --theme minimal \
  --workers 8

输出: 所有文章转换为简约风格的HTML文件

示例3: 边写边预览

# 启动实时预览服务
python scripts/preview_generator.py \
  --input /path/to/article.md \
  --theme business \
  --port 8080

效果: 在浏览器中实时预览，保存Markdown文件后刷新即可看到最新效果

---

⚙️ 命令行参数

markdown_to_html.py

用法: python markdown_to_html.py [选项]

选项:
  -i, --input INPUT     输入的Markdown文件路径（必需）
  -o, --output OUTPUT   输出的HTML文件路径（可选，默认与输入同名）
  -t, --theme THEME     主题选择: tech, minimal, business（默认：tech）
  -p, --preview         转换后在浏览器中打开预览
  -h, --help            显示帮助信息

batch_convert.py

用法: python batch_convert.py [选项]

选项:
  -i, --input INPUT     输入的Markdown文件或目录路径（必需）
  -o, --output OUTPUT   输出目录（可选，默认与源文件同目录）
  -t, --theme THEME     主题选择: tech, minimal, business（默认：tech）
  -r, --recursive       递归查找子目录中的Markdown文件
  -w, --workers NUM     并发转换的线程数（默认：4）
  -q, --quiet           静默模式，只显示摘要
  -h, --help            显示帮助信息

preview_generator.py

用法: python preview_generator.py [选项]

选项:
  -i, --input INPUT     输入的Markdown文件路径（必需）
  -o, --output OUTPUT   输出目录（默认：./preview/）
  -t, --theme THEME     主题选择: tech, minimal, business（默认：tech）
  -p, --port PORT       HTTP服务器端口（默认：8000）
  --no-browser          不自动打开浏览器
  -h, --help            显示帮助信息

---

🎯 使用场景

技术博客

推荐主题: tech
特点: 代码高亮专业、科技感强
适合: 编程教程、技术解析、AI内容

生活随笔

推荐主题: minimal
特点: 简洁清爽、易读性强
适合: 生活记录、读书笔记、通用文章

商业报告

推荐主题: business
特点: 专业稳重、数据展示清晰
适合: 业绩分析、市场报告、商业计划

---

✅ 发布流程

1. 转换Markdown为HTML

   python scripts/markdown_to_html.py --input article.md --theme tech --preview

2. 本地预览检查

在浏览器中查看效果
检查标题、代码块、表格等元素

3. 复制到微信编辑器

在浏览器中按 Ctrl+A 全选
按 Ctrl+C 复制
粘贴到微信公众号编辑器

4. 处理图片

删除无法显示的本地图片
重新上传图片到微信编辑器

5. 调整格式

检查标题层级
调整段落间距
验证代码块和表格

6. 手机端预览

使用微信编辑器的预览功能
在手机上查看实际效果

7. 发布

确认无误后发布文章

详细发布流程请参考 publishing-guide.md

---

🔧 主题自定义

快速修改颜色

1. 复制现有主题文件

   cp templates/tech-theme.css templates/my-theme.css

2. 修改CSS变量

   :root {
     --primary-color: #10b981;   /* 改为绿色 */
     --secondary-color: #14b8a6;
   }

3. 使用自定义主题

   python scripts/markdown_to_html.py --input article.md --theme my

详细自定义指南请参考 theme-customization.md

---

⚠️ 注意事项

微信公众号限制

1. 不支持外部CSS - 本工具会自动转换为内联样式 2. 不支持JavaScript - 使用纯CSS实现所有效果 3. 图片需要重新上传 - 本地图片无法直接使用 4. 部分CSS属性不支持 - 只使用微信支持的CSS属性

详细限制说明请参考 wechat-constraints.md

最佳实践

1. 文章长度: 建议 2000-5000 字 2. 图片数量: 建议 4-8 张 3. 表格列数: 建议 ≤ 4 列（移动端友好） 4. 代码块长度: 建议 < 30 行

---

🐛 故障排除

粘贴后样式丢失

使用Chrome或Edge浏览器
尝试复制HTML源代码而非页面内容

代码块格式混乱

确认代码块有语言标识（\\\`python）
或使用微信编辑器的"代码块"功能重新插入

表格在手机上显示不全

减少表格列数（≤ 4列）
或将表格转为图片

图片无法显示

在微信编辑器中重新上传图片
或使用图床服务（阿里云OSS、七牛云等）

更多问题请参考 wechat-constraints.md 的故障排除章节

---

📊 性能指标

单文件转换: ~0.3-0.5秒
批量转换（8线程）: ~0.37秒/篇
实时预览更新: <1秒
HTML文件大小: ~50KB（包含内联CSS）

---

🔗 相关资源

官方文档

社区

微信公众号运营交流群
新媒体运营论坛

---

📝 更新日志

v1.0.0 (2025-12-28)

✅ 初始版本发布
✅ 3套CSS主题（tech, minimal, business）
✅ 3个转换脚本（单文件、批量、实时预览）
✅ 完整的文档体系
✅ 测试文件和示例

---

🙏 致谢

本skill基于以下开源项目：

---

📄 许可证

本项目为Claude Code Skill，供个人和商业使用。

---

祝你使用愉快！ 🎉

如有问题或建议，欢迎反馈！

Markdown到HTML转换详细指南

本文档详细说明Markdown转HTML的转换过程、技术实现和高级用法。

---

1. 转换流程概述

1.1 完整转换流程

Markdown文本
    ↓
[步骤1] Markdown解析
    ↓
基础HTML结构
    ↓
[步骤2] 代码块增强
    ↓
增强的HTML
    ↓
[步骤3] 图片处理
    ↓
优化的HTML
    ↓
[步骤4] CSS解析与内联
    ↓
带内联样式的HTML
    ↓
[步骤5] 完整文档包装
    ↓
最终HTML文件

1.2 各步骤详解

步骤1：Markdown解析

使用Python的 markdown 库
启用扩展：fenced_code, tables, nl2br, sane_lists, codehilite
输出：基础HTML结构

步骤2：代码块增强

提取代码语言信息
添加 data-lang 属性用于语言标签
保持代码格式（换行、缩进）

步骤3：图片处理

添加必要的样式属性
确保图片响应式（max-width: 100%）
居中对齐，添加间距

步骤4：CSS解析与内联

解析主题CSS文件
提取CSS变量并替换
将样式转换为内联属性

步骤5：完整文档包装

添加HTML头部（DOCTYPE, meta标签）
包装body结构
添加基础样式

---

2. Markdown扩展说明

2.1 Fenced Code Blocks（代码块）

支持的语法: ````markdown

def hello_world():
    print("Hello, World!")

````

转换结果:

<pre data-lang="python" style="background: #282c34; ...">
<code style="color: #abb2bf; ...">
def hello_world():
    print("Hello, World!")
</code>
</pre>

支持的语言:

编程语言: python, javascript, java, c, cpp, go, rust, etc.
脚本语言: bash, shell, powershell
标记语言: html, css, xml, json, yaml
其他: sql, markdown, plaintext

2.2 Tables（表格）

支持的语法:

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |

转换结果:

<table style="width: 100%; border-collapse: collapse; ...">
<thead style="background: linear-gradient(...); color: #fff;">
  <tr>
    <th style="padding: 12px 16px; ...">列1</th>
    <th style="padding: 12px 16px; ...">列2</th>
    <th style="padding: 12px 16px; ...">列3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td style="padding: 12px 16px; ...">数据1</td>
    <td style="padding: 12px 16px; ...">数据2</td>
    <td style="padding: 12px 16px; ...">数据3</td>
  </tr>
  ...
</tbody>
</table>

2.3 Newlines to Break（换行转换）

nl2br扩展:

将Markdown中的单个换行转换为 <br>
保持段落结构

示例:

这是第一行
这是第二行

这是新段落

转换为:

<p>这是第一行<br>这是第二行</p>
<p>这是新段落</p>

2.4 CodeHilite（代码高亮）

配置:

extension_configs = {
    'codehilite': {
        'linenums': False,      # 不显示行号
        'guess_lang': True,     # 自动检测语言
        'noclasses': True,      # 使用内联样式
    }
}

---

3. CSS处理详解

3.1 CSS变量提取

主题CSS中的变量:

:root {
  --primary-color: #7c3aed;
  --secondary-color: #3b82f6;
  --text-color: #333333;
  --code-bg: #282c34;
  --border-radius: 8px;
}

提取与替换:

# 提取CSS变量
css_vars = {
    '--primary-color': '#7c3aed',
    '--secondary-color': '#3b82f6',
    ...
}

# 替换CSS中的var()引用
color: var(--primary-color)  →  color: #7c3aed

3.2 CSS规则解析

使用cssutils库:

import cssutils

sheet = cssutils.parseString(css_content)

for rule in sheet:
    if rule.type == rule.STYLE_RULE:
        selector = rule.selectorText  # 例如: "h1"
        styles = {}
        for prop in rule.style:
            styles[prop.name] = prop.value

选择器处理:

简单选择器: h1, .class, #id ✅
伪类选择器: a:hover, ::before ⚠️ 跳过
组合选择器: div > p, h1 + h2 ⚠️ 跳过
媒体查询: @media (...) ⚠️ 保留但不内联

3.3 样式内联

BeautifulSoup处理:

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')

# 查找匹配的元素
elements = soup.select('h1')

for elem in elements:
    # 合并现有样式和新样式
    existing_style = elem.get('style', '')
    new_style = 'color: #7c3aed; font-size: 28px;'
    elem['style'] = f'{existing_style}; {new_style}'

样式优先级: 1. 元素已有的内联样式（优先级最高） 2. CSS规则中的样式（填补缺失） 3. 不覆盖已有样式

3.4 响应式样式处理

媒体查询保留:

/* 在head中保留媒体查询 */
<style>
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
}
</style>

注意: 媒体查询无法内联到元素，需要保留在 <style> 标签中。

---

4. 特殊元素处理

4.1 代码块处理

语言检测:

for pre in soup.find_all('pre'):
    code = pre.find('code')
    if code:
        # 从class中提取语言
        classes = code.get('class', [])
        for cls in classes:
            if cls.startswith('language-'):
                language = cls.replace('language-', '')
                pre['data-lang'] = language

语言标签显示:

pre::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
}

4.2 图片处理

自动添加样式:

for img in soup.find_all('img'):
    existing_style = img.get('style', '')

    if 'max-width' not in existing_style:
        style_additions = (
            'max-width: 100%; '
            'height: auto; '
            'display: block; '
            'margin: 24px auto;'
        )
        img['style'] = f'{existing_style}; {style_additions}'

图片说明（caption）:

![图片描述](image.png)
*这是图片说明*

转换为:

<img src="image.png" alt="图片描述" style="...">
<p><em style="...">这是图片说明</em></p>

4.3 列表处理

无序列表自定义标记:

ul li {
  list-style-type: none;
  position: relative;
}

ul li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
}

有序列表自定义编号:

ol {
  counter-reset: item;
}

ol li {
  list-style-type: none;
  counter-increment: item;
}

ol li::before {
  content: counter(item) ".";
  color: var(--primary-color);
  font-weight: 600;
}

---

5. 高级用法

5.1 自定义Markdown扩展

添加新的扩展:

extensions = [
    'markdown.extensions.fenced_code',
    'markdown.extensions.tables',
    'markdown.extensions.footnotes',      # 脚注
    'markdown.extensions.toc',            # 目录
    'markdown.extensions.attr_list',      # 属性列表
]

使用脚注:

这是一段文字[^1]。

[^1]: 这是脚注内容

使用目录:

[TOC]

## 第一章
## 第二章

5.2 自定义CSS规则

在主题CSS中添加自定义规则:

/* 警告框样式 */
.alert {
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 8px;
  border-left: 4px solid;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

在Markdown中使用:

<div class="alert alert-warning">
⚠️ 这是一个警告提示框
</div>

5.3 处理复杂表格

合并单元格:

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| <span rowspan="2">合并行</span> | 数据1 | 数据2 |
| 数据3 | 数据4 |

注意: 微信对复杂表格支持有限，建议使用简单表格或图片替代。

5.4 嵌入HTML

Markdown中可以直接使用HTML:

这是普通文字

<div style="background: #f0f0f0; padding: 20px;">
  <h3>这是HTML内容</h3>
  <p>可以使用内联样式</p>
</div>

继续Markdown文字

---

6. 性能优化

6.1 转换速度优化

单文件转换: ~0.3-0.5秒

Markdown解析: ~0.1秒
CSS处理: ~0.1秒
HTML处理: ~0.1秒
文件I/O: ~0.1秒

批量转换优化:

# 使用线程池并发处理
with ThreadPoolExecutor(max_workers=8) as executor:
    futures = [executor.submit(convert_file, f) for f in files]

建议并发数:

CPU核心数 < 4: workers=2
CPU核心数 4-8: workers=4
CPU核心数 > 8: workers=8

6.2 内存优化

处理大文件:

# 使用生成器逐行处理
def process_large_markdown(file_path):
    with open(file_path, 'r') as f:
        for chunk in iter(lambda: f.read(4096), ''):
            yield chunk

CSS缓存:

# 缓存解析后的CSS规则
class WeChatHTMLConverter:
    _css_cache = {}

    def _parse_css_to_dict(self):
        cache_key = self.theme
        if cache_key in self._css_cache:
            return self._css_cache[cache_key]

        # 解析CSS...
        self._css_cache[cache_key] = css_rules
        return css_rules

6.3 输出优化

压缩HTML（可选）:

from htmlmin import minify

html_output = minify(html_content, remove_empty_space=True)

注意: 微信编辑器会自动格式化，压缩意义不大。

---

7. 调试技巧

7.1 查看中间结果

在转换过程中输出中间HTML:

# 在convert()方法中添加调试输出
def convert(self, markdown_text: str) -> str:
    # 步骤1: Markdown转HTML
    html_content = md.convert(markdown_text)
    with open('debug_step1.html', 'w') as f:
        f.write(html_content)

    # 步骤2: 增强代码块
    html_content = self._enhance_code_blocks(html_content)
    with open('debug_step2.html', 'w') as f:
        f.write(html_content)

    # ... 后续步骤

7.2 CSS规则检查

输出解析的CSS规则:

css_rules = self._parse_css_to_dict()

# 打印所有规则
for selector, styles in css_rules.items():
    print(f'{selector}:')
    for prop, value in styles.items():
        print(f'  {prop}: {value}')

7.3 样式冲突排查

检查元素的最终样式:

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')

# 检查特定元素
h1 = soup.find('h1')
print(f'H1 style: {h1.get("style")}')

在浏览器中调试: 1. 打开生成的HTML文件 2. 按F12打开开发者工具 3. 使用"检查元素"查看实际样式 4. 对比CSS主题文件，找出差异

---

8. 常见问题

Q1: 为什么有些CSS样式没有应用？

可能原因: 1. 选择器太复杂（如伪类、组合选择器） 2. CSS变量没有正确替换 3. 样式被元素已有样式覆盖

解决方法:

使用简单选择器（标签、类、ID）
检查CSS变量是否在 :root 中定义
调整样式优先级

Q2: 代码块没有语法高亮？

可能原因: 1. 没有指定语言标识 2. CodeHilite配置不正确

解决方法:

# ❌ 没有语言标识

code here


# ✅ 指定语言

code here

Q3: 表格在微信中显示异常？

可能原因: 1. 表格太宽 2. 单元格内容过长

解决方法:

减少列数（≤ 4列）
缩短单元格内容
使用 overflow-x: auto 允许横向滚动

Q4: 转换速度很慢？

可能原因: 1. 文件很大 2. CSS规则很多 3. 没有使用并发

解决方法:

使用批量转换的并发模式
简化CSS主题
缓存CSS解析结果

---

9. 参考资源

Python库文档

Markdown语法

CSS参考

MDN CSS Reference
Can I Use - 检查CSS兼容性

微信公众号发布完整指南

本文档提供从HTML转换到微信公众号发布的完整工作流程，包括详细步骤、注意事项和最佳实践。

---

1. 发布流程概览

Markdown文章
    ↓
转换为HTML
    ↓
本地预览检查
    ↓
复制HTML内容
    ↓
粘贴到微信编辑器
    ↓
处理图片
    ↓
调整格式
    ↓
手机预览
    ↓
保存草稿/发布

---

2. 详细发布步骤

步骤1: 转换Markdown为HTML

选择合适的主题:

# 技术文章 - 使用tech主题
python scripts/markdown_to_html.py --input article.md --theme tech

# 通用文章 - 使用minimal主题
python scripts/markdown_to_html.py --input article.md --theme minimal

# 商业报告 - 使用business主题
python scripts/markdown_to_html.py --input article.md --theme business

带预览:

# 转换后自动在浏览器打开预览
python scripts/markdown_to_html.py --input article.md --theme tech --preview

步骤2: 本地预览检查

在浏览器中检查:

[ ] 标题样式正确（H1, H2, H3层级清晰）
[ ] 段落间距合适
[ ] 代码块格式正常，语法高亮清晰
[ ] 表格显示完整，无溢出
[ ] 图片位置正确
[ ] 链接可点击
[ ] 引用块样式正确

使用浏览器开发者工具: 1. 按F12打开开发者工具 2. 切换到移动设备视图（Ctrl+Shift+M） 3. 选择iPhone或Android设备尺寸 4. 检查移动端显示效果

常见问题处理:

问题：某个标题样式不对
→ 检查Markdown中的标题级别是否正确
→ 查看HTML中该元素的style属性

问题：代码块没有语法高亮
→ 确认代码块有语言标识（```python）
→ 检查CodeHilite配置

问题：表格太宽溢出
→ 减少表格列数
→ 或使用图片替代表格

步骤3: 复制HTML内容

方法A: 复制Body内容（推荐） 1. 在浏览器中打开HTML文件 2. 按 Ctrl+A 全选页面内容 3. 按 Ctrl+C 复制 4. 直接粘贴到微信编辑器

方法B: 复制HTML源代码 1. 在浏览器中右键 → "查看页面源代码" 2. 找到 <body> 标签内的内容 3. 选中并复制 <body>...</body> 之间的HTML 4. 粘贴到微信编辑器

方法C: 使用浏览器开发者工具 1. 按F12打开开发者工具 2. 在Elements面板中找到 <body> 元素 3. 右键 → "Copy" → "Copy outerHTML" 4. 粘贴到微信编辑器

推荐: 方法A最简单直接，成功率最高。

步骤4: 粘贴到微信编辑器

打开微信公众平台编辑器: 1. 登录 https://developers.weixin.qq.com/platform 2. 左侧菜单 → "内容管理" → "新建图文" 3. 在编辑器中点击，确保光标在编辑区域 4. 按 Ctrl+V 粘贴内容

粘贴后立即检查:

[ ] 样式是否保留（颜色、字体、间距）
[ ] 标题层级是否正确
[ ] 代码块是否显示正常
[ ] 表格是否完整

如果样式丢失: 1. 尝试使用Chrome或Edge浏览器 2. 清空编辑器后重新粘贴 3. 或使用方法B/C复制HTML源代码

步骤5: 处理图片

图片无法显示的原因:

使用了本地图片路径（如 ./images/cover.png）
微信编辑器不支持本地图片

解决方案A: 在编辑器中重新上传 1. 删除无法显示的图片占位符 2. 点击编辑器工具栏的"图片"按钮 3. 上传本地图片文件 4. 调整图片位置和大小

解决方案B: 使用图床（推荐） 1. 将图片上传到图床（阿里云OSS、七牛云等） 2. 获取图片的公网URL 3. 在Markdown中使用图床URL:

   ![封面图](https://your-imagebed.com/cover.png)

4. 重新转换并粘贴

图床推荐:

阿里云OSS: 稳定，速度快，有免费额度
七牛云: 每月10GB免费流量
GitHub: 免费，但国内访问速度慢
微博图床: 免费，稳定性一般

步骤6: 调整格式

检查以下要素:

标题:

H1应该是文章标题（一般只有一个）
H2是主要章节标题
H3是小节标题
标题层级不要跳跃（不要从H1直接到H3）

段落:

段落间距是否合适
首行是否需要缩进（微信默认不缩进）
段落长度不要过长（建议每段3-5行）

代码块:

检查代码格式是否保留
语法高亮是否正常
代码块不要太长（建议<30行）

表格:

表头样式是否清晰
表格宽度是否合适
数据对齐是否正确（左对齐/居中/右对齐）

引用块:

引用块样式是否突出
引用内容是否易读

列表:

列表项缩进是否正确
嵌套列表层级是否清晰

链接:

链接颜色是否与正文区分
重要链接是否高亮

步骤7: 手机端预览

微信编辑器预览功能: 1. 点击编辑器顶部的"预览"按钮 2. 微信扫码在手机上查看 3. 或发送到微信号预览

手机端检查要点:

[ ] 字体大小合适（不要太小）
[ ] 图片加载正常，无变形
[ ] 表格可横向滚动（如果太宽）
[ ] 代码块可横向滚动
[ ] 段落间距合理
[ ] 标题层级清晰
[ ] 整体阅读体验流畅

常见移动端问题:

问题：字体太小，阅读困难
→ 检查body的font-size（建议≥15px）

问题：图片变形或太大
→ 确保图片有max-width: 100%样式

问题：表格超出屏幕
→ 减少列数或使用图片替代

问题：代码块溢出
→ 确保有overflow-x: auto样式

步骤8: 添加封面和摘要

设置封面图: 1. 编辑器右侧 → "封面图片" 2. 上传16:9比例的图片（建议尺寸：900x500px） 3. 可以从文章中选择已有图片

设置摘要: 1. 编辑器右侧 → "摘要" 2. 填写文章简介（50-100字） 3. 摘要会显示在文章列表和分享卡片中

设置作者: 1. 编辑器右侧 → "作者" 2. 填写作者名称

步骤9: 保存草稿或发布

保存草稿: 1. 点击"保存"按钮 2. 草稿会保存在"内容管理" → "草稿箱" 3. 可以随时编辑和发布

正式发布: 1. 最终检查无误后 2. 点击"发表"按钮 3. 确认发布时间（立即发布/定时发布） 4. 点击"确认发表"

发布后: 1. 在手机微信中查看实际效果 2. 分享给朋友测试反馈 3. 监控阅读数据和用户反馈

---

3. 不同内容类型的发布建议

技术文章

特点:

代码块较多
技术名词较多
需要语法高亮

推荐主题: tech（科技风）

注意事项:

代码块不要太长（建议拆分）
技术名词第一次出现时解释
使用代码注释增强可读性

示例结构:

# 文章标题

## 前言（100-200字）
介绍背景和动机

## 技术原理（500-800字）
解释核心概念

## 实践案例（800-1200字）
代码示例 + 注释

## 总结（100-200字）
回顾要点

商业报告

特点:

数据和表格较多
需要专业稳重的视觉
结论和建议明确

推荐主题: business（商务风）

注意事项:

表格数据要准确
使用图表辅助说明
结论要突出显示

示例结构:

# 报告标题

## 执行摘要
核心结论（3-5条）

## 数据分析
表格 + 图表

## 市场洞察
趋势和发现

## 行动建议
具体措施

通用文章

特点:

内容多样
阅读门槛低
需要良好的可读性

推荐主题: minimal（简约风）

注意事项:

段落不要太长
使用小标题拆分内容
适当使用引用和强调

示例结构:

# 文章标题

## 引子
吸引读者的开头

## 正文（多个小节）
每个小节300-500字

## 结尾
总结 + 互动

---

4. 优化技巧

4.1 提高打开率

优化封面图:

使用高质量图片
封面图要吸引眼球
文字清晰可读

优化标题:

标题要简洁有力（建议15-25字）
使用数字（如"5个技巧"）
激发好奇心（如"你不知道的..."）

优化摘要:

摘要概括核心价值
突出读者能获得什么
使用行动号召（如"了解更多"）

4.2 提高阅读体验

视觉层次:

使用标题拆分长文
重要内容使用粗体或引用块
适当使用列表

段落优化:

每段3-5行最佳
段落首句要有吸引力
避免大段文字墙

多媒体:

平均每500字配1张图
图片要有说明文字
使用图表替代复杂数据

4.3 提高互动率

文末引导:

---

## 你怎么看？

对于本文的观点，你有什么看法？欢迎在评论区留言讨论！

👍 如果觉得有用，点个"在看"吧
🔔 关注我，获取更多技术干货

问题引导:

在文末提出开放式问题
邀请读者分享经验
提供讨论话题

行动号召:

引导关注公众号
邀请加入社群
推荐相关文章

---

5. 常见问题处理

Q1: 粘贴后样式全部丢失怎么办？

原因分析: 1. 浏览器兼容性问题 2. 微信编辑器版本问题 3. 复制方式不正确

解决方案:

尝试1: 使用Chrome或Edge浏览器
尝试2: 复制HTML源代码而非页面内容
尝试3: 清空编辑器后重新粘贴
尝试4: 使用浏览器开发者工具复制outerHTML
尝试5: 分段复制粘贴

Q2: 代码块格式混乱怎么办？

临时方案: 1. 删除混乱的代码块 2. 使用微信编辑器的"代码块"功能 3. 手动输入代码

长期方案: 1. 将代码块转为图片 2. 或使用代码图片生成工具（如Carbon）

Q3: 表格在手机上显示不全怎么办？

方案A: 简化表格

减少列数（建议≤4列）
缩短单元格内容
拆分为多个小表格

方案B: 转为图片

在Excel/Numbers中制作表格
截图后插入文章
确保图片清晰可读

方案C: 使用列表替代

**性能对比**:
- Claude Sonnet 4: 88.7%
- GPT-4 Turbo: 86.4%
- Gemini Pro: 84.2%

Q4: 链接无法点击怎么办？

检查公众号类型:

已认证服务号: 支持外部链接
未认证订阅号: 不支持外部链接

解决方案: 1. 认证公众号（获得外部链接权限） 2. 使用"阅读原文"链接 3. 或将链接显示为纯文本

Q5: 图片上传失败怎么办？

可能原因:

图片太大（>5MB）
图片格式不支持
网络问题

解决方案:

步骤1: 压缩图片
- 使用TinyPNG压缩
- 或调整图片尺寸

步骤2: 转换格式
- 转为JPG或PNG
- 避免使用WEBP

步骤3: 重试上传
- 检查网络连接
- 刷新编辑器页面

---

6. 发布检查清单

发布前检查

内容检查:

[ ] 标题简洁有力（15-25字）
[ ] 摘要概括核心价值（50-100字）
[ ] 文章长度合适（2000-5000字）
[ ] 段落间距合理
[ ] 错别字已修正

格式检查:

[ ] 标题层级清晰（H1/H2/H3）
[ ] 代码块格式正常
[ ] 表格显示完整
[ ] 图片加载正常
[ ] 链接可点击

视觉检查:

[ ] 封面图吸引人（900x500px）
[ ] 配图质量高
[ ] 配色协调
[ ] 移动端显示正常

互动检查:

[ ] 文末有引导（点赞/评论/关注）
[ ] 有讨论话题
[ ] 有行动号召

发布后检查

效果监控:

[ ] 在手机上查看实际效果
[ ] 测试所有链接
[ ] 检查图片加载速度
[ ] 阅读体验流畅

数据监控:

[ ] 阅读量
[ ] 点赞数
[ ] 评论数
[ ] 分享数
[ ] 收藏数

反馈收集:

[ ] 读者评论
[ ] 朋友反馈
[ ] 数据趋势

---

7. 最佳实践总结

内容创作

1. 标题优先: 花时间打磨标题 2. 开头吸引: 前3段决定读者是否继续 3. 结构清晰: 使用标题拆分长文 4. 视觉丰富: 平均每500字配1张图 5. 互动引导: 文末引导点赞评论

格式优化

1. 主题选择: 根据内容类型选择合适主题 2. 段落控制: 每段3-5行最佳 3. 列表使用: 超过3个要点使用列表 4. 代码精简: 代码块<30行 5. 表格简化: 列数≤4列

发布流程

1. 本地预览: 先在浏览器检查 2. 移动预览: 必须在手机上查看 3. 保存草稿: 重要文章先保存草稿 4. 分时发布: 选择读者活跃时间 5. 数据监控: 关注阅读和互动数据

持续改进

1. 收集反馈: 重视读者评论 2. 分析数据: 找出高表现文章的特点 3. A/B测试: 尝试不同标题和封面 4. 迭代优化: 持续改进内容和格式 5. 建立模板: 总结成功经验形成模板

---

8. 进阶技巧

8.1 定时发布

最佳发布时间:

工作日: 12:00-13:00（午休）, 18:00-20:00（下班）
周末: 10:00-12:00, 15:00-17:00

操作步骤: 1. 编辑器右侧 → "定时发布" 2. 选择日期和时间 3. 点击"定时发表"

8.2 原创声明

好处:

保护原创内容
获得赞赏功能
提高信誉度

操作步骤: 1. 编辑器底部 → "原创声明" 2. 确认文章为原创 3. 发布时会自动添加原创标识

8.3 留言精选

管理留言: 1. 文章发布后进入"留言管理" 2. 精选优质评论 3. 回复读者问题 4. 引导讨论方向

8.4 数据分析

关键指标:

阅读率: 阅读量/粉丝数
分享率: 分享数/阅读量
收藏率: 收藏数/阅读量
互动率: (点赞+评论+分享)/阅读量

改进方向:

阅读率低 → 优化标题和封面
分享率低 → 增加实用性和传播性
收藏率低 → 提高内容深度和价值
互动率低 → 加强引导和讨论话题

---

9. 相关资源

工具推荐

图片编辑: Canva, Figma
图片压缩: TinyPNG, Squoosh
图床服务: 阿里云OSS, 七牛云
代码图片: Carbon, ray.so
数据分析: 微信后台数据, 新榜

学习资源

微信公众平台官方帮助中心
优秀公众号的排版风格
新媒体运营课程

社区

微信公众号运营交流群
新媒体运营论坛
知乎相关话题

---

祝你发布顺利！ 🎉

References Documentation

本目录包含 wechat-article-formatter skill 的详细参考文档。

---

📚 文档清单

1. 微信公众号平台限制说明

wechat-constraints.md - 必读文档

详细说明微信公众号编辑器的技术限制，以及本工具如何应对这些限制。

包含内容:

CSS/JavaScript限制
图片处理限制
代码块限制
排版限制
兼容性建议
发布前检查清单
故障排除

适合人群: 所有用户，尤其是首次使用者

---

2. Markdown到HTML转换详细指南

conversion-guide.md - 技术文档

深入讲解Markdown转HTML的转换过程、技术实现和高级用法。

包含内容:

转换流程详解
Markdown扩展说明
CSS处理机制
特殊元素处理
高级用法示例
性能优化技巧
调试技巧

适合人群: 需要深入理解转换机制的用户、开发者

---

3. 微信公众号发布完整指南

publishing-guide.md - 实用指南

从HTML转换到微信公众号发布的完整工作流程。

包含内容:

发布流程概览（9个详细步骤）
不同内容类型的发布建议
优化技巧（提高打开率、阅读体验、互动率）
常见问题处理
发布检查清单
进阶技巧（定时发布、原创声明、数据分析）

适合人群: 所有用户，尤其是内容创作者和新媒体运营者

---

4. 主题自定义完整指南

theme-customization.md - 定制指南

详细说明如何自定义CSS主题，创建专属的微信公众号文章样式。

包含内容:

主题文件结构
CSS变量系统详解
创建自定义主题（两种方法）
主题配色方案（7种配色示例）
样式定制详解（标题、代码块、表格、引用块）
响应式设计
高级技巧

适合人群: 需要定制样式的用户、设计师、前端开发者

---

🚀 快速开始

新手用户

建议按以下顺序阅读：

1. [publishing-guide.md](publishing-guide.md) - 了解完整发布流程 2. [wechat-constraints.md](wechat-constraints.md) - 了解平台限制 3. 回到主文档 [SKILL.md](../SKILL.md) 开始使用

进阶用户

如果你想：

自定义主题样式 → 阅读 theme-customization.md
深入了解转换机制 → 阅读 conversion-guide.md
解决发布问题 → 查阅 publishing-guide.md 的故障排除章节
理解平台限制 → 参考 wechat-constraints.md

---

📖 文档特点

wechat-constraints.md

✅ 9大核心技术限制详解
✅ 本工具的解决方案说明
✅ 兼容性最佳实践
✅ 发布前完整检查清单
✅ 常见问题故障排除

conversion-guide.md

✅ 5步转换流程图解
✅ 4种Markdown扩展说明
✅ CSS处理详细技术细节
✅ 性能优化建议
✅ 调试技巧和工具

publishing-guide.md

✅ 9步详细发布流程
✅ 3种内容类型发布建议（技术/商业/通用）
✅ 提高打开率/阅读体验/互动率的优化技巧
✅ 5个常见问题的解决方案
✅ 完整的发布前后检查清单

theme-customization.md

✅ 完整的主题文件结构说明
✅ CSS变量系统深入讲解
✅ 7种配色方案示例
✅ 标题/代码/表格/引用块样式定制
✅ 响应式设计最佳实践

---

🔍 常见问题快速索引

技术问题

问题	参考文档	章节
样式在微信中丢失	wechat-constraints.md	6. 故障排除 → Q1
代码块格式混乱	wechat-constraints.md	6. 故障排除 → Q2
表格显示异常	wechat-constraints.md	6. 故障排除 → Q3
图片无法显示	wechat-constraints.md	6. 故障排除 → Q4
CSS变量不生效	theme-customization.md	9. 故障排除 → Q1

使用问题

问题	参考文档	章节
如何选择主题	publishing-guide.md	3. 不同内容类型的发布建议
如何上传图片	publishing-guide.md	2. 详细发布步骤 → 步骤5
如何优化封面	publishing-guide.md	4.1 提高打开率
如何调整格式	publishing-guide.md	2. 详细发布步骤 → 步骤6
如何手机预览	publishing-guide.md	2. 详细发布步骤 → 步骤7

定制问题

问题	参考文档	章节
如何创建自定义主题	theme-customization.md	3. 创建自定义主题
如何修改颜色	theme-customization.md	2. CSS变量系统
如何定制标题样式	theme-customization.md	5.1 标题样式定制
如何定制代码块	theme-customization.md	5.2 代码块样式定制
如何定制表格	theme-customization.md	5.3 表格样式定制

---

💡 最佳实践

发布前必看

1. ✅ 阅读 wechat-constraints.md 了解平台限制 2. ✅ 使用 publishing-guide.md 的检查清单 3. ✅ 在本地浏览器预览 4. ✅ 在手机端测试

主题定制必看

1. ✅ 先选择一个接近的现有主题 2. ✅ 阅读 theme-customization.md 第3节 3. ✅ 使用CSS变量修改颜色 4. ✅ 测试所有元素样式

故障排除必看

1. ✅ 检查 wechat-constraints.md 的故障排除章节 2. ✅ 查阅 publishing-guide.md 的常见问题 3. ✅ 使用浏览器开发者工具调试 4. ✅ 对比示例文章效果

---

📝 文档更新日志

2025-12-28

✅ 创建完整的references文档体系
✅ 新增 wechat-constraints.md
✅ 新增 conversion-guide.md
✅ 新增 publishing-guide.md
✅ 新增 theme-customization.md
✅ 新增 README.md（本文档）

---

🔗 相关资源

内部文档

SKILL.md - 主技能文档
EXAMPLES.md - 使用示例（3个完整案例）
templates/ - CSS主题模板
scripts/ - 转换脚本

外部资源

---

🙋 反馈建议

如果你发现文档有误或有改进建议，欢迎： 1. 直接修改文档文件 2. 补充缺失的内容 3. 改进示例和说明

祝你使用愉快！ 🎉

主题自定义完整指南

本文档详细说明如何自定义CSS主题，创建专属的微信公众号文章样式。

---

1. 主题文件结构

1.1 主题文件位置

wechat-article-formatter/
└── templates/
    ├── tech-theme.css        # 科技风主题
    ├── minimal-theme.css     # 简约风主题
    ├── business-theme.css    # 商务风主题
    └── custom-theme.css      # 你的自定义主题

1.2 主题文件基本结构

/*
 * 主题名称 - 主题说明
 * 适用场景：具体场景说明
 * 配色：颜色方案说明
 */

/* ========== CSS变量定义 ========== */
:root {
  --primary-color: #7c3aed;
  --secondary-color: #3b82f6;
  /* ... 更多变量 */
}

/* ========== 基础样式 ========== */
body { /* body样式 */ }

/* ========== 标题样式 ========== */
h1, h2, h3 { /* 标题样式 */ }

/* ========== 段落和文本 ========== */
p, strong, em { /* 文本样式 */ }

/* ========== 代码块 ========== */
code, pre { /* 代码样式 */ }

/* ========== 其他元素 ========== */
blockquote, table, img, etc.

/* ========== 响应式优化 ========== */
@media (max-width: 768px) { /* 移动端样式 */ }

---

2. CSS变量系统

2.1 核心变量说明

颜色变量:

:root {
  /* 主色调 - 用于标题、链接、强调元素 */
  --primary-color: #7c3aed;

  /* 辅助色 - 用于装饰、渐变 */
  --secondary-color: #3b82f6;

  /* 文字颜色 */
  --text-color: #333333;          /* 正文颜色 */
  --text-light: #666666;          /* 浅色文字（注释、说明） */

  /* 背景颜色 */
  --background: #ffffff;          /* 页面背景 */
  --code-bg: #282c34;             /* 代码块背景 */
  --quote-bg: #f8f5ff;            /* 引用块背景 */

  /* 边框颜色 */
  --quote-border: #7c3aed;        /* 引用块边框 */
  --border-radius: 8px;           /* 圆角半径 */
}

为什么使用CSS变量？ 1. 统一管理: 所有颜色在一处定义 2. 易于修改: 修改一次，全局生效 3. 语义化: 变量名清晰表达用途 4. 可复用: 在多个地方使用同一变量

2.2 如何使用CSS变量

定义变量:

:root {
  --my-color: #7c3aed;
}

使用变量:

h1 {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
}

带备选值:

/* 如果--primary-color未定义，使用#7c3aed */
h1 {
  color: var(--primary-color, #7c3aed);
}

2.3 完整变量列表

:root {
  /* === 颜色系统 === */
  --primary-color: #7c3aed;           /* 主色 */
  --secondary-color: #3b82f6;         /* 辅色 */
  --accent-color: #10b981;            /* 强调色 */

  /* === 文字颜色 === */
  --text-color: #333333;              /* 正文 */
  --text-light: #666666;              /* 浅色 */
  --text-dark: #1a1a1a;               /* 深色（标题） */
  --text-muted: #999999;              /* 灰色（次要信息） */

  /* === 背景颜色 === */
  --background: #ffffff;              /* 页面背景 */
  --background-alt: #f8f9fa;          /* 交替背景 */

  /* === 代码相关 === */
  --code-bg: #282c34;                 /* 代码块背景 */
  --code-color: #abb2bf;              /* 代码文字 */
  --inline-code-bg: #f5f5f5;          /* 行内代码背景 */
  --inline-code-color: #e83e8c;       /* 行内代码颜色 */

  /* === 引用块 === */
  --quote-bg: #f8f5ff;                /* 引用背景 */
  --quote-border: #7c3aed;            /* 引用边框 */

  /* === 表格 === */
  --table-header-bg: #7c3aed;         /* 表头背景 */
  --table-border: #dee2e6;            /* 表格边框 */
  --table-stripe-bg: #f8f9fa;         /* 斑马纹背景 */

  /* === 尺寸 === */
  --border-radius: 8px;               /* 圆角 */
  --spacing-unit: 8px;                /* 间距单位 */
  --max-width: 720px;                 /* 最大宽度 */

  /* === 字体 === */
  --font-base: 16px;                  /* 基础字号 */
  --font-h1: 28px;                    /* H1字号 */
  --font-h2: 24px;                    /* H2字号 */
  --font-h3: 20px;                    /* H3字号 */
  --line-height: 1.8;                 /* 行高 */
}

---

3. 创建自定义主题

3.1 方法A: 修改现有主题

步骤1: 复制现有主题

cd templates/
cp tech-theme.css my-custom-theme.css

步骤2: 修改CSS变量

:root {
  /* 修改主色调为绿色 */
  --primary-color: #10b981;      /* 原: #7c3aed */
  --secondary-color: #14b8a6;    /* 原: #3b82f6 */

  /* 修改代码块背景为浅色 */
  --code-bg: #f5f5f5;            /* 原: #282c34 */
  --code-color: #333333;         /* 原: #abb2bf */
}

步骤3: 测试主题

python scripts/markdown_to_html.py \
  --input test.md \
  --theme my-custom \
  --preview

注意: 主题名称是CSS文件名去掉 -theme.css 后缀。例如：

my-custom-theme.css → 主题名: my-custom
dark-theme.css → 主题名: dark

3.2 方法B: 从头创建主题

步骤1: 创建新的CSS文件

touch templates/dark-theme.css

步骤2: 使用主题模板

/*
 * Dark Theme - 深色主题
 * 适用场景：科技、编程、极客内容
 * 配色：深灰黑色，高对比
 */

:root {
  /* 深色主题配色 */
  --primary-color: #60a5fa;        /* 亮蓝色 */
  --secondary-color: #a78bfa;      /* 亮紫色 */
  --text-color: #e5e7eb;           /* 浅灰文字 */
  --text-light: #9ca3af;           /* 更浅的灰色 */
  --background: #1f2937;           /* 深灰背景 */
  --code-bg: #111827;              /* 接近黑色 */
  --code-color: #f3f4f6;           /* 浅色代码 */
  --quote-border: #60a5fa;
  --quote-bg: #374151;
  --border-radius: 8px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--background);
  padding: 20px;
  max-width: 720px;
  margin: 0 auto;
}

/* 继续添加其他样式... */

步骤3: 复制必要的样式

从现有主题复制以下部分： 1. 标题样式（h1, h2, h3） 2. 段落和文本（p, strong, em） 3. 代码块（code, pre） 4. 引用块（blockquote） 5. 列表（ul, ol） 6. 表格（table） 7. 图片（img） 8. 链接（a） 9. 分隔线（hr） 10. 响应式样式（@media）

3.3 主题测试清单

创建主题后，测试以下要素：

[ ] 标题: H1/H2/H3样式清晰，层级分明
[ ] 段落: 字体大小合适，行高舒适
[ ] 代码块: 背景和文字对比度足够
[ ] 表格: 表头突出，数据易读
[ ] 引用块: 与正文区分明显
[ ] 列表: 标记清晰，缩进正确
[ ] 图片: 居中显示，间距合适
[ ] 链接: 颜色与正文区分
[ ] 移动端: 在手机上显示正常

---

4. 主题配色方案

4.1 科技/现代风格

配色方案1: 蓝紫渐变（tech主题）

:root {
  --primary-color: #7c3aed;      /* 紫色 */
  --secondary-color: #3b82f6;    /* 蓝色 */
  --accent-color: #06b6d4;       /* 青色 */
}

配色方案2: 蓝绿科技

:root {
  --primary-color: #0891b2;      /* 蓝绿色 */
  --secondary-color: #10b981;    /* 绿色 */
  --accent-color: #14b8a6;       /* 青色 */
}

配色方案3: 橙紫对比

:root {
  --primary-color: #f97316;      /* 橙色 */
  --secondary-color: #a855f7;    /* 紫色 */
  --accent-color: #ec4899;       /* 粉色 */
}

4.2 简约/文艺风格

配色方案4: 黑白灰（minimal主题）

:root {
  --primary-color: #333333;      /* 深灰 */
  --secondary-color: #666666;    /* 中灰 */
  --text-color: #333333;
  --background: #ffffff;
}

配色方案5: 温暖米色

:root {
  --primary-color: #92400e;      /* 棕色 */
  --secondary-color: #b45309;    /* 浅棕 */
  --background: #fffbeb;         /* 米色 */
  --text-color: #1c1917;
}

4.3 商务/专业风格

配色方案6: 深蓝金色（business主题）

:root {
  --primary-color: #1e3a8a;      /* 深蓝 */
  --secondary-color: #f59e0b;    /* 金色 */
  --accent-color: #dc2626;       /* 红色（强调） */
}

配色方案7: 墨绿商务

:root {
  --primary-color: #065f46;      /* 墨绿 */
  --secondary-color: #047857;    /* 绿色 */
  --accent-color: #ca8a04;       /* 金色 */
}

4.4 配色工具推荐

Coolors.co: 配色方案生成器
Adobe Color: 专业配色工具
Material Design Colors: Google配色指南
Flat UI Colors: 扁平化配色

---

5. 样式定制详解

5.1 标题样式定制

H1标题样式示例:

/* 样式1: 左侧渐变边框 */
h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 32px 0 24px 0;
  padding-left: 16px;
  border-left: 4px solid var(--primary-color);
  position: relative;
}

h1::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%);
}

/* 样式2: 底部渐变下划线 */
h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 32px 0 24px 0;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--secondary-color);
}

/* 样式3: 居中带装饰 */
h1 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin: 32px 0 24px 0;
  text-align: center;
  position: relative;
}

h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  margin: 12px auto 0;
}

H2标题样式示例:

/* 样式1: 左侧边框 */
h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-color);
  margin: 28px 0 20px 0;
  padding-left: 12px;
  border-left: 4px solid var(--secondary-color);
}

/* 样式2: 底部部分下划线 */
h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 28px 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(90deg,
    var(--primary-color) 0%,
    var(--secondary-color) 50%,
    transparent 50%);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

/* 样式3: 带序号 */
h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 28px 0 20px 0;
  counter-increment: h2-counter;
}

h2::before {
  content: counter(h2-counter) ". ";
  color: var(--primary-color);
  font-weight: 700;
}

5.2 代码块样式定制

浅色代码块:

pre {
  background: #f5f5f5;
  color: #333333;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e1e4e8;
  overflow-x: auto;
  margin: 20px 0;
  line-height: 1.6;
}

pre code {
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-family: "SFMono-Regular", Consolas, monospace;
}

深色代码块（Atom One Dark）:

pre {
  background: #282c34;
  color: #abb2bf;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 20px 0;
}

/* 语法高亮 */
.hljs-keyword { color: #c678dd; }  /* 关键字-紫色 */
.hljs-string { color: #98c379; }   /* 字符串-绿色 */
.hljs-function { color: #61afef; } /* 函数-蓝色 */
.hljs-number { color: #d19a66; }   /* 数字-橙色 */
.hljs-comment { color: #5c6370; }  /* 注释-灰色 */

代码块添加语言标签:

pre::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 1px;
}

5.3 表格样式定制

渐变表头:

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table thead {
  background: linear-gradient(135deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%);
  color: #ffffff;
}

table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

table td {
  padding: 12px 16px;
  border: 1px solid #dee2e6;
}

table tbody tr:nth-child(even) {
  background: #f8f9fa;
}

table tbody tr:hover {
  background: #f1f3f5;
}

简约表格:

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table th {
  padding: 12px 16px;
  background: #f6f8fa;
  border: 1px solid #ddd;
  font-weight: 600;
}

table td {
  padding: 12px 16px;
  border: 1px solid #ddd;
}

table tbody tr:nth-child(even) {
  background: #fafafa;
}

5.4 引用块样式定制

彩色左边框:

blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--quote-bg);
  border-left: 4px solid var(--quote-border);
  border-radius: 0 8px 8px 0;
  color: var(--text-light);
  font-style: italic;
}

带图标引用:

blockquote {
  margin: 20px 0;
  padding: 16px 20px 16px 60px;
  background: #f8f5ff;
  border-left: 4px solid #7c3aed;
  position: relative;
}

blockquote::before {
  content: "💡";
  position: absolute;
  left: 20px;
  top: 16px;
  font-size: 24px;
}

卡片式引用:

blockquote {
  margin: 20px 0;
  padding: 20px;
  background: #ffffff;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

---

6. 响应式设计

6.1 移动端优化

基础响应式:

@media (max-width: 768px) {
  body {
    padding: 16px;
    font-size: 15px;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }

  pre {
    padding: 12px;
    font-size: 13px;
  }

  table {
    font-size: 14px;
  }

  table th, table td {
    padding: 8px 10px;
  }
}

6.2 响应式断点

/* 小屏手机 */
@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 22px; }
}

/* 大屏手机/小平板 */
@media (min-width: 481px) and (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
}

/* 平板/小屏桌面 */
@media (min-width: 769px) and (max-width: 1024px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
}

/* 桌面 */
@media (min-width: 1025px) {
  body { font-size: 16px; }
  h1 { font-size: 28px; }
}

---

7. 高级技巧

7.1 使用CSS Grid布局

.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}

7.2 自定义列表样式

ul li {
  list-style-type: none;
  position: relative;
  padding-left: 24px;
}

ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 600;
}

7.3 添加提示框样式

.tip {
  padding: 16px 20px;
  margin: 20px 0;
  background: #e7f5ff;
  border-left: 4px solid #3b82f6;
  border-radius: 0 8px 8px 0;
}

.warning {
  background: #fff3cd;
  border-color: #ffc107;
}

.danger {
  background: #fee;
  border-color: #dc3545;
}

---

8. 主题发布

8.1 主题命名规范

使用小写字母和连字符
格式: name-theme.css
示例: dark-theme.css, ocean-theme.css

8.2 主题文档

在主题CSS文件顶部添加注释：

/*
 * Ocean Theme - 海洋主题
 * 作者: Your Name
 * 版本: 1.0.0
 * 适用场景: 清新、自然、环保类内容
 * 配色: 蓝绿海洋色系
 *
 * 主要特点:
 * - 清新的蓝绿配色
 * - 流畅的渐变效果
 * - 适合科普、自然类文章
 *
 * 使用方法:
 * python scripts/markdown_to_html.py --theme ocean
 */

8.3 分享主题

1. 确保主题CSS文件完整 2. 测试所有样式元素 3. 提供示例文章 4. 分享主题文件和截图

---

9. 故障排除

Q1: CSS变量不生效？

检查:

变量是否在 :root 中定义
使用 var() 函数时是否拼写正确
浏览器是否支持CSS变量

Q2: 样式在微信中丢失？

原因: CSS变量无法内联

解决: 转换脚本会自动替换CSS变量为实际值

Q3: 渐变效果不显示？

检查:

渐变语法是否正确
是否提供了备选颜色
部分旧设备可能不支持复杂渐变

---

10. 参考资源

# Python dependencies for wechat-article-formatter skill
# 微信公众号文章格式化工具的Python依赖

# Markdown解析
markdown>=3.4.0
beautifulsoup4>=4.12.0

# CSS处理
cssutils>=2.9.0

# HTML解析
lxml>=4.9.0

# 文件监听（用于实时预览）
watchdog>=3.0.0

# 代码高亮（可选，如果需要更好的语法高亮）
Pygments>=2.15.0

Related skills

Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.173k42.2k

CopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.164k42.2k

Viral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k67

Viral HooksWrite and critique viral hooks for short-form video opening sequences.123k67

Viral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k67

Viral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k67

FAQ

Does it include the article title?

No. It skips the Markdown H1 because WeChat has a separate title field, and adds a comment reminding you to fill the title in the WeChat editor.

Which template does it use by default?

It defaults to the 'VSCode 蓝色科技风' (VSCode blue tech) template and only offers other templates if you are unhappy with the default.

Marketing & SEOcontentdistribution

About

Wechat Article Formatter by the numbers

wechat-article-formatter capabilities & compatibility

What wechat-article-formatter says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

微信公众号文章格式化（小龙虾极速版）

核心理念：默认精美，一键完成

执行流程（3步搞定）

步骤1：找到文章

步骤2：使用精美模板转换

步骤3：告诉用户结果

错误处理

与其他skill联动

使用示例

示例1：单篇技术文章转换（科技风主题）

场景描述

输入文件

示例代码

执行步骤

步骤1：使用命令行转换

步骤2：查看输出结果

步骤3：在浏览器中预览

步骤4：复制到微信公众号编辑器

预期结果

关键学习点

示例2：批量转换多篇文章（简约风主题）

场景描述

输入文件结构

执行步骤

步骤1：批量转换

步骤2：查看转换进度

步骤3：验证输出文件

预期结果

关键学习点

示例3：实时预览编辑（商务风主题）

场景描述

输入文件

执行步骤

步骤1：启动实时预览服务

步骤2：在编辑器中修改Markdown文件

步骤3：保存并查看实时更新

步骤4：继续编辑直到满意

步骤5：停止预览服务

预期结果

关键学习点

三个示例对比总结

最佳实践建议

1. 主题选择建议

2. 工作流程建议

3. 性能优化建议

4. 常见问题处理

更多资源

反馈与改进

快速参考卡 - WeChat Article Formatter

🚀 最快速的使用方式

单行命令（最常用）

🎨 主题选择（3 秒决策）

📋 完整工作流（2 分钟）

🔄 与 wechat-tech-writer 配合

❌ 常见问题（5 秒解决）

🔧 高级用法

批量转换

实时预览

自定义主题

📖 需要更多帮助？

WeChat Article Formatter

✨ 核心功能

🚀 快速开始

1. 转换单篇文章

2. 批量转换

3. 实时预览

📚 文档导航

入门文档

参考文档