公众号排版工具 - WeChat Formatter

📝 Markdown 编辑器1597 字

# 公众号排版工具 · 渐变设计

欢迎使用 **微信公众号排版工具**！现在每一套预设都采用了 **主色 + 辅助色 + 互补色** 的三色体系，渐变元素更丰富，每种文字设计都各具特色。

## 一、功能介绍

在这里粘贴你的 Markdown 内容，右侧实时预览公众号效果。一键复制，直接粘贴到公众号编辑器即可使用。

### 1.1 主要功能

- **Markdown 实时转换** - 粘贴即可预览
- **自定义 CSS** - 侧边栏调整样式
- **GIF 动图插入** - 支持上传和 URL 插入
- **一键复制** - 直接粘贴到公众号编辑器

### 1.2 预设样式

目前有 5 套精心设计的预设风格，每一套都严格遵循三色体系：

| 风格 | 主色 | 辅助色 | 互补色 | 适用场景 |
|------|------|--------|--------|----------|
| 🔵 蓝色主题 | #1677ff | #00b96b | #ff7a45 | 通用商务 |
| 📖 优雅简约 | #2c3e50 | #3498db | #e74c3c | 散文生活 |
| 💻 技术极客 | #00d4ff | #7c3aed | #10b981 | 技术教程 |
| 🌙 科技安静 | #667eea | #764ba2 | #48bb78 | 深度长文 |
| 🔥 热情耀眼 | #ff6b35 | #f7931e | #00b894 | 活动营销 |

---

## 二、代码示例

```javascript
// 渐变颜色生成函数
function generateGradient(primary, secondary, angle = 135) {
  return `linear-gradient(${angle}deg, ${primary}, ${secondary})`;
}

const result = generateGradient('#1677ff', '#00b96b');
console.log(result);
```

> 💡 **提示**：选中预设样式可以快速切换风格。所有样式都支持内联复制，粘贴到公众号编辑器后效果一致。

### 2.1 高亮文字效果

在正文中，你可以使用 **strong 标签** 来强调重要内容。每套预设的强调色都不同，但都遵循**互补色高亮**的原则，让重点一眼就能看到。

比如这段文字里有一个**非常重要的信息**，你注意到了吗？还有行内代码 `inlineCode` 也有独特的渐变背景。

---

## 三、引用与分割线

> 优秀的排版不是堆砌装饰，而是让内容自己说话。渐变元素用在刀刃上，标题、重点、分割线各有分工，整体风格统一而不单调。
>
> — 设计箴言

### 3.1 有序列表示例

1. 第一步：确定你的**内容主题**
2. 第二步：选择合适的**预设风格**
3. 第三步：粘贴 Markdown，调整细节
4. 第四步：一键复制，粘贴到公众号

### 3.2 无序列表示例

- 渐变标题：每套都有独特的渐变效果
- 渐变引用：双色背景让引用更醒目
- 渐变分割线：两端透明，中间实
- 渐变代码块：深色渐变 + 高亮语法

---

## 四、关于渐变设计

渐变元素的使用原则：

1. **大面积用淡渐变** — 背景、卡片等大面积区域用低饱和度渐变，不抢内容风头
2. **小面积用浓渐变** — 标题、按钮、标签用高饱和度渐变，起到强调作用
3. **三色统一** — 所有渐变只从主色、辅助色、互补色三种颜色取，整体风格一致
4. **适度使用** — 渐变是装饰，不是主角，内容永远是第一位的

祝排版愉快！🎉

📱 公众号预览（可编辑）

⚙️ 样式与素材

样式

模板

图片

🎨 系统预设

🔵 蓝色主题（默认）

📖 优雅简约

🏔️ 山水木色

🌙 科技安静

🔥 热情耀眼

自定义 CSS（直接写元素选择器，如 p、h2、blockquote）

/* 🔵 蓝色主题 - 主色#1677ff 辅助色#00b96b 互补色#ff7a45 */
p { margin-bottom: 1.2em; line-height: 1.8; color: #3f3f3f; font-size: 15px; }
h1 { font-size: 24px; font-weight: 800; margin: 1.6em 0 0.8em; color: #1677ff; text-align: center; padding: 16px 0; border-top: 3px solid #1677ff; border-bottom: 3px solid #00b96b; letter-spacing: 1px; }
h2 { font-size: 20px; font-weight: 700; margin: 1.5em 0 0.8em; color: #fff; background: linear-gradient(90deg, #1677ff, #00b96b); padding: 10px 16px; border-radius: 6px; }
h3 { font-size: 17px; font-weight: 600; margin: 1.2em 0 0.6em; color: #1f1f1f; padding-left: 12px; border-left: 4px solid #1677ff; }
strong { color: #ff7a45; font-weight: 700; background: #fff2e8; padding: 1px 4px; border-radius: 3px; }
blockquote { padding: 14px 20px; margin: 1.2em 0; border-left: 4px solid #00b96b; background: #f0fff4; color: #555; font-size: 14px; border-radius: 0 8px 8px 0; line-height: 1.8; }
code { background: #fff0f6; padding: 3px 8px; border-radius: 4px; font-size: 13px; color: #eb2f96; font-family: Consolas, monospace; }
pre { background: #001529; color: #e6f7ff; padding: 16px 18px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.6; border: 1px solid #1677ff; }
img { max-width: 100%; display: block; margin: 1.2em auto; border-radius: 8px; }
ul, ol { padding-left: 1.8em; margin-bottom: 1.2em; line-height: 1.8; }
li { margin-bottom: 0.5em; }
hr { border: none; height: 2px; background: #1677ff; margin: 1.8em 0; }
a { color: #1677ff; text-decoration: none; border-bottom: 1px dashed #1677ff; }