将Markdown转换为精美海报图片

文摘   2024-11-21 19:41   湖北  

项目简介


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


功能

  • 将 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 (
...
<Md2Poster> <Md2PosterHeader>Poster Header</Md2PosterHeader> <Md2PosterContent>{markdown}</Md2PosterContent> <Md2PosterFooter>Powered by ReadPo.com</Md2PosterFooter></Md2Poster>
...
)


更多组件参数请阅读文档:ReadPo.com/docs


部署自己的在线编辑器

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


项目链接

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

扫码加入技术交流群,备注开发语言-城市-昵称

合作请注明


 

关注「GitHubStore」公众号


GitHubStore
分享有意思的开源项目
 最新文章