将 Markdown 渲染为漂亮的社交媒体图片，支持一键部署，可以当做 Markdown 转海报图片在线编辑器使用。

markdown-to-image

将 Markdown 渲染为漂亮的社交媒体图片。此外，该项目还包括一个内置的 WEB Editor，一键部署后，可以当做 Markdown 转海报图片在线编辑器使用。

Github地址

https://github.com/gcui-art/markdown-to-image

在线体验

https://readpo.com/zh/poster

功能

•   将 Markdown 渲染为适合社交分享的海报图片

•   内置一个模板，支持模板扩展

•   支持自定义主题，并且已内置9个主题

•   支持复制为图像

•   支持一键部署到 Vercel 等

•   已集成图片跨域代理，可以方便的插入在线图片生成图文海报

•   支持复制为HTML 代码，可粘贴到电子邮件和一些编辑器中

•   更多内置模板

如何使用

有两种使用 markdown-to-poster 的方式：

• 在项目中集成：markdown-to-poster 已导出为一个 React 组件，可以直接集成到您自己的项目中。

• 使用WEB UI：example路径中自带了一个 WEB Editor，部署后，可以当做在线编辑器使用。

在你的项目中集成

markdown-to-poster导出了一个叫 Md2Poster 的组件以及其他三个子组件，你可以通过 npm 等安装使用。

安装

用 npm 安装：

npm i markdown-to-poster

用 pnpm 安装：

pnpm install markdown-to-poster

用 yarn 安装：

yarn install markdown-to-poster使用

简单开始：

import 'markdown-to-poster/dist/style.css'

import { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-poster'

...

const markdown = `

# AI Morning Updates

> On April 29th, what's the latest in the AI field that should be on your radar?

...

`

...

return (

...

<Md2PosterHeader>Poster Header</Md2PosterHeader>

<Md2PosterContent>{markdown}</Md2PosterContent>

<Md2PosterFooter>Powered by ReadPo.com</Md2PosterFooter>

...

)使用在线编辑器使用官方部署的在线编辑器部署自己的在线编辑器

这里使用Vercel进行部署，点击后一键部署：部署 Editor 到 Vercel