wechat-html-formatter

Name: wechat-html-formatter
Author: cnproduct

39stars8forks

How to install wechat-html-formatter?

cnproduct/workbuddy-wechat-publisher/wechat-html-formatter

$npx -y skills add cnproduct/workbuddy-wechat-publisher --skill wechat-html-formatter

Installs into the current project.

Summary

将 Markdown 文章和图片 URL 转换成精美的微信公众号 HTML。支持一键排版，生成可直接粘贴到微信编辑器的HTML。

Files · 1

View on GitHub

SKILL.md

1	# wechat-html-formatter - 公众号HTML排版技能
2
3	## 概述
4
5	将 Markdown 文章和图片 URL 转换成精美的微信公众号 HTML。支持一键排版，生成可直接粘贴到微信编辑器的HTML。
6
7	## 触发词
8
9	公众号排版, HTML排版, 微信排版, 格式化文章, 排版美化
10
11	## 功能说明
12
13	### 核心能力
14
15	1. Markdown转HTML：完整支持 Markdown 语法
16	2. 图片注入：将图片URL注入HTML `<img>` 标签
17	3. 样式应用：应用精美的CSS样式
18	4. 微信兼容：确保微信编辑器内预览正常
19
20	### 输入要求
21
22	- Markdown 格式的文章内容
23	- JSON 格式的图片URL列表（来自 wechat-illustrator）
24
25	### 输出格式
26
27	- HTML 文件（可直接保存或复制到微信编辑器）
28	- 文件保存路径：`output/formatted_article.html`
29
30	## CSS 样式规范
31
32	### 字体设置
33
34	```css
35	body {
36	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
37	font-size: 16px;
38	line-height: 1.8;
39	color: #333333;
40	}
41	```
42
43	### 标题样式
44
45	```css
46	h1 {
47	font-size: 24px;
48	font-weight: bold;
49	text-align: center;
50	margin: 20px 0;
51	color: #1a1a1a;
52	}
53
54	h2 {
55	font-size: 20px;
56	font-weight: bold;
57	margin: 24px 0 16px;
58	padding-left: 12px;
59	border-left: 4px solid #007AFF;
60	color: #2c2c2c;
61	}
62	```
63
64	### 段落样式
65
66	```css
67	p {
68	margin: 16px 0;
69	text-align: justify;
70	text-indent: 0;
71	}
72	```
73
74	### 强调文字
75
76	```css
77	strong, b {
78	color: #007AFF;
79	font-weight: bold;
80	}
81	```
82
83	### 引用块
84
85	```css
86	blockquote {
87	background: #f5f5f5;
88	border-left: 4px solid #007AFF;
89	margin: 16px 0;
90	padding: 12px 16px;
91	font-style: italic;
92	color: #666666;
93	}
94	```
95
96	### 图片样式
97
98	```css
99	img {
100	display: block;
101	max-width: 100%;
102	height: auto;
103	margin: 20px auto;
104	border-radius: 8px;
105	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
106	}
107	```
108
109	### 代码块
110
111	```css
112	pre, code {
113	background: #f5f5f5;
114	border: 1px solid #e0e0e0;
115	border-radius: 4px;
116	font-family: "SF Mono", Consolas, monospace;
117	font-size: 14px;
118	}
119
120	pre {
121	padding: 16px;
122	overflow-x: auto;
123	}
124	```
125
126	### 列表样式
127
128	```css
129	ul, ol {
130	margin: 16px 0;
131	padding-left: 24px;
132	}
133
134	li {
135	margin: 8px 0;
136	}
137	```
138
139	## 主题配色方案
140
141	### 科技蓝（默认）
142
143	```css
144	--primary-color: #007AFF;
145	--bg-color: #ffffff;
146	--text-color: #333333;
147	--muted-color: #666666;
148	```
149
150	### 活力橙
151
152	```css
153	--primary-color: #FF9500;
154	--bg-color: #ffffff;
155	--text-color: #333333;
156	--muted-color: #666666;
157	```
158
159	### 清新绿
160
161	```css
162	--primary-color: #34C759;
163	--bg-color: #ffffff;
164	--text-color: #333333;
165	--muted-color: #666666;
166	```
167
168	### 暗黑模式
169
170	```css
171	--primary-color: #0A84FF;
172	--bg-color: #1c1c1e;
173	--text-color: #ffffff;
174	--muted-color: #8e8e93;
175	```
176
177	## 处理流程
178
179	### 步骤 1：解析 Markdown
180
181	识别并转换以下元素：
182	- `#` 标题 → `<h1>`/`<h2>`
183	- `加粗` → `<strong>`
184	- `斜体` → `<em>`
185	- `> 引用` → `<blockquote>`
186	- `- 列表` → `<ul>/<li>`
187	- `` `代码` `` → `<code>`
188	- `[配图: 描述]` → `<img>`
189
190	### 步骤 2：注入图片
191
192	读取图片清单，将占位符替换为实际 `<img>` 标签：
193
194	```html
195	<!-- 原始 -->
196	[配图: 程序员面对屏幕]
197
198	<!-- 转换后 -->
199	<img src="https://example.com/image.jpg" alt="程序员面对屏幕" />
200	```
201
202	### 步骤 3：应用样式
203
204	将 CSS 样式内联到 `<head>` 标签中：
205
206	```html
207	<!DOCTYPE html>
208	<html>
209	<head>
210	<meta charset="utf-8">
211	<meta name="viewport" content="width=device-width, initial-scale=1">
212	<style>
213	/* CSS 样式 */
214	</style>
215	</head>
216	<body>
217	<!-- 文章内容 -->
218	</body>
219	</html>
220	```
221
222	### 步骤 4：兼容性处理
223
224	- 移除可能导致微信显示异常的 CSS 属性
225	- 确保图片链接可访问
226	- 清理多余的空行和空格
227
228	## 使用示例
229
230	输入：
231	```markdown
232	# 标题
233
234	> 引用
235
236	## 小标题
237
238	内容 [配图: 图片描述]
239	```
240
241	输出 HTML：
242	```html
243	<!DOCTYPE html>
244	<html>
245	<head>
246	<meta charset="utf-8">
247	<meta name="viewport" content="width=device-width, initial-scale=1">
248	<style>
249	body { font-family: ...; line-height: 1.8; ... }
250	h1 { font-size: 24px; ... }
251	img { max-width: 100%; border-radius: 8px; ... }
252	</style>
253	</head>
254	<body>
255	<h1>标题</h1>
256	<blockquote>引用</blockquote>
257	<h2>小标题</h2>
258	<p>内容</p>
259	<img src="https://example.com/image.jpg" alt="图片描述" />
260	</body>
261	</html>
262	```
263
264	## 输出文件
265
266	- HTML 文件：`output/formatted_article.html`
267	- 文件编码：UTF-8
268	- 内容类型：text/html

People who liked this also viewed

6 picks

Type

wechat-html-formatter

39stars8forks

View on GitHub

How to install wechat-html-formatter?

cnproduct/workbuddy-wechat-publisher/wechat-html-formatter

$npx -y skills add cnproduct/workbuddy-wechat-publisher --skill wechat-html-formatter

Installs into the current project.

Summary

将 Markdown 文章和图片 URL 转换成精美的微信公众号 HTML。支持一键排版，生成可直接粘贴到微信编辑器的HTML。

Files · 1

View on GitHub

SKILL.md

1	# wechat-html-formatter - 公众号HTML排版技能
2
3	## 概述
4
5	将 Markdown 文章和图片 URL 转换成精美的微信公众号 HTML。支持一键排版，生成可直接粘贴到微信编辑器的HTML。
6
7	## 触发词
8
9	公众号排版, HTML排版, 微信排版, 格式化文章, 排版美化
10
11	## 功能说明
12
13	### 核心能力
14
15	1. Markdown转HTML：完整支持 Markdown 语法
16	2. 图片注入：将图片URL注入HTML `<img>` 标签
17	3. 样式应用：应用精美的CSS样式
18	4. 微信兼容：确保微信编辑器内预览正常
19
20	### 输入要求
21
22	- Markdown 格式的文章内容
23	- JSON 格式的图片URL列表（来自 wechat-illustrator）
24
25	### 输出格式
26
27	- HTML 文件（可直接保存或复制到微信编辑器）
28	- 文件保存路径：`output/formatted_article.html`
29
30	## CSS 样式规范
31
32	### 字体设置
33
34	```css
35	body {
36	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
37	font-size: 16px;
38	line-height: 1.8;
39	color: #333333;
40	}
41	```
42
43	### 标题样式
44
45	```css
46	h1 {
47	font-size: 24px;
48	font-weight: bold;
49	text-align: center;
50	margin: 20px 0;
51	color: #1a1a1a;
52	}
53
54	h2 {
55	font-size: 20px;
56	font-weight: bold;
57	margin: 24px 0 16px;
58	padding-left: 12px;
59	border-left: 4px solid #007AFF;
60	color: #2c2c2c;
61	}
62	```
63
64	### 段落样式
65
66	```css
67	p {
68	margin: 16px 0;
69	text-align: justify;
70	text-indent: 0;
71	}
72	```
73
74	### 强调文字
75
76	```css
77	strong, b {
78	color: #007AFF;
79	font-weight: bold;
80	}
81	```
82
83	### 引用块
84
85	```css
86	blockquote {
87	background: #f5f5f5;
88	border-left: 4px solid #007AFF;
89	margin: 16px 0;
90	padding: 12px 16px;
91	font-style: italic;
92	color: #666666;
93	}
94	```
95
96	### 图片样式
97
98	```css
99	img {
100	display: block;
101	max-width: 100%;
102	height: auto;
103	margin: 20px auto;
104	border-radius: 8px;
105	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
106	}
107	```
108
109	### 代码块
110
111	```css
112	pre, code {
113	background: #f5f5f5;
114	border: 1px solid #e0e0e0;
115	border-radius: 4px;
116	font-family: "SF Mono", Consolas, monospace;
117	font-size: 14px;
118	}
119
120	pre {
121	padding: 16px;
122	overflow-x: auto;
123	}
124	```
125
126	### 列表样式
127
128	```css
129	ul, ol {
130	margin: 16px 0;
131	padding-left: 24px;
132	}
133
134	li {
135	margin: 8px 0;
136	}
137	```
138
139	## 主题配色方案
140
141	### 科技蓝（默认）
142
143	```css
144	--primary-color: #007AFF;
145	--bg-color: #ffffff;
146	--text-color: #333333;
147	--muted-color: #666666;
148	```
149
150	### 活力橙
151
152	```css
153	--primary-color: #FF9500;
154	--bg-color: #ffffff;
155	--text-color: #333333;
156	--muted-color: #666666;
157	```
158
159	### 清新绿
160
161	```css
162	--primary-color: #34C759;
163	--bg-color: #ffffff;
164	--text-color: #333333;
165	--muted-color: #666666;
166	```
167
168	### 暗黑模式
169
170	```css
171	--primary-color: #0A84FF;
172	--bg-color: #1c1c1e;
173	--text-color: #ffffff;
174	--muted-color: #8e8e93;
175	```
176
177	## 处理流程
178
179	### 步骤 1：解析 Markdown
180
181	识别并转换以下元素：
182	- `#` 标题 → `<h1>`/`<h2>`
183	- `加粗` → `<strong>`
184	- `斜体` → `<em>`
185	- `> 引用` → `<blockquote>`
186	- `- 列表` → `<ul>/<li>`
187	- `` `代码` `` → `<code>`
188	- `[配图: 描述]` → `<img>`
189
190	### 步骤 2：注入图片
191
192	读取图片清单，将占位符替换为实际 `<img>` 标签：
193
194	```html
195	<!-- 原始 -->
196	[配图: 程序员面对屏幕]
197
198	<!-- 转换后 -->
199	<img src="https://example.com/image.jpg" alt="程序员面对屏幕" />
200	```
201
202	### 步骤 3：应用样式
203
204	将 CSS 样式内联到 `<head>` 标签中：
205
206	```html
207	<!DOCTYPE html>
208	<html>
209	<head>
210	<meta charset="utf-8">
211	<meta name="viewport" content="width=device-width, initial-scale=1">
212	<style>
213	/* CSS 样式 */
214	</style>
215	</head>
216	<body>
217	<!-- 文章内容 -->
218	</body>
219	</html>
220	```
221
222	### 步骤 4：兼容性处理
223
224	- 移除可能导致微信显示异常的 CSS 属性
225	- 确保图片链接可访问
226	- 清理多余的空行和空格
227
228	## 使用示例
229
230	输入：
231	```markdown
232	# 标题
233
234	> 引用
235
236	## 小标题
237
238	内容 [配图: 图片描述]
239	```
240
241	输出 HTML：
242	```html
243	<!DOCTYPE html>
244	<html>
245	<head>
246	<meta charset="utf-8">
247	<meta name="viewport" content="width=device-width, initial-scale=1">
248	<style>
249	body { font-family: ...; line-height: 1.8; ... }
250	h1 { font-size: 24px; ... }
251	img { max-width: 100%; border-radius: 8px; ... }
252	</style>
253	</head>
254	<body>
255	<h1>标题</h1>
256	<blockquote>引用</blockquote>
257	<h2>小标题</h2>
258	<p>内容</p>
259	<img src="https://example.com/image.jpg" alt="图片描述" />
260	</body>
261	</html>
262	```
263
264	## 输出文件
265
266	- HTML 文件：`output/formatted_article.html`
267	- 文件编码：UTF-8
268	- 内容类型：text/html

People who liked this also viewed

6 picks

Type