{"id":5962,"date":"2024-09-29T09:24:15","date_gmt":"2024-09-29T09:24:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/installer-markedjs-projet-markdown-react\/"},"modified":"2024-09-29T09:24:19","modified_gmt":"2024-09-29T09:24:19","slug":"installer-markedjs-projet-markdown-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/installer-markedjs-projet-markdown-react\/","title":{"rendered":"6.5 Installer MarkedJS pour un Projet Markdown React"},"content":{"rendered":"\n<p><strong>Installer MarkedJS pour un Projet Markdown React<\/strong> est une \u00e9tape essentielle pour tout d\u00e9veloppeur souhaitant int\u00e9grer une solution de rendu Markdown dans une application React. MarkedJS est une biblioth\u00e8que rapide et flexible permettant de convertir du texte Markdown en HTML de fa\u00e7on efficace. Dans ce tutoriel, nous allons d\u00e9couvrir comment installer et utiliser MarkedJS dans un projet React, avec des instructions pas-\u00e0-pas et des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>MarkedJS pour React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706080554?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>MarkedJS est une biblioth\u00e8que JavaScript permettant de convertir des fichiers Markdown en HTML. Dans un projet React, cela s&rsquo;av\u00e8re tr\u00e8s pratique pour afficher du contenu g\u00e9n\u00e9r\u00e9 dynamiquement ou int\u00e9gr\u00e9 par l&rsquo;utilisateur. Les sections suivantes expliquent comment installer et configurer MarkedJS dans un projet React, en int\u00e9grant \u00e9galement des <a href=\"https:\/\/wikiform.fr\/codespace\/developper-react-qu-est-ce-qu-un-module-css-utiliser-react\/\">Modules CSS<\/a> pour am\u00e9liorer la pr\u00e9sentation des composants g\u00e9n\u00e9r\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Projet React et Installer MarkedJS<\/h3>\n\n\n\n<p>Pour commencer, nous devons cr\u00e9er un projet React. Vous pouvez facilement le faire en utilisant <code>create-react-app<\/code>. Ensuite, nous allons installer MarkedJS en tant que d\u00e9pendance. Vous pouvez suivre notre tutoriel d\u00e9taill\u00e9 sur <a href=\"https:\/\/wikiform.fr\/codespace\/developper-react-creer-premiere-application-react-tutoriel\/\">comment cr\u00e9er une premi\u00e8re application React<\/a> pour plus d&rsquo;informations.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>\/\/ Cr\u00e9er un nouveau projet React\nnpx create-react-app my-markdown-app\n\n\/\/ Se d\u00e9placer dans le r\u00e9pertoire du projet\ncd my-markdown-app\n\n\/\/ Installer MarkedJS\nnpm install marked --save\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer MarkedJS dans un Composant React<\/h3>\n\n\n\n<p>Maintenant que nous avons install\u00e9 MarkedJS, voyons comment l&rsquo;int\u00e9grer dans un composant React pour convertir et afficher du texte Markdown.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport marked from 'marked';\n\nconst MarkdownEditor = () => {\n    const [markdown, setMarkdown] = useState('');\n\n    const handleChange = (event) => {\n        setMarkdown(event.target.value);\n    };\n\n    const getMarkdownText = () => {\n        const rawMarkup = marked(markdown, { sanitize: true });\n        return { __html: rawMarkup };\n    };\n\n    return (\n        <div className=\"markdown-editor\">\n            <textarea\n                value={markdown}\n                onChange={handleChange}\n                placeholder=\"\u00c9crivez votre markdown ici...\"\n            \/>\n            <div className=\"preview\" dangerouslySetInnerHTML={getMarkdownText()}><\/div>\n        <\/div>\n    );\n};\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter du Style au Composant Markdown<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;interface utilisateur, ajoutons quelques styles de base \u00e0 notre composant <code>MarkdownEditor<\/code>. Vous pouvez trouver d&rsquo;autres astuces de design dans notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-html-css-projet-markdown-react\/\">cr\u00e9er des interfaces attrayantes avec HTML et CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.markdown-editor {\n    display: flex;\n    flex-direction: column;\n    width: 50%;\n    margin: 0 auto;\n}\n\ntextarea {\n    width: 100%;\n    height: 200px;\n    margin-bottom: 20px;\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    resize: vertical;\n}\n\n.preview {\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    padding: 10px;\n    background-color: #f8f8f8;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser MarkedJS avec des Options Avanc\u00e9es<\/h3>\n\n\n\n<p>MarkedJS propose de nombreuses options de configuration pour personnaliser la conversion Markdown. Par exemple, nous pouvons activer les options d\u00e9finies dans les balises Markdown, modifier le rendu des liens, etc. Pour une compr\u00e9hension plus approfondie des fonctionnalit\u00e9s, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\/\">diff\u00e9rents \u00e9tats du cycle de vie React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport marked from 'marked';\n\nconst MarkdownEditor = () => {\n    const [markdown, setMarkdown] = useState('');\n\n    const handleChange = (event) => {\n        setMarkdown(event.target.value);\n    };\n\n    const getMarkdownText = () => {\n        const renderer = new marked.Renderer();\n        \n        \/\/ Custom options\n        renderer.link = (href, title, text) => {\n            return `<a href=\"${href}\" title=\"${title}\" target=\"_blank\" rel=\"noopener\">${text}<\/a>`;\n        };\n\n        const rawMarkup = marked(markdown, {\n            renderer: renderer,\n            gfm: true,\n            breaks: true,\n            sanitize: true\n        });\n        \n        return { __html: rawMarkup };\n    };\n\n    return (\n        <div className=\"markdown-editor\">\n            <textarea\n                value={markdown}\n                onChange={handleChange}\n                placeholder=\"\u00c9crivez votre markdown ici...\"\n            \/>\n            <div className=\"preview\" dangerouslySetInnerHTML={getMarkdownText()}><\/div>\n        <\/div>\n    );\n};\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester et D\u00e9ployer Votre Projet<\/h3>\n\n\n\n<p>Maintenant que notre composant <code>MarkdownEditor<\/code> est pr\u00eat, il est temps de tester et de d\u00e9ployer notre application. Utilisez les commandes suivantes pour d\u00e9marrer et tester votre application localement. Une fois satisfait des r\u00e9sultats, vous pouvez d\u00e9ployer votre application sur une plateforme de votre choix comme Vercel ou Netlify. Vous pouvez \u00e9galement consulter notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/developper-react-comment-ajouter-nouveau-composant-react\/\">pour ajouter de nouveaux composants \u00e0 votre projet React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>\/\/ D\u00e9marrer l'application en mode d\u00e9veloppement\nnpm start\n\n\/\/ Construire l'application pour la production\nnpm run build\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Installer et utiliser <strong>MarkedJS dans un projet Markdown React<\/strong> est une t\u00e2che relativement simple mais puissante pour les d\u00e9veloppeurs souhaitant incorporer le rendu Markdown dans leurs applications. Avec MarkedJS, vous pouvez configurer et personnaliser le comportement de rendu selon vos besoins sp\u00e9cifiques. Continuez \u00e0 explorer les diff\u00e9rentes options offertes par MarkedJS et am\u00e9liorez votre application pour qu&rsquo;elle r\u00e9ponde \u00e0 toutes vos attentes. Pour plus de tutoriels sur React et les biblioth\u00e8ques frontend, consultez notre cat\u00e9gorisation avanc\u00e9e sur <a href=\"https:\/\/wikiform.fr\/codespace\/developper-react-differences-single-page-multi-page-react\/\">la diff\u00e9rence entre les applications single-page et multi-page dans React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-expert-react\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-React-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Voici quelques ressources externes utiles pour approfondir vos connaissances :<\/p>\n<ul>\n  <li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">Documentation officielle de React<\/a><\/li>\n  <li><a href=\"https:\/\/marked.js.org\/\" target=\"_blank\" rel=\"noopener\">Site officiel de MarkedJS<\/a><\/li>\n  <li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\" target=\"_blank\" rel=\"noopener\">Guide JavaScript de MDN<\/a><\/li>\n<\/ul>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Installer MarkedJS pour un Projet Markdown React est une \u00e9tape essentielle pour tout d\u00e9veloppeur souhaitant int\u00e9grer une solution de rendu Markdown dans une application React&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3219,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5962"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5962\/revisions"}],"predecessor-version":[{"id":5963,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5962\/revisions\/5963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3219"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}