Markdown To Poster : convertir Markdown en médias sociaux/petites affiches rouges avec édition en ligne et support de déploiement en un clic.

Introduction générale

Markdown to Image est un composant React qui permet de rendre un texte Markdown en images visuellement attrayantes pour les médias sociaux. Le projet comprend également un éditeur web intégré qui peut être utilisé comme éditeur Markdown to Poster en ligne et prend en charge le déploiement en un clic. Les utilisateurs peuvent utiliser le composant de différentes manières, notamment en l'intégrant dans un projet ou en utilisant l'éditeur en ligne pour modifier et générer des images.

Expérience en ligne : https://readpo.com/poster

Liste des fonctions

• Rendu Markdown pour des images d'affiches optimisées pour le partage social
• Les modèles intégrés prennent en charge les modèles personnalisés
• 9 thèmes prédéfinis au choix
• Copier le résultat sous forme d'image
• Déploiement en un clic sur des plates-formes telles que Vercel
• Proxy CORS d'image intégré pour faciliter l'insertion d'images en ligne dans les affiches
• Copier la sortie sous forme de code HTML pour faciliter le collage dans les courriels et les éditeurs

Utiliser l'aide

Processus d'installation

1. projet de clonage : :

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

2. Installation des dépendances : :

npm install

3. Démarrage des services : :

npm run dev

4. Accès à l'éditeur : :
   Ouvrez votre navigateur et visitez http://localhost:3000L'éditeur en ligne est maintenant disponible.

Utilisation de l'éditeur Web

1. Ouvrir l'éditeur : :
   entretiens Éditeur en ligne.
2. Saisir du contenu Markdown : :
   Tapez ou collez votre contenu Markdown dans l'éditeur.
3. Choisir un modèle et un thème : :
   Choisissez l'un des modèles et thèmes prédéfinis ou personnalisez le vôtre.
4. Générer une image : :
   Cliquez sur le bouton Générer pour obtenir de belles images de médias sociaux.
5. Copier ou télécharger : :
   Vous pouvez copier l'image générée dans le presse-papiers ou la télécharger sous forme de fichier image.

Intégration dans les projets

1. composant installé : :

npm i markdown-to-poster

2. Présentation des composants : :

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

3. Utilisation des composants : :

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

Modèles et thèmes personnalisés

1. Sélectionner un thème prédéfini : :
   Le projet propose 9 thèmes prédéfinis que vous pouvez choisir dans l'éditeur.
2. Modèles personnalisés : :
   Vous pouvez personnaliser le modèle pour modifier le style et la présentation selon vos besoins.

Déploiement à Vercel

1. Déploiement en un clic : :
   frappe (sur le clavier)page du projetCliquez sur le bouton "Déployer avec Vercel" et suivez les instructions pour terminer le déploiement.
2. Noms de domaine personnalisés : :
   Une fois déployé, vous pouvez configurer un nom de domaine personnalisé pour votre éditeur.

Fonction détaillée du déroulement des opérations

1. Rendre Markdown sous forme d'imagePour cela, il suffit de saisir du texte Markdown dans l'éditeur, de choisir un thème prédéfini ou un modèle personnalisé et de cliquer sur le bouton Générer pour obtenir une image d'affiche optimisée pour le partage social.
2. Copier le résultat sous forme d'imageAprès avoir généré une image, cliquez sur le bouton Copier pour copier l'image dans le presse-papiers afin de pouvoir la coller facilement dans d'autres applications.
3. Déploiement en un clicLes fonctionnalités suivantes sont disponibles : déploiement en un clic via des plateformes telles que Vercel pour créer rapidement votre propre éditeur Markdown to Poster en ligne.
4. Agent CORS de l'image intégréeL'éditeur gère automatiquement les problèmes CORS et veille à ce que l'image soit affichée correctement.