Markdown Poster

🚀 功能全面的专业级Markdown转图片工具 - 拥有近乎全能的自定义功能，满足您的所有创作需求！

🎯 全能功能特性

🎨 主题与颜色系统

• 📚 多种预设主题 - 精心设计的专业主题库
• 🎨 无限自定义主题 - 创建和管理您的专属主题
• 🌈 无限颜色混合 - 每个主题支持无限种颜色组合自定义
• 🎭 背景颜色定制 - 支持纯色、渐变色自由调节
• 💻 CSS代码自定义 - 通过CSS代码实现高级背景效果
• 🔍 卡片透明度控制 - 精确调节内容卡片的透明度
• ☀️ 背景亮度调节 - 智能控制背景明暗效果

✏️ 字体与文字系统

• 🔤 多种字体选择 - 丰富的中英文字体库
• 📏 字体大小调节 - 灵活控制文字显示大小
• 🎨 字体颜色定制 - 自由设置文字颜色
• 🌍 完美中英文支持 - 优化的字体渲染效果

🏷️ 智能水印系统

• 🎨 水印颜色自定义 - 任意颜色选择
• 📐 水印大小调节 - 精确控制水印尺寸
• 📍 水印位置设置 - 九宫格位置自由选择
• 👻 透明度控制 - 0-100%透明度精确调节
• ✍️ 文字内容自定义 - 个性化水印文字

📐 布局与间距控制

• ↔️ 左右间距调节 - 精确控制水平边距
• ↕️ 上下间距调节 - 灵活设置垂直边距
• 🎯 内容区域优化 - 智能布局算法

📤 强大导出功能

• 🔍 多种清晰度选择 - 从标清到超高清任意选择
• 🖼️ 单张图片导出 - 快速生成单个海报
• 📚 批量图片导出 - 一键生成多张不同样式
• 📋 一键复制图片 - 直接复制到剪贴板
• 🏆 PNG高质量格式 - 保证最佳图片质量
• 📏 自定义尺寸导出 - 灵活设置输出尺寸

⚡ 实时编辑体验

• 👀 所见即所得预览 - 实时查看编辑效果
• 🌈 智能语法高亮 - Markdown语法可视化
• 📱 响应式设计 - 完美适配各种屏幕尺寸

🚀 适用场景

• 📱 社交媒体 - 微博、朋友圈、Instagram精美配图
• 📄 技术分享 - 代码片段、技术文档可视化展示
• 🎯 营销推广 - 产品介绍、活动海报快速生成
• 📚 教育培训 - 知识点总结、学习笔记图片化
• 💼 商务办公 - 工作汇报、数据展示图表制作
• 🎨 创意设计 - 个人作品集、设计灵感展示
• 📖 内容创作 - 博客配图、文章插图制作

✨ 专业特色

• 🎨 无限创意可能 - 几乎所有视觉元素都可自定义
• ⚡ 极速响应 - 毫秒级实时预览体验
• 🎯 专业品质 - 设计师级别的输出效果
• 🔧 灵活配置 - 从简单到复杂，满足各种需求
• 💾 智能保存 - 自动保存您的自定义设置

🚀 快速开始

本地开发

# 克隆项目
git clone <your-repo-url>
cd markdown-poster

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build

在线部署

本项目支持部署到多个平台：

Vercel 部署（推荐）

1. 一键部署

   npm install -g vercel
   npm run deploy:vercel

2. 通过Git仓库

   • 推送代码到GitHub
   • 在 Vercel 导入项目
   • 自动检测配置并部署

Cloudflare Pages 部署

1. 使用Wrangler CLI

   npm install -g wrangler
   npm run deploy:cf

2. 通过Git仓库

   • 推送代码到GitHub
   • 在 Cloudflare Pages 创建项目
   • 配置构建设置：
     • 构建命令：npm run build
     • 输出目录：dist

快速部署脚本

Windows用户：

deploy.bat

Linux/Mac用户：

chmod +x deploy.sh
./deploy.sh

🛠️ 技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS
• Markdown解析: Marked
• 图片生成: html2canvas
• 图标: Lucide React

📁 项目结构

src/
├── components/          # React组件
│   ├── Editor.tsx      # Markdown编辑器
│   ├── Preview.tsx     # 预览组件
│   ├── Sidebar.tsx     # 侧边栏
│   └── CustomThemeEditorModal.tsx  # 自定义主题编辑器
├── data/
│   └── themes.ts       # 预设主题数据
├── types/
│   └── index.ts        # TypeScript类型定义
├── utils/
│   ├── markdownRenderer.ts  # Markdown渲染器
│   └── imageExporter.ts     # 图片导出工具
└── App.tsx             # 主应用组件

📖 使用说明

📝 基础使用流程

1. 编辑内容 - 在左侧编辑器输入Markdown内容
2. 实时预览 - 右侧实时查看渲染效果
3. 样式定制 - 选择主题、调整字体、颜色等样式
4. 高级设置 - 配置水印、间距、透明度等参数
5. 导出分享 - 选择清晰度导出或直接复制图片

🎨 高级自定义功能

• 主题管理 - 创建、编辑、删除自定义主题
• 颜色调节 - 精确控制每个元素的颜色
• 布局优化 - 调整间距、透明度、字体大小
• 水印设置 - 添加个性化水印，控制位置和样式
• 导出配置 - 自定义输出尺寸、质量和格式

🎨 自定义主题

支持创建和编辑自定义主题：

• 背景颜色/图片
• 卡片背景色
• 文字颜色
• 标题颜色
• 强调色
• 边框颜色
• 代码背景色
• 阴影颜色

📄 许可证

MIT License

🤝 贡献

欢迎提交Issue和Pull Request！

📞 支持

如果你觉得这个项目有用，请给它一个⭐️！