工具介绍
一个可以将 Markdown 渲染为漂亮的社交媒体图片的开源工具，内置一个模板，支持模板扩展， 支持自定义主题，并且已内置 9 个主题， 支持复制为图像。
此外，项目还包括一个内置的 WEB Editor，一键部署后，可以当做 Markdown 转海报图片在线编辑器使用。
工具功能
- 将 Markdown 渲染为适合社交分享的海报图片
- 内置一个模板，支持模板扩展
- 支持自定义主题，并且已内置9个主题
- 支持复制为图像
- 支持一键部署到 Vercel 等
- 已集成图片跨域代理，可以方便的插入在线图片生成图文海报
- 支持复制为HTML 代码，可粘贴到电子邮件和一些编辑器中
- 更多内置模板
如何使用
有两种使用 markdown-to-image 的方式：
- 在项目中集成：markdown-to-image 已导出为一个 React 组件，可以直接集成到您自己的项目中。
- 使用WEB UI：example路径中自带了一个 WEB Editor，部署后，可以当做在线编辑器使用。
在你的项目中集成
markdown-to-image导出了一个叫 Md2Poster 的组件以及其他三个子组件，你可以通过 npm 等安装使用。
安装
用 npm 安装：
npm i markdown-to-image
用 pnpm 安装：
pnpm install markdown-to-image
用 yarn 安装：
yarn install markdown-to-image
使用
简单开始：
import 'markdown-to-image/dist/style.css'
import { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-image'
...
const markdown = `
# AI Morning Updates
> On April 29th, what's the latest in the AI field that should be on your radar?
...
`
...
return (
...
<Md2Poster>
<Md2PosterHeader>Poster Header</Md2PosterHeader>
<Md2PosterContent>{markdown}</Md2PosterContent>
<Md2PosterFooter>Powered by ReadPo.com</Md2PosterFooter>
</Md2Poster>
...
)使用在线编辑器
使用官方部署的在线编辑器
👉 访问：ReadPo.com
部署自己的在线编辑器
这里使用Vercel进行部署，点击后一键部署：部署 Editor 到 Vercel