{"id":2335,"date":"2020-09-30T22:30:20","date_gmt":"2020-09-30T20:30:20","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=2335"},"modified":"2025-11-19T18:25:38","modified_gmt":"2025-11-19T17:25:38","slug":"utiliser-stackedit","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/","title":{"rendered":"Utiliser StackEdit"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours nous allons <strong>apprendre \u00e0 utiliser le langage Markdown pour structurer un article destin\u00e9 \u00e0 la publication Web<\/strong>, en nous appuyant sur les fonctionnalit\u00e9 d&rsquo;une application en ligne&nbsp;: StackEdit. Nous verrons aussi comment <strong>exporter au format HTML les contenus structur\u00e9s avec StackEdit<\/strong>.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/stackedit.io\/\" target=\"_blank\"><strong>StackEdit<\/strong><\/a> est un <strong>\u00e9diteur Markdown en ligne<\/strong> ergonomique, facile \u00e0 prendre en main et parfaitement adapt\u00e9 \u00e0 la structuration de contenus textuels.<\/p>\n\n\n\n<p>Ses fonctionnalit\u00e9s permettent (entre autres choses&#8230;) de <strong>publier des contenus directement sur les principales plateformes de blogging<\/strong>. Elles permettent aussi d&rsquo;\u00e9diter les contenus des sites construits avec des CMS bas\u00e9s sur Markdown (Pico, Grav, Yellow, etc)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01-1024x506.png\" alt=\"\" class=\"wp-image-2337\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01-1024x506.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01-600x296.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01-768x379.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-01.png 1118w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">StackEdit est aussi un outil convivial pour <strong>tenir un journal de formation<\/strong> (en tant qu\u2019apprenant) ou <strong>un journal p\u00e9dagogique<\/strong> (en tant que formateur).<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Processus_editorial\" >Processus \u00e9ditorial<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Presentation_de_StackEdit\" >Pr\u00e9sentation de StackEdit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Test_de_codage_Markdown\" >Test de codage Markdown<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Saut_de_ligne_et_saut_de_paragraphe\" >Saut de ligne et saut de paragraphe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Exporter_le_fichier_test_en_md\" >Exporter le fichier test en .md<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Exporter_le_fichier_en_HTML\" >Exporter le fichier en HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Exemple_de_page_Web_realisee_avec_StackEdit\" >Exemple de page Web r\u00e9alis\u00e9e avec StackEdit<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Utiliser_du_HTML_directement_dans_StackEdit\" >Utiliser du HTML directement dans StackEdit<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Importer_un_fichier_HTML\" >Importer un fichier HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Saisir_du_code_HTML_dans_la_fenetre_dedition\" >Saisir du code HTML dans la fen\u00eatre d&rsquo;\u00e9dition<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/utiliser-stackedit\/#Lectures_et_video_en_ligne\" >Lectures et vid\u00e9o en ligne<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Processus_editorial\"><\/span>Processus \u00e9ditorial<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a08df356bc10&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a08df356bc10\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-1024x576.png\" alt=\"\" class=\"wp-image-7603\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-1024x576.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-600x338.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-768x432.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-1536x864.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit-1200x675.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/edition-pages-Web-avec-StackEdit.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandir\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Les fichiers cr\u00e9\u00e9s avec StackEdit sont des <strong>fichiers Markdown<\/strong>. Apr\u00e8s connexion sur votre <strong>compte Google<\/strong>, les fichiers sont enregistr\u00e9s dans une base de donn\u00e9es sur les serveurs de Google. Ces fichiers sont \u00e9ditables et exportables en HTML.<\/p>\n\n\n\n<p>Plusieurs options d&rsquo;exportation sont disponibles. L&rsquo;export en HTML avec l&rsquo;option <strong><em>Styled HTML<\/em><\/strong> permet d&rsquo;exporter sur son poste de travail un fichier HTML stylis\u00e9 avec la <strong>feuille de style CSS de StackEdit<\/strong> (l&rsquo;affichage de la page dans un navigateur a l&rsquo;apparence observ\u00e9e dans la fen\u00eatre de pr\u00e9visualisation de StackEdit). Cette feuille de style est h\u00e9berg\u00e9e sur les serveurs de StackEdit et int\u00e9gr\u00e9e\/appel\u00e9e automatiquement dans le \u201chead\u201d du fichier HTML export\u00e9.<\/p>\n\n\n\n<p>Le fichier HTML export\u00e9 avec le style de StackEdit est \u00e9ditable dans un \u00e9diteur de texte (<a href=\"https:\/\/phcode.dev\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Phoenix Code<\/strong><\/a>, par exemple \u2014 en ligne ou hors ligne).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Ce processus \u00e9ditorial permet de g\u00e9n\u00e9rer simplement et rapidement des pages Web. Le style de ces pages est modifiable en utilisant notamment des <strong><a href=\"https:\/\/www.classlesscss.com\" target=\"_blank\" rel=\"noreferrer noopener\">CSS classless<\/a><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Presentation_de_StackEdit\"><\/span>Pr\u00e9sentation de StackEdit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le fichier imm\u00e9diatement visible au lancement de l&rsquo;application est un texte d&rsquo;accueil en anglais (intitul\u00e9 \u201cWelcome\u201d). Dans Chrome, <strong>un clic droit dans la zone des boutons de formatage du texte <\/strong>(bandeau noir) <strong>permet d&rsquo;acc\u00e9der \u00e0 la traduction en fran\u00e7ais<\/strong>. Tout est expliqu\u00e9&#8230; ou presque, et cela devient un peu compliqu\u00e9 vers la fin du document&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02-1024x567.jpg\" alt=\"\" class=\"wp-image-2341\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02-1024x567.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02-600x332.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02-768x425.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02-1200x664.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-02.jpg 1406w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Nous disposons d&rsquo;<strong>une fen\u00eatre (ou zone) d&rsquo;\u00e9dition<\/strong> \u2014 \u00e0 gauche \u2014 et d&rsquo;<strong>une fen\u00eatre (ou zone) de pr\u00e9visualisation<\/strong> \u2014 \u00e0 droite . <\/p>\n\n\n\n<p>Les boutons plac\u00e9s entre les 2 zones verticales permettent de <strong>g\u00e9rer l&rsquo;affichage des diff\u00e9rentes zones<\/strong>.<\/p>\n\n\n\n<p>Les boutons situ\u00e9s en haut \u00e0 gauche et en haut \u00e0 droite permettent d&rsquo;<strong>ouvrir des menus compl\u00e9mentaires<\/strong>. Le menu de gauche r\u00e9pertorie vos documents et celui de droite permet d&rsquo;acc\u00e9der \u00e0 de nombreux sous-menus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Test_de_codage_Markdown\"><\/span>Test de codage Markdown<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je vous propose de coder en Markdown un texte tr\u00e8s simple, dans un document que vous intitulerez \u201ctest\u201d. Voici la <strong>premi\u00e8re partie du texte \u00e0 coder<\/strong> :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04-1024x537.jpg\" alt=\"\" class=\"wp-image-2349\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04-1024x537.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04-768x402.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04-1200x629.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-04.jpg 1391w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Rien de compliqu\u00e9&nbsp;! Il est vrai que le code Markdown en gris clair ne se voit pas tr\u00e8s bien&#8230; Si vous ne parvenez pas \u00e0 coder en Markdown  en saisissant le bon code, vous pouvez toujours utiliser les boutons de la barre d&rsquo;outils noire (ou barre de formatage, au dessus de la zone d&rsquo;\u00e9dition).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Si vous souhaitez <strong>voir une liste de toutes les balises Markdown<\/strong> pour mieux vous y retrouver (ou tester l&rsquo;utilisation d&rsquo;autres balises), cliquez sur le bouton avec le signe # (en haut \u00e0 droite), puis cliquez sur l&rsquo;<strong>onglet \u201cMarkdown cheat sheet\u201d<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05-1024x537.jpg\" alt=\"\" class=\"wp-image-2351\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05-1024x537.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05-600x315.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05-768x403.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05-1200x629.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-05.jpg 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Pour ceux qui souhaitent aller un petit peu plus loin, voici <strong>la deuxi\u00e8me partie du texte \u00e0 coder<\/strong> :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06-1024x538.jpg\" alt=\"\" class=\"wp-image-2354\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06-1024x538.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06-600x315.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06-768x404.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06-1200x631.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-06.jpg 1391w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Saut_de_ligne_et_saut_de_paragraphe\"><\/span>Saut de ligne et saut de paragraphe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Les \u00e9diteurs Markdown g\u00e8rent de mani\u00e8re tr\u00e8s simple les sauts de ligne et les sauts de paragraphe. Cependant nos habitudes de traitement de texte nous am\u00e8nent \u00e0 r\u00e9p\u00e9ter la m\u00eame erreur.<\/p>\n\n\n\n<p>En effet, avec StackEdit (et tout \u00e9diteur Markdown) <strong>il faut saisir 2 retours \u00e0 la lignes (taper 2 fois sur la touche \u201centr\u00e9e\u201d) pour coder un saut de paragraphe<\/strong>. Un simple retour \u00e0 la ligne code un saut de ligne (un <code>&lt;br&gt;<\/code> en HTML).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Ce point est tr\u00e8s important en mati\u00e8re de structuration r\u00e9dactionnelle du texte pour le Web. En effet, pour ce type de publication, il convient de r\u00e9diger des paragraphes concis, traitant d&rsquo;une seule id\u00e9e \u00e0 la fois. <strong>\u00c9vitez dans la mesure du possible les sauts de ligne au sein d&rsquo;un m\u00eame long paragraphe<\/strong>.<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">\u279c Jetez un \u0153il sur cet <a rel=\"noreferrer noopener\" href=\"https:\/\/audreytips.com\/redaction-web-que-vos-lecteurs-aiment-lire\/#:~:text=Des%20paragraphes%20succincts%20am%C3%A9liorent%20nettement,sans%20jamais%20d%C3%A9passer%20les%204.\" target=\"_blank\">article du site audreytips.com<\/a> et interrogez-vous sur ce qu&rsquo;apporte le d\u00e9coupage en paragraphes courts (3 ou 4 phrases maximum).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exporter_le_fichier_test_en_md\"><\/span>Exporter le fichier test en .md<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vous savez baliser en Markdown des titres, des paragraphes, des listes \u00e0 puces ou ordonn\u00e9es, des citations&#8230; C&rsquo;est super&nbsp;! Il est grand temps maintenant de sauvegarder votre travail.<\/p>\n\n\n\n<p><strong>Le document saisi dans StackEdit est automatiquement sauvegard\u00e9 dans notre navigateur<\/strong>. C&rsquo;est cool mais pour plus de s\u00fbret\u00e9 vous allez exporter sur votre bureau le fichier \u201ctest\u201d,  en utilisant le format markdown (extension .md).<\/p>\n\n\n\n<p class=\"has-primary-background-color has-background\">\u279c Un clic sur l&rsquo;ic\u00f4ne de StackEdit pour ouvrir les onglets suppl\u00e9mentaires&#8230; Ouvrez l&rsquo;<strong>onglet \u201cImport\/export\u201d<\/strong>. Choisissez <strong>\u201cExport as Markdown\u201d<\/strong> et nommez votre fichier selon les r\u00e8gles de nommage apprises \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07-1024x536.jpg\" alt=\"\" class=\"wp-image-2356\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07-1024x536.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07-768x402.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07-1200x628.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-07.jpg 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08-1024x535.jpg\" alt=\"\" class=\"wp-image-2358\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08-1024x535.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08-768x401.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08-1200x627.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/stackedit-08.jpg 1393w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exporter_le_fichier_en_HTML\"><\/span>Exporter le fichier en HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"has-accent-background-color has-background\">Cette partie concerne les apprenants ayant le besoin ou l&rsquo;envie de <strong>cr\u00e9er des pages Web pour les consulter en local <\/strong>(sur leur poste de travail) <strong>ou en distant<\/strong> (apr\u00e8s les avoir mis en ligne).<\/p>\n\n\n\n<p>Un des point les plus int\u00e9ressants de StackEdit concerne la qualit\u00e9 de l&rsquo;export au format HTML. En effet, la plateforme propose plusieurs modalit\u00e9s d&rsquo;exportation et le code g\u00e9n\u00e9r\u00e9 par StackEdit est particuli\u00e8rement propre.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">L&rsquo;exportation en HTML d\u00e9bute comme l&rsquo;exportation en Markdown (ic\u00f4ne de StackEdit et onglet \u201cImport\/export\u201d). Cliquez ensuite sur l&rsquo;<strong>onglet \u201cExport as HTML\u201d<\/strong>. Les recommandations concernant le nommage des fichiers export\u00e9s restent valables&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09-1024x535.jpg\" alt=\"\" class=\"wp-image-2438\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09-1024x535.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09-600x314.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09-768x401.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09-1200x627.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-09.jpg 1393w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Parmi les options propos\u00e9es \u00e0 l&rsquo;exportation, 2 d&rsquo;entre elles nous int\u00e9ressent plus particuli\u00e8rement&nbsp;: <strong>l&rsquo;option \u201cStyled HTML\u201d<\/strong> et <strong>l&rsquo;option \u201cStyled HTML with TOC\u201d<\/strong>. TOC est l&rsquo;acronyme de \u201cTable Of Content\u201d (table des mati\u00e8res ou sommaire&#8230;). En effet, ces deux options g\u00e9n\u00e8rent des <strong>pages HTML pr\u00eates \u00e0 la publication en ligne<\/strong>.<\/p>\n\n\n\n<p><strong>L&rsquo;option par d\u00e9faut \u201cPlain HTML\u201d<\/strong> g\u00e9n\u00e8re une page HTML dans laquelle figure seulement le contenu du &lt;body&gt; (la structure \u00e0 partir du &lt;h1&gt;). Une telle page est lisible en local par un navigateur mais elle ne contient aucune instruction CSS et n&rsquo;est pas publiable en l&rsquo;\u00e9tat. Cette option est cependant <strong>utilisable quand il s&rsquo;agit de copier une partie du code pour le coller dans un gabarit de site<\/strong>, par exemple.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13-1024x585.jpg\" alt=\"\" class=\"wp-image-2458\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13-1024x585.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13-600x343.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13-768x439.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13-1200x685.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-13.jpg 1355w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16-1024x585.jpg\" alt=\"\" class=\"wp-image-2464\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16-1024x585.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16-600x343.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16-768x439.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16-1200x686.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-16.jpg 1352w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-primary-background-color has-background\">\u279c Faites des <strong>tests d&rsquo;exportation en HTML<\/strong> en utilisant les diff\u00e9rents formats propos\u00e9s. <strong>Examinez le rendu dans le navigateur des fichiers HTML et jetez un \u0153il sur le code source.<\/strong><\/p>\n\n\n\n<p>Vous constaterez qu&rsquo;avec les 2 options \u201cStyled HTML\u201d et Styled HTML with TOC\u201d, <strong>la feuille de style utilis\u00e9e n&rsquo;est pas incorpor\u00e9e dans le fichier HTML mais appel\u00e9e depuis le serveur de StackEdit<\/strong>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Cela nous ouvre des perspectives de personnalisation de la page export\u00e9e<\/strong>. En effet,  en modifiant le lien d&rsquo;appel de la feuille de style, nous pourrons faire pointer ce lien vers un dossier \u201ccss\u201d plac\u00e9 \u00e0 la racine du fichier HTML (dans le m\u00eame dossier que le fichier HTML) puis vers une feuille de style de notre choix (plac\u00e9e au pr\u00e9alable dans le dossier \u201ccss\u201d).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15-1024x580.jpg\" alt=\"\" class=\"wp-image-2459\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15-1024x580.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15-600x340.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15-768x435.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15-1200x680.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-15.jpg 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>L&rsquo;export avec l&rsquo;option \u201cTOC\u201d g\u00e9n\u00e8re un fichier HTML incorporant une colonne lat\u00e9rale dans laquelle s&rsquo;affiche <strong>un sommaire reprenant le titre de niveau 1 et les sous-titres de niveau h2 du texte structur\u00e9 dans Stackedit<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12-1024x565.jpg\" alt=\"\" class=\"wp-image-2443\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12-1024x565.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12-600x331.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12-768x424.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12-1200x662.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-12.jpg 1356w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>StackEdit est donc aussi un \u00e9diteur de pages Web<\/strong>, tr\u00e8s simple d&rsquo;utilisation, permettant de g\u00e9n\u00e9rer des documents agr\u00e9ables \u00e0 lire et diffusables sur toutes les plateformes (le format HTML est universel&#8230;).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemple_de_page_Web_realisee_avec_StackEdit\"><\/span>Exemple de page Web r\u00e9alis\u00e9e avec StackEdit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La page suivante, r\u00e9dig\u00e9e en Markdown dans Stackedit, a \u00e9t\u00e9 export\u00e9e avec l&rsquo;option \u201cTOC\u201d puis mise en ligne sur les serveurs d&rsquo;OVH (voir l&rsquo;URL de la page apr\u00e8s avoir cliqu\u00e9 sur l&rsquo;image).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/fcs\/culture-web\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"599\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-1024x599.png\" alt=\"\" class=\"wp-image-7432\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-1024x599.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-600x351.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-768x449.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-1536x898.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-2048x1198.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-1200x702.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/09\/page-culture-web-1980x1158.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>La liste affich\u00e9e en haut \u00e0 gauche de la page fonctionne comme un menu en colonne lat\u00e9rale, permettant de naviguer dans la page, de titre h2 en titre h2.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utiliser_du_HTML_directement_dans_StackEdit\"><\/span>Utiliser du HTML directement dans StackEdit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Importer_un_fichier_HTML\"><\/span>Importer un fichier HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>StackEdit permet d&rsquo;importer des fichiers HTML via l&rsquo;onglet \u201cImport\/export\u00a0\u00bb.  Vous acc\u00e9dez \u00e0 2 boutons d&rsquo;importation&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Import Markdown<\/li>\n\n\n\n<li>Import HTML<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"527\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-1024x527.jpg\" alt=\"\" class=\"wp-image-2546\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-1024x527.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-600x309.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-768x395.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-1536x791.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23-1200x618.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-23.jpg 1550w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">Le second bouton permet de <strong>transformer automatiquement une page HTML en page Markdown<\/strong> ! G\u00e9nial, non&nbsp;?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Saisir_du_code_HTML_dans_la_fenetre_dedition\"><\/span>Saisir du code HTML dans la fen\u00eatre d&rsquo;\u00e9dition<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Il est possible d&rsquo;ins\u00e9rer des balises HTML dans le code Markdown. On peut ainsi compl\u00e9ter la structuration du texte en introduisant des commentaires dans le code ou int\u00e9grer des signes conventionnels augmentant l&rsquo;accessibilit\u00e9 de la page Web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24-1024x573.jpg\" alt=\"\" class=\"wp-image-2551\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24-1024x573.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24-600x336.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24-768x430.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24-1200x671.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-24.jpg 1398w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>On peut aussi anticiper la stylisation en ins\u00e9rant des espaces ins\u00e9cables entre les mots et les signes de ponctuation. On peut encore anticiper l&rsquo;adaptativit\u00e9 aux \u00e9crans mobiles (ou entre les mots d&rsquo;une expression qu&rsquo;on voudrait voir toujours sur la m\u00eame ligne).<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Dans StackEdit, il n&rsquo;est cependant pas possible d&rsquo;utiliser l&rsquo;\u00e9l\u00e9ment &lt;span&gt; pour int\u00e9grer une instruction CSS en ligne (&#8230; <em>inline<\/em> <em>style<\/em>, en anglais), comme dans l&rsquo;exemple ci-dessous.<br><code>&lt;span style=\"color: red;\"&gt;Texte en rouge&lt;\/span&gt;<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25-1024x571.jpg\" alt=\"\" class=\"wp-image-2555\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25-1024x571.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25-600x335.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25-768x428.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25-1200x669.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/10\/stackedit-25.jpg 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>D&rsquo;autres \u00e9diteurs Markdown permettent l&rsquo;utilisation des instructions css en ligne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lectures_et_video_en_ligne\"><\/span>Lectures et vid\u00e9o en ligne<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Voici une liste de quelques sites parlant de StackEdit&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fr.linux-console.net\/?p=19316\" target=\"_blank\" rel=\"noreferrer noopener\">StackEdit, un \u00e9diteur Markdown Open Source en ligne riche en fonctionnalit\u00e9s<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.linuxadictos.com\/fr\/stackedit-un-%C3%A9diteur-de-d%C3%A9marques-pour-votre-navigateur-web.html\" target=\"_blank\">StackEdit: un \u00e9diteur Markdown pour votre navigateur Web<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/@bellanger_q\/stackedit-markdown-et-wordpress-a2cd77f48d2\" target=\"_blank\" rel=\"noreferrer noopener\">StackEdit, Markdown et WordPress&nbsp;: le trio gagnant<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markdownguide.org\/tools\/stackedit\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackEdit Markdown reference (en)<\/a><\/li>\n<\/ul>\n\n\n\n<p>Voici maintenant une vid\u00e9o en fran\u00e7ais traitant de StackEdit&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"StackEdit  \u00e9diteur puissant de Markdown en ligne \ud83d\udcaa\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/cRI7Bs5FeO8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours nous allons apprendre \u00e0 utiliser le langage Markdown pour structurer un article destin\u00e9 \u00e0 la publication Web, en nous appuyant sur les fonctionnalit\u00e9 d&rsquo;une application en ligne&nbsp;: StackEdit. Nous verrons aussi comment exporter au format HTML les contenus structur\u00e9s avec StackEdit. StackEdit est un \u00e9diteur Markdown en ligne ergonomique, facile \u00e0 prendre [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-2335","post","type-post","status-publish","format-standard","hentry","category-cours-annexes"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours nous allons apprendre \u00e0 utiliser le langage Markdown pour structurer un article destin\u00e9 \u00e0 la publication Web, en nous appuyant sur les fonctionnalit\u00e9 d&rsquo;une application en ligne&nbsp;: StackEdit. Nous verrons aussi comment exporter au format HTML les contenus structur\u00e9s avec StackEdit. StackEdit est un \u00e9diteur Markdown en ligne ergonomique, facile \u00e0 prendre en main et parfaitement adapt\u00e9 \u00e0 la structuration de contenus textuels. Ses fonctionnalit\u00e9s permettent (entre autres choses&#8230;) de publier des contenus directement sur les principales plateformes de blogging. Elles permettent aussi d&rsquo;\u00e9diter les contenus des sites construits avec des CMS bas\u00e9s sur Markdown (Pico, Grav,\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/cours-annexes\/\" rel=\"category tag\">Cours annexes<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"1 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=2335"}],"version-history":[{"count":66,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2335\/revisions"}],"predecessor-version":[{"id":7617,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/2335\/revisions\/7617"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=2335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=2335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=2335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}