📝 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 活动营销

二、代码示例

// 渐变颜色生成函数
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 样式
图片/GIF
🎨 预设样式
🔵 蓝色主题(默认)
📖 优雅简约
💻 技术极客
🌙 科技安静
🔥 热情耀眼
自定义 CSS(直接写元素选择器,如 p、h2、blockquote)