综合介绍
Markdown to Image 是一个用于将Markdown文本渲染为视觉上吸引人的社交媒体图片的React组件。该项目还包括一个内置的网页编辑器，可以作为在线Markdown到海报编辑器使用，并支持一键部署。用户可以通过多种方式使用该组件，包括集成到项目中或使用在线编辑器进行编辑和生成图片。
在线体验：https://readpo.com/poster
功能列表
- 渲染Markdown为优化社交分享的海报图片
- 内置模板支持自定义模板
- 提供9种预设主题可供选择
- 复制输出为图片
- 一键部署到Vercel等平台
- 集成图片CORS代理，方便插入在线图片到海报中
- 复制输出为HTML代码，便于粘贴到邮件和编辑器中
使用帮助
安装流程
- 克隆项目 ：
git clone https://github.com/gcui-art/markdown-to-image
cd markdown-to-image
- 安装依赖 ：
npm install
- 启动服务 ：
npm run dev
- 访问编辑器 ：
打开浏览器，访问http://localhost:3000，即可使用在线编辑器。
使用 Web 编辑器
- 打开编辑器 ：
访问 在线编辑器。 - 输入 Markdown 内容 ：
在编辑器中输入或粘贴你的 Markdown 内容。 - 选择模板和主题 ：
从预设的模板和主题中选择一个，或者自定义你的模板和主题。 - 生成图片 ：
点击生成按钮，渲染出美观的社交媒体图片。 - 复制或下载 ：
你可以将生成的图片复制到剪贴板，或者下载为图片文件。
集成到项目中
- 安装组件 ：
npm i markdown-to-poster
- 引入组件 ：
import 'markdown-to-poster/dist/style.css';
import { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-poster';
- 使用组件 ：
const markdown = `# 标题\n这是一个示例 Markdown 内容。`;
return (
<Md2Poster>
<Md2PosterHeader>海报标题</Md2PosterHeader>
<Md2PosterContent>{markdown}</Md2PosterContent>
<Md2PosterFooter>海报底部</Md2PosterFooter>
</Md2Poster>
);
自定义模板和主题
- 选择预设主题 ：
项目提供了 9 种预设主题，你可以在编辑器中选择。 - 自定义模板 ：
你可以根据需要自定义模板，修改样式和布局。
部署到 Vercel
- 一键部署 ：
点击项目页面上的 "Deploy with Vercel" 按钮，按照提示完成部署。 - 自定义域名 ：
部署完成后，你可以为你的编辑器配置自定义域名。
详细功能操作流程
- 渲染Markdown为图片：将Markdown文本输入到编辑器中，选择预设主题或自定义模板，点击生成按钮，即可生成优化社交分享的海报图片。
- 复制输出为图片：生成图片后，点击复制按钮，可以将图片复制到剪贴板，方便粘贴到其他应用中。
- 一键部署：通过Vercel等平台进行一键部署，快速搭建自己的在线Markdown到海报编辑器。
- 集成图片CORS代理：在Markdown文本中插入在线图片链接，编辑器会自动处理CORS问题，确保图片正常显示。
