W
公众号排版工具
清空
📋 复制到公众号
📝 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; }