𝗝'𝗮𝗶 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗶𝘁 𝗨𝗻 É𝗱𝗶𝘁𝗲𝘂𝗿 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗘𝗻 𝗗𝗶𝗿𝗲𝗰𝘁 𝗦𝗮𝗻𝘀 𝗔𝘂𝗰𝘂𝗻𝗲 𝗕𝗶𝗯𝗹𝗶𝑜𝘁𝗵è𝗾𝘂𝗲

Vous n'avez pas besoin de bibliothèques lourdes pour construire un éditeur Markdown. J'en ai construit une version fonctionnelle en environ 40 lignes de code. Il génère du HTML instantanément au fur et à mesure que vous tapez.

Le processus suit cinq étapes spécifiques :

  1. Échapper les caractères HTML Vous devez d'abord remplacer les symboles comme < et >. Cela empêche les attaques XSS provenant de balises script. Si vous sautez cette étape, votre éditeur n'est pas sécurisé.

  2. Protéger les blocs de code Extrayez les blocs de code et remplacez-les par des espaces réservés. Cela garantit que vos règles de formatage ne cassent pas le code à l'intérieur d'un exemple.

  3. Traiter les règles de bloc Parcourez chaque ligne de texte.

  • Utilisez # pour créer des balises h1.
  • Utilisez - pour créer des éléments de liste.
  • Utilisez > pour créer des citations. Regroupez les lignes de liste dans une seule balise ul.
  1. Appliquer des regex en ligne Utilisez des expressions régulières pour gérer les styles de texte.
  • Convertissez text en balises strong.
  • Convertissez text en balises d'ancrage. L'ordre est important. Traitez le gras avant l'italique pour éviter les erreurs.
  1. Rendu en direct Regénérez l'intégralité du contenu à chaque frappe de touche. Le Markdown est léger et rapide à analyser. Cela crée l'effet d'écran divisé instantané.

La logique est simple : Échapper, protéger, règles de bloc, regex en ligne et rendu.

Essayez l'éditeur en direct ici : https://dev48v.infy.uk/solve/day11-markdown-editor.html

Source : https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9