Markdown To Poster: converta Markdown em mídia social/pequenos pôsteres vermelhos com edição on-line e suporte à implantação com um clique.

Markdown to Image é um componente React para renderizar texto Markdown em imagens de mídia social visualmente atraentes. O projeto também inclui um editor da Web integrado que pode ser usado como um editor on-line do Markdown to Poster e oferece suporte à implantação com um clique. Os usuários podem usar o componente de várias maneiras, inclusive integrando-o a um projeto ou usando o editor on-line para editar e gerar imagens.

Experiência on-line: https://readpo.com/poster

Lista de funções

• Renderização de Markdown para imagens de pôster otimizadas para compartilhamento social
• Os modelos incorporados suportam modelos personalizados
• Oferece 9 temas predefinidos para escolha
• Copiar a saída como uma imagem
• Implementação com um clique em plataformas como a Vercel
• Proxy CORS de imagem integrado para facilitar a inserção de imagens on-line em pôsteres
• Copie a saída como código HTML para facilitar a colagem em e-mails e editores

Usando a Ajuda

Processo de instalação

1. projeto de clonagem ：

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

2. Instalação de dependências ：

npm install

3. Início dos serviços ：

npm run dev

4. Acesso ao editor ：
   Abra seu navegador e acesse http://localhost:3000Você pode usar o editor on-line.

Usando o Web Editor

1. Abra o editor ：
   entrevistas Editor on-line。
2. Inserção de conteúdo Markdown ：
   Digite ou cole seu conteúdo Markdown no editor.
3. Escolha um modelo e um tema ：
   Escolha um dos modelos e temas predefinidos ou personalize o seu.
4. Gerar imagem ：
   Clique no botão Generate (Gerar) para renderizar belas imagens de mídia social.
5. Copiar ou fazer download ：
   Você pode copiar a imagem gerada para a área de transferência ou baixá-la como um arquivo de imagem.

Integração em projetos

1. componente instalado ：

npm i markdown-to-poster

2. Apresentando componentes ：

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

3. Uso de componentes ：

const markdown = `# 标题\n这是一个示例 Markdown 内容。`;
return (
<Md2Poster>
<Md2PosterHeader>海报标题</Md2PosterHeader>
<Md2PosterContent>{markdown}</Md2PosterContent>
<Md2PosterFooter>海报底部</Md2PosterFooter>
</Md2Poster>
);

Modelos e temas personalizados

1. Selecione um tema predefinido ：
   O projeto oferece 9 temas predefinidos que você pode escolher no editor.
2. Modelos personalizados ：
   Você pode personalizar o modelo para modificar o estilo e o layout conforme necessário.

Implantação em Vercel

1. Implementação em um clique ：
   strike (no teclado)página do projetoClique no botão "Deploy with Vercel" e siga as instruções para concluir a implantação.
2. Nomes de domínio personalizados ：
   Uma vez implantado, você pode configurar um nome de domínio personalizado para o seu editor.

Fluxo de operação detalhado da função

1. Renderização de Markdown como uma imagemInsira o texto Markdown no editor, escolha um tema predefinido ou um modelo personalizado e clique no botão Generate (Gerar) para gerar uma imagem de pôster otimizada para compartilhamento social.
2. Copiar a saída como uma imagemApós gerar uma imagem, clique no botão Copy (Copiar) para copiar a imagem para a área de transferência e colá-la facilmente em outros aplicativos.
3. Implementação em um cliqueImplementação com um clique por meio de plataformas como a Vercel para criar rapidamente seu próprio Markdown to Poster Editor on-line.
4. Agente CORS de imagem integradaInserção de um link de imagem on-line no texto do Markdown: o editor tratará automaticamente dos problemas de CORS e garantirá que a imagem seja exibida corretamente.