Markdown-to-Image：将 Markdown 文档渲染为精美图片的开源工具

Markdown-to-Image 介绍

Markdown-to-Image 是一个开源工具，能够将 Markdown 文档渲染为适合社交媒体分享的精美图片。该工具内置了一个模板，并支持模板扩展和自定义主题，目前已内置 9 个主题。此外，它还支持将生成的图片复制为图像或 HTML 代码，方便用户在不同场景下使用。

Markdown-to-Image 亮点

• 多模板支持: 内置一个模板，支持扩展更多模板，满足不同设计需求。
• 主题自定义: 提供 9 个内置主题，同时支持用户自定义主题，灵活适配各种风格。
• 跨域图片代理: 集成图片跨域代理功能，方便插入在线图片生成图文海报。
• 多种输出格式: 支持将 Markdown 渲染为图片或 HTML 代码，适用于社交媒体分享或邮件编辑。
• 一键部署: 支持快速部署到 Vercel 等平台，方便用户搭建自己的在线编辑器。

Markdown-to-Image 使用教程

在项目中集成

1. 安装依赖：
   • 使用 npm：npm i markdown-to-image
   • 使用 pnpm：pnpm install markdown-to-image
   • 使用 yarn：yarn install markdown-to-image
2. 引入组件：

   import 'markdown-to-image/dist/style.css';
   import { Md2Poster, Md2PosterContent, Md2PosterHeader, Md2PosterFooter } from 'markdown-to-image';
   

3. 使用组件：

   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>
   );
   

使用在线编辑器

1. 官方在线编辑器：
   • 访问：Markdown-to-Image 在线编辑器
2. 部署自己的在线编辑器：
   • 使用 Vercel 一键部署：Vercel 部署链接

Markdown-to-Image 获取方法

• 官方网站：Markdown-to-Image 在线编辑器
• GitHub 开源地址：Markdown-to-Image GitHub 仓库