一款将 Markdown 内容一键渲染为精美海报图片的在线编辑工具。支持实时预览、主题定制、水印配置、代码高亮和高清 PNG 导出，适合内容分享、技术笔记、社交媒体配图与知识卡片制作。
在线地址：https://markdown.ximilala.com
Markdown Poster 面向需要快速制作「可分享图片」的 Markdown 用户。你可以在编辑器中输入 Markdown 内容，在预览区实时查看排版效果，并通过主题、字体、颜色、背景、水印和导出参数对最终海报进行细致调整。
它适合将文字内容、代码片段、技术说明、学习笔记、产品介绍或活动文案快速转换为适合传播的图片。
- 支持 Markdown 内容编辑与即时渲染
- 支持代码块展示与语法高亮
- 编辑区与预览区联动，方便边写边调整样式
- 响应式界面，适配不同屏幕尺寸
- 内置多套预设主题，适合不同内容风格
- 支持创建、编辑和管理自定义主题
- 支持背景颜色、渐变背景与自定义 CSS 背景
- 支持调整卡片背景、文字颜色、标题颜色、强调色、边框和阴影
- 支持卡片透明度与背景亮度调节
- 支持多种中英文字体选择
- 支持字体大小、文字颜色和内容间距调节
- 支持左右边距、上下边距等布局参数配置
- 优化中英文混排展示效果
- 支持自定义水印文字
- 支持水印颜色、大小、透明度设置
- 支持九宫格位置选择
- 适合为作品、笔记或社交媒体图片添加个人标识
- 支持导出 PNG 图片
- 支持不同清晰度导出
- 支持自定义导出尺寸
- 支持单张导出、批量导出和一键复制图片
- 社交媒体配图：朋友圈、微博、Instagram、小红书等平台的文字海报
- 技术分享：代码片段、技术笔记、教程摘要、项目说明
- 学习记录：知识卡片、读书笔记、课程总结、复习资料
- 产品与运营：功能介绍、活动说明、营销文案、公告图片
- 办公展示：周报摘要、会议结论、方案说明、信息卡片
- 创意内容：灵感记录、个人作品集、博客配图
建议使用 Node.js 18 或更高版本。
# 克隆项目
git clone https://github.com/XimilalaXiang/markdown-poster.git
cd markdown-poster
# 安装依赖
npm install
# 启动开发服务器
npm run dev启动后，在浏览器中打开终端提示的本地地址即可使用。
npm run buildnpm run preview| 命令 | 说明 |
|---|---|
npm run dev |
启动本地开发服务器 |
npm run build |
构建生产版本 |
npm run preview |
预览生产构建结果 |
npm run lint |
运行 ESLint 检查 |
npm run deploy:vercel |
部署到 Vercel |
npm run deploy:cf |
构建并部署到 Cloudflare Pages |
如果你已安装 Vercel CLI，可以直接执行：
npm install -g vercel
npm run deploy:vercel也可以将代码推送到 GitHub 后，在 Vercel 控制台导入仓库并自动部署。
使用 Wrangler CLI 部署：
npm install -g wrangler
npm run deploy:cf通过 Cloudflare Pages 控制台部署时，可使用以下配置：
| 配置项 | 值 |
|---|---|
| 构建命令 | npm run build |
| 输出目录 | dist |
Windows：
deploy.batLinux / macOS：
chmod +x deploy.sh
./deploy.sh- React 18
- TypeScript
- Vite
- Tailwind CSS
- Marked
- highlight.js
- 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 # 应用入口组件
- 在编辑器中输入或粘贴 Markdown 内容。
- 在预览区查看实时渲染结果。
- 选择预设主题，或进入自定义主题编辑器调整颜色、背景、字体和卡片样式。
- 根据需要设置水印、边距、透明度和导出尺寸。
- 选择清晰度后导出 PNG 图片，或直接复制图片用于分享。
自定义主题支持调整以下内容：
- 背景颜色或背景样式
- 卡片背景色与透明度
- 正文、标题、强调文本颜色
- 边框、阴影与代码块背景
- 自定义 CSS 背景效果
通过自定义主题，你可以为不同类型的内容建立固定视觉模板，例如技术分享模板、知识卡片模板、社交媒体模板或个人品牌模板。
欢迎提交 Issue 或 Pull Request。提交代码前建议先运行：
npm run lint
npm run build如果你计划新增较大的功能，建议先通过 Issue 描述你的想法，便于讨论实现方式和维护成本。
本项目基于 MIT License 开源。
如果这个项目对你有帮助，欢迎为仓库点一个 Star。你的反馈和建议也能帮助项目继续改进。