Markdown To Poster: convierta Markdown en pósters para redes sociales/pequeños rojos con edición en línea y soporte de despliegue con un solo clic.

Introducción general

Markdown to Image es un componente React para convertir texto Markdown en imágenes de redes sociales visualmente atractivas. El proyecto también incluye un editor web integrado que puede utilizarse como editor en línea de Markdown a póster y admite la implementación con un solo clic. Los usuarios pueden utilizar el componente de varias maneras, incluida su integración en un proyecto o el uso del editor en línea para editar y generar imágenes.

Experiencia en línea: https://readpo.com/poster

Lista de funciones

• Renderizado Markdown para imágenes de carteles optimizadas para compartir en redes sociales
• Las plantillas integradas admiten plantillas personalizadas
• 9 temas predefinidos para elegir
• Copiar la salida como imagen
• Implantación en plataformas como Vercel con un solo clic
• Proxy CORS de imágenes integrado para facilitar la inserción de imágenes en línea en los carteles
• Copie la salida como código HTML para pegarla fácilmente en correos electrónicos y editores

Utilizar la ayuda

Proceso de instalación

1. proyecto de clonación ::

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

2. Instalación de dependencias ::

npm install

3. Inicio de los servicios ::

npm run dev

4. Acceso al editor ::
   Abra su navegador y visite http://localhost:3000Ya está disponible el editor en línea.

Uso del Editor Web

1. Abrir el editor ::
   entrevistas Editor en línea.
2. Introducción de contenido Markdown ::
   Escriba o pegue su contenido Markdown en el editor.
3. Elija una plantilla y un tema ::
   Elige una de las plantillas y temas predefinidos o personaliza el tuyo.
4. Generar imagen ::
   Haz clic en el botón Generar para crear bonitas imágenes para redes sociales.
5. Copiar o descargar ::
   Puede copiar la imagen generada en el portapapeles o descargarla como archivo de imagen.

Integración en los proyectos

1. componente instalado ::

npm i markdown-to-poster

2. Presentación de los 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>
);

Plantillas y temas personalizados

1. Seleccione un tema predefinido ::
   El proyecto ofrece 9 temas predefinidos que puedes elegir en el editor.
2. Plantillas personalizadas ::
   Puede personalizar la plantilla para modificar el estilo y el diseño según sus necesidades.

Despliegue en Vercel

1. Despliegue en un clic ::
   golpe (en el teclado)página del proyectoHaga clic en el botón "Desplegar con Vercel" y siga las instrucciones para completar el despliegue.
2. Nombres de dominio personalizados ::
   Una vez desplegado, puede configurar un nombre de dominio personalizado para su editor.

Flujo detallado de funcionamiento de las funciones

1. Convertir Markdown en una imagenIntroduzca texto Markdown en el editor, elija un tema predefinido o una plantilla personalizada y haga clic en el botón Generar para generar una imagen de póster optimizada para compartirla en las redes sociales.
2. Copiar la salida como imagenDespués de generar una imagen, haga clic en el botón Copiar para copiar la imagen en el portapapeles y poder pegarla fácilmente en otras aplicaciones.
3. Despliegue en un clicImplementación con un solo clic a través de plataformas como Vercel para crear rápidamente su propio editor Markdown to Poster en línea.
4. Agente CORS de imágenes integradas: Al insertar un enlace de imagen en línea en un texto Markdown, el editor gestionará automáticamente los problemas CORS y se asegurará de que la imagen se muestre correctamente.