-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathwechat-output.html
More file actions
49 lines (49 loc) · 10.5 KB
/
Copy pathwechat-output.html
File metadata and controls
49 lines (49 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>thinkthinking 预览</title></head><body style="max-width:720px;margin:0 auto;padding:20px;font-family:-apple-system,sans-serif">
<h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">这是什么</h2>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">thinkthinking 是一个面向 Agent 的 CLI 工具箱。本文用来演示 Markdown 转微信公众号 HTML 的效果，覆盖标题、段落、加粗、斜体、引用、代码、列表、链接、图片、表格等常见元素。</p>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">说实话，好的排版不该让读者注意到设计本身。</p>
<h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">文本样式</h2>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">支持<strong style="font-weight: 700; color: #1a1a1a" data-darkmode-color="#6aadff">加粗文本</strong>和<em style="font-style: italic; color: #333333">斜体文本</em>，以及 <code style="font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14px; background: #f1f5f9; color: #d946ef; padding: 2px 6px; border-radius: 4px" data-darkmode-color="#d4d4d4">行内代码</code>。中英文混排时会自动加空格，比如 thinkthinking 这个词和中文之间。</p>
<blockquote style="border-left: 4px solid #2563eb; background: #eff6ff; margin: 16px 0; padding: 12px 16px; border-radius: 0 8px 8px 0; color: #333333" data-darkmode-bgcolor="#252525" data-darkmode-color="#c8c8c8">
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">好的排版不是让读者注意到设计，而是让读者忘记设计，只记住内容。</p>
</blockquote>
<h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">代码块</h2>
<pre data-lang="go" style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 16px 0; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word" data-darkmode-bgcolor="#2d2d2d" data-darkmode-color="#d4d4d4"><span style="display:flex;"><span><span style="color:#000;font-weight:bold" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">func</span> <span style="color:#900;font-weight:bold" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">main</span>() {
</span></span><span style="display:flex;"><span> fmt.<span style="color:#900;font-weight:bold" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">Println</span>(<span style="color:#d14" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">"Hello, thinkthinking!"</span>)
</span></span><span style="display:flex;"><span>}
</span></span></pre><h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">列表</h2>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">无序列表：</p>
<section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-size: 18px; line-height: 1.6" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">•</span><span style="flex: 1">第一个要点：简洁是设计的灵魂</span></section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-size: 18px; line-height: 1.6" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">•</span><span style="flex: 1">第二个要点：一致性比创意更重要</span></section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-size: 18px; line-height: 1.6" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">•</span><span style="flex: 1">第三个要点：移动端体验优先</span></section></section>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">有序列表：</p>
<section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-weight: 700; line-height: 1.8" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">1.</span><span style="flex: 1">解析 Markdown</span></section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-weight: 700; line-height: 1.8" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">2.</span><span style="flex: 1">转换为微信兼容 HTML</span></section><section style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><span style="color: #2563eb; margin-right: 8px; flex-shrink: 0; font-weight: 700; line-height: 1.8" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">3.</span><span style="flex: 1">上传草稿</span></section></section>
<h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">容器块</h2>
<section style="background: #ecfdf5; border-left: 4px solid #059669; padding: 14px 16px; border-radius: 4px; margin: 16px 0; font-size: 15px; line-height: 1.7"><section style="font-weight: 700; color: #059669; margin-bottom: 6px" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">💡 TIP</section>这是一个提示容器， Agent 写作时很好用。</section>
<section style="margin: 24px 0; padding: 20px 24px; background: #e8f5f0; border: 1px solid rgba(26,107,90,0.15); border-radius: 6px;"><p style="margin: 0; font-size: 16px; line-height: 1.8; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent"><strong style="color: #2563eb; font-weight: 700" data-darkmode-color="#6aadff">全文要点</strong></p><p style="margin: 8px 0 0 0; font-size: 16px; line-height: 1.8; color: #333333" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">本文演示了 thinkthinking 的核心转换能力，覆盖主流 Markdown 元素与微信兼容修复。</p></section>
<h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 28px 0 14px 0; padding: 8px 0 8px 12px; border-left: 4px solid #2563eb; border-bottom: 1px solid #e5e7eb; line-height: 1.4" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">链接与表格</h2>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">详见 thinkthinking 项目主页<sup><span style="color: #2563eb; font-size: 12px" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">[1]</span></sup>。</p>
<table style="width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px">
<thead style="background: #2563eb">
<tr style="background: #ffffff">
<th style="background: #2563eb; color: #ffffff; font-weight: 600; padding: 10px 14px; text-align: left; border: 1px solid #2563eb">指标</th>
<th style="background: #2563eb; color: #ffffff; font-weight: 600; padding: 10px 14px; text-align: left; border: 1px solid #2563eb">数值</th>
<th style="background: #2563eb; color: #ffffff; font-weight: 600; padding: 10px 14px; text-align: left; border: 1px solid #2563eb">变化</th>
</tr>
</thead>
<tbody>
<tr style="background: #ffffff">
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">阅读量</td>
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">12,580</td>
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">+23%</td>
</tr>
<tr style="background: #ffffff">
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">完读率</td>
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">68%</td>
<td style="padding: 10px 14px; border: 1px solid #e5e7eb; color: #333333">-2%</td>
</tr>
</tbody>
</table>
<hr style="border: none; border-top: 1px solid #e5e7eb; margin: 24px 0"/>
<p style="font-size: 16px; line-height: 1.8; color: #333333; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">最后这段用来展示文章结尾的留白与间距效果。</p>
<hr style="border: none; border-top: 1px solid #e5e5e5; margin: 32px 0 16px"/><p style="font-size: 13px; color: #999999; margin-bottom: 8px; font-weight: 700; line-height: 1.8; margin: 12px 0" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">参考链接</p><p style="font-size: 12px; color: #999999; margin: 2px 0; word-break: break-all; line-height: 1.8" data-darkmode-color="#c8c8c8" data-darkmode-bgcolor="transparent">[1] thinkthinking 项目主页: https://github.com/thinkthinking/cli</p>
</body></html>