Créer un prévisualisateur de markdown avec React

Réaliser un véritable prévisualisateur de markdown avec React, et surtout, le faire correctement, demande une véritable concentration ! Heureusement, avec un peu d'aide chacun peut y arriver. Voici quelques astuces pour réaliser votre propre prévisualisateur de markdown !

Etape 1 - Créer le HTML et le CSS

Dans cette première étape, je vous conseils de commencer par créer le code HTML et le code CSS.

Nous n'aurons pas besoin de créer d'autres composants que celui déjà proposé par défaut par React : App.js.

Au niveau du HTML, j'ai opté pour l'utilisation de flexbox dans l'objectif de mettre côte à côte deux éléments :

• l'élément de gauche (qui contient le textarea)
• l'élément de droite (qui contient le prévisualisateur)

Ces deux éléments font 50% chacun de mon côté.

Si vous le souhaitez, voici le CSS que j'utilise pour mon textarea et pour la balise code :

textarea {
  display: block;
  width: 100%;
  font-family: arial, sans-serif;
  padding: 5px 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: .25rem;
}

code {
  padding: 2px 4px;
  font-size: .9em;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

Je vous propose également d'entrer une valeur par défaut dans votre textarea. C'est un texte en markdown qui vous permettra d'avoir du contenu à l'ouverture de votre page :

# `Prévisualisateur - Believemy`\n### Oh ! De la magie !\nEn réalité, pas vraiment : ceci s\'appelle du markdown, et ce projet réalisé entièrement avec React permet de le transformer en *HTML* !\n\n### Cas d\'utilisation\n* *italique*\n* **gras**\n* `monospace`\n* ~~barré~~\n* # h1\n* ## h2\n* ### h3\n* #### etc\n[Believemy](https://believemy.com)

Allez, on se donne rendez-vous dans la prochaine étape !

Amusez-vous !

Si vous le souhaitez, vous pouvez voir tout ce qu'il est possible de réaliser avec le markdown en regardant ce guide.

Etape 2 - Détecter le changement du texte

Dans cette seconde étape, je vous recommande de détecter le changement du texte de notre textarea.

Je ne vous donne pas d'indice particulier pour cette étape, je suis sûr que vous allez y parvenir sans mon aide.

Etape 3 - Installer MarkedJS

Pour pouvoir transformer notre markdown en HTML, nous allons pouvoir profiter de l'excellente librairie Marked.

Vous pouvez l'installer en tapant la commande suivante :

npm install --save marked

Il vous suffit ensuite d'importer Marked depuis la librairie Marked, comme ce que nous avons l'habitude de faire avec React depuis le début.

Etape 4 - Transformer le texte en HTML

Pour finir ce projet, nous allons devoir transformer le markdown en HTML.

Nous avons normalement déjà réussi à détecter le changement du texte par notre utilisateur, je suis sûr que vous réussirez à récupérer le texte en lui-même. Si ce n'est pas le cas, vous pouvez consulter la fin de cette étape pour découvrir quelques précieux indices.

Pour transformer notre code markdown en HTML, nous avons installé dans l'étape précédente la librairie Marked. Voici comment ça fonctionne :

Marked(texte); // Va renvoyer le texte en markdown sous forme de HTML

En sachant cela, il vous suffit de trouver un moyen d'ajouter le code HTML généré directement dans notre élément de droite (dans notre prévisualisateur). Il y a une astuce à mettre en place, je vous laisse voir par vous-même. Vous pouvez également regarder l'indice B ci-dessous si vous le désirez.

INDICES

Indice A

Si vous avez du mal à récupérer le texte tapé par l'utilisateur, sachez que React n'est que du JavaScript. Vous pouvez récupérer le texte entré par votre utilisateur depuis l'événement créé par JavaScript.

event.target.value

Il vous suffit de détecter cet événement en le passant en paramètre via une fonction anonyme fléchée de la même manière que nous avons réussi à changer le nom de notre étudiant en passant "Elon" en paramètre.

Indice B

Si vous avez du mal à intégrer votre code HTML directement avec React : c'est normal. Il s'agit d'une sécurité de React qu nous empêche d'entrer du HTML dans du JSX. Pour la désactiver, nous pouvons utiliser l'attribut dangerouslySetInnerHTML.

Voici comment l'activer (c'est très simple) : https://fr.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Ce projet est votre tout premier projet avec React. Il n'est pas très difficile mais il n'est pas non plus très facile. Je sais que vous pouvez y arriver, prenez votre temps, respirez, buvez un chocolat chaud ou un café et n'hésitez pas à effectuer quelques recherches sur internet plutôt que de regarder immédiatement la correction :  c'est le meilleur moyen d'apprendre. Toute ce dont vous avez besoin a été vu ensemble.

Je crois en vous !

Correction

Attention, vous êtes sur le point de consulter la correction. Arrêtez-vous ici et essayez vraiment de réaliser votre petit prévisualisateur de markdown par vous-même, vous en êtes capable. Il n'y a rien de plus satisfaisant que de réussir un projet, même lorsque nous devons vraiment chercher longtemps.

Voici le lien vers la vidéo de correction complète : https://www.youtube.com/watch?v=RA1zlN3roJI