{"id":4058,"date":"2024-03-28T13:43:43","date_gmt":"2024-03-28T12:43:43","guid":{"rendered":"https:\/\/www.ralentirtravaux.com\/le_blog\/?p=4058"},"modified":"2024-03-28T14:11:06","modified_gmt":"2024-03-28T13:11:06","slug":"apprendre-le-markdown","status":"publish","type":"post","link":"https:\/\/www.ralentirtravaux.com\/le_blog\/apprendre-le-markdown\/","title":{"rendered":"Apprendre le Markdown"},"content":{"rendered":"<p>Le markdown s\u2019apprend en <strong>cinq minutes<\/strong>. C\u2019est vraiment tr\u00e8s simple.<\/p>\n<p>Son int\u00e9r\u00eat est <strong>triple<\/strong> :<\/p>\n<ol>\n<li>Vous \u00e9crivez sur un traitement de texte dont le format est <code>txt<\/code> ou <code>md<\/code>. Autant dire que ce type de fichier sera encore lisible dans 50 ans, quelle que soit l\u2019\u00e9volution de l\u2019application que vous utilisez.<\/li>\n<li>Vous formatez votre texte sans quitter votre clavier et sans avoir \u00e0 plonger dans un sous-menu pour obtenir l\u2019effet d\u00e9sir\u00e9 (ou lorsque les commandes de mise en forme ne sont pas disponibles, comme dans des champs de commentaires de certains sites).<\/li>\n<li>L\u2019export est g\u00e9n\u00e9ralement assez riche : txt, PDF, Docs, HTML, ePub, etc.<\/li>\n<\/ol>\n<h2>Introduction<\/h2>\n<blockquote>\n<p>Markdown est un langage de balisage l\u00e9ger cr\u00e9\u00e9 en 2004 par John Gruber avec l&rsquo;aide d&rsquo;Aaron Swartz. Son but est d&rsquo;offrir une syntaxe facile \u00e0 lire et \u00e0 \u00e9crire. Un document balis\u00e9 par Markdown peut \u00eatre lu en l&rsquo;\u00e9tat sans donner l\u2019impression d&rsquo;avoir \u00e9t\u00e9 balis\u00e9 ou format\u00e9 par des instructions particuli\u00e8res. <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Markdown\">Wikip\u00e9dia<\/a><\/p>\n<\/blockquote>\n<p>Vous connaissez peut-\u00eatre d\u2019autres langages de balisage comme le HTML ou la syntaxe wiki. Ces \u00ab\u00a0langages\u00a0\u00bb consistent simplement \u00e0 ins\u00e9rer des balises afin de mettre en forme le texte propos\u00e9 \u00e0 la lecture.<\/p>\n<p>Par exemple, en HTML, afin de mettre un mot en gras, on peut utiliser les balises <code>&lt;b&gt;Mot en gras&lt;\/b&gt;<\/code> pour indiquer que l\u2019on veut que le mot soit affich\u00e9 en gras. Sur un wiki, on met des apostrophes au nombre de trois de part et d&rsquo;autre du mot. Ainsi si vous \u00e9crivez <code>'''Mot en gras'''<\/code>, cela donnera <strong>Mot en gras<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.ralentirtravaux.com\/github\/mardown-html.png\" alt=\"\u00c0 gauche, iA Writer (Markdown). \u00c0 droite, Textastic (HTML)\" width=\"750\"><\/p>\n<p>Le probl\u00e8me avec certaines balises, c\u2019est que cela rend le texte peu lisible. Or, <a href=\"https:\/\/daringfireball.net\/projects\/markdown\/syntax\">comme le dit John Gruber<\/a> :<\/p>\n<blockquote>\n<p>HTML is a <em>publishing<\/em> format ; Markdown is a <em>writing<\/em> format.<\/p>\n<\/blockquote>\n<p>Il s\u2019agit donc d\u2019\u00e9crire facilement et lisiblement en vue de publier sur le web (de tr\u00e8s nombreuses applications recourent au Markdown\u00a0:\u00a0<a href=\"https:\/\/wordpress.com\/support\/can-i-use-markdown-on-wordpress-com\/\">WordPress<\/a>, <a href=\"https:\/\/help.trello.com\/article\/821-using-markdown-in-trello\">Trello<\/a>, <a href=\"https:\/\/www.reddit.com\/\">Reddit<\/a>, <a href=\"https:\/\/tumblr.zendesk.com\/hc\/en-us\/articles\/231221707-Post-editor\">Tumblr<\/a>, <a href=\"http:\/\/help.dayoneapp.com\/en\/articles\/440596-markdown-guide\">Day One Journal<\/a>, <a href=\"https:\/\/support.discord.com\/hc\/en-us\/articles\/210298617-Markdown-Text-101-Chat-Formatting-Bold-Italic-Underline-\">Discord<\/a>, <a href=\"https:\/\/bear.app\/faq\/Markup%20:%20Markdown\/Markdown%20compatibility%20mode\/\">Bear<\/a>, etc.)<\/p>\n<p>De fait, si, par exemple, j\u2019\u00e9cris en HTML \u00ab\u00a0Le <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Markdown\">Markdown<\/a>, c\u2019est vraiment <em>pratique<\/em> !\u00a0\u00bb, je vais obtenir ceci\u00a0:<\/p>\n<pre><code>&lt;p&gt;Le &lt;a href=&quot;https:\/\/fr.wikipedia.org\/wiki\/Markdown&quot; title=&quot;Markdown&quot;&gt;Markdown&lt;\/a&gt;, c\u2019est vraiment &lt;em&gt;pratique&lt;\/em&gt; !&lt;\/p&gt;\n<\/code><\/pre>\n<p>Mais en Markdown, cela donnerait ceci :<\/p>\n<pre><code>Le [Markdown](https:\/\/fr.wikipedia.org\/wiki\/Markdown), c\u2019est vraiment *pratique* !\n<\/code><\/pre>\n<p>On remarque que c\u2019est plus \u00e9pur\u00e9, c\u2019est plus lisible en somme et que l\u2019on fait tout en une seule \u00e9tape. L\u2019\u00e9criture et la mise en forme. Votre WordPress \u2014 si vous l\u2019utilisez \u2014 saura afficher tout \u00e7a comme si c\u2019\u00e9tait du HTML. Il y a l\u00e0 un gain de temps appr\u00e9ciable.<\/p>\n<p>Si vous souhaitez obtenir davantage d\u2019informations sur l\u2019int\u00e9r\u00eat du Markdown, je vous renvoie \u00e0 l\u2019article <a href=\"https:\/\/github.com\/YannHY\/cours\/blob\/master\/Markdown\/Pourquoi%20%C3%A9crire%20en%20Markdown.md\">Pourquoi \u00e9crire en Markdown<\/a>.<\/p>\n<p>Si vous voulez directement acc\u00e9der au document pr\u00e9sentant la syntaxe du Markdown sans autres explications, je vous renvoie \u00e0 l\u2019article <a href=\"https:\/\/github.com\/YannHY\/cours\/blob\/master\/Markdown\/Le%20guide%20du%20Markdown.md\">Le guide du Markdown<\/a>.<\/p>\n<h2>Connaissances de bases \u00e0 acqu\u00e9rir<\/h2>\n<h3>Faire un paragraphe<\/h3>\n<p>Pour aller \u00e0 la ligne, appuyez simplement sur la touche <code>\u21b5<\/code>. Si vous souhaitez forcer le retour \u00e0 la ligne, ins\u00e9rez la balise <code>&lt;br\u00a0\/&gt;<\/code>.<\/p>\n<h3>Les titres<\/h3>\n<p>Comme en HTML, il y a des titres de plusieurs niveaux (1 \u00e0 6). On utilise le signe <code>#<\/code> pour ce faire.<\/p>\n<pre><code># Titre de niveau 1\n## Titre de niveau 2\n### Titre de niveau 3\n#### Titre de niveau 4\n##### Titre de niveau 5\n###### Titre de niveau 6\n<\/code><\/pre>\n<p>Rappelons que mettre des titres de cette fa\u00e7on permet de construire dans certains documents la table des mati\u00e8res.<\/p>\n<h3>Mettre en gras, en italique, surligner ou rayer un mot<\/h3>\n<ul>\n<li>Pour mettre un mot en italique, placez ce mot entre deux ast\u00e9risques <code>*<\/code>\u00a0:\u00a0<code>Ce mot est en *italique*<\/code>.<\/li>\n<li>Pour mettre un mot en gras, places-le entre deux ast\u00e9risques <code>**<\/code> :\u00a0<code>Ce mot est en **gras**<\/code>.<\/li>\n<li>Pour surligner un mot, placez deux signes \u00e9gal de part et d\u2019autre : <code>Ce mot est ==surlign\u00e9==.<\/code><\/li>\n<li>Pour barrer un mot, encadrez-le d\u2019un double tilde\u00a0<code>~~<\/code>\u00a0:\u00a0<code>Ce mot est ~~barr\u00e9~~<\/code>.<\/li>\n<\/ul>\n<h3>Ins\u00e9rer une note de bas de page<\/h3>\n<p>Placez <code>[^1]<\/code> juste apr\u00e8s le mot \u00e0 la suite duquel vous souhaitez ins\u00e9rez une note de bas de page.<\/p>\n<p>Tout en bas de votre document, ins\u00e9rer alors ceci :<\/p>\n<pre><code>[^1]: Ma note de bas de page.\n<\/code><\/pre>\n<h3>Faire une liste<\/h3>\n<h4>Liste ordonn\u00e9e<\/h4>\n<p>Pour faire une liste ordonn\u00e9e, simplement num\u00e9roter les lignes suivies \u00e0 chaque fois d\u2019un point :<\/p>\n<pre><code>1. \u00c9l\u00e9ment 1\n2. \u00c9l\u00e9ment 2\n3. \u00c9l\u00e9ment 3\n<\/code><\/pre>\n<h4>Liste non-ordonn\u00e9e<\/h4>\n<p>Pour faire une liste non-ordonn\u00e9e (c\u2019est-\u00e0-dire une liste \u00e0 puces), vous pouvez utiliser au choix le tiret (<code>-<\/code>), l\u2019ast\u00e9risque (<code>*<\/code>) ou le signe <code>+<\/code>.<\/p>\n<pre><code>- \u00c9l\u00e9ment 1\n- \u00c9l\u00e9ment 2\n- \u00c9l\u00e9ment 3\n<\/code><\/pre>\n<h3>Mettre un lien<\/h3>\n<p>Si vous voulez faire un lien vers un site externe, simplement mettre le ou les mots entre crochets (j\u2019utilise sur mon iPad le raccourci <code>\u2318 + parenth\u00e8se<\/code>) suivis du lien mis entre parenth\u00e8ses, ce qui donne ceci\u00a0:<\/p>\n<pre><code>[Ralentir travaux](https:\/\/www.ralentirtravaux.com)\n<\/code><\/pre>\n<p>C\u2019est facultatif, mais vous pouvez inclure une description du lien dans les parenth\u00e8ses.<\/p>\n<pre><code>[Ralentir travaux](https:\/\/www.ralentirtravaux.com &quot;Ralentir travaux, le site du fran\u00e7ais&quot;)\n<\/code><\/pre>\n<p>Si vous voulez ins\u00e9rer une adresse email, \u00e9crivez votre adresse entour\u00e9e des chevrons <code>&lt;&gt;<\/code>: <code>&lt;monadresse@truc.com&gt;<\/code> .<\/p>\n<h3>Ins\u00e9rer une image<\/h3>\n<p>Proc\u00e9dez de la m\u00eame fa\u00e7on que pour ins\u00e9rer un lien, mais en ajoutant un point d\u2019exclamation avant les crochets. L\u2019URL que vous placerez entre parenth\u00e8ses sera celle de votre image.<\/p>\n<pre><code>![Trois manuels](https:\/\/www.ralentirtravaux.com\/images\/site\/trois-manuels.png &quot;Trois manuels&quot;)\n<\/code><\/pre>\n<h3>Ins\u00e9rer un saut de page<\/h3>\n<p>Placez trois signes <code>+++<\/code>.<\/p>\n<h3>Ins\u00e9rer une ligne horizontale<\/h3>\n<p>Pour cr\u00e9er une ligne horizontale, ins\u00e9rez trois ast\u00e9risques (<code>***<\/code>), tiret (<code>---<\/code>) ou \u00ab\u00a0underscores\u00a0\u00bb (<code>___<\/code>) \u00e0 la suite.<\/p>\n<h3>Citer du texte<\/h3>\n<p>Faite pr\u00e9c\u00e9der le texte d\u2019un simple chevron <code>&gt;<\/code> pour faire une citation<\/p>\n<pre><code>&gt; Sois sage, \u00f4 ma Douleur, et tiens-toi plus tranquille.\n&gt; Tu r\u00e9clamais le Soir; il descend; le voici\n<\/code><\/pre>\n<h3>Faire un tableau<\/h3>\n<p>Chaque colonne est s\u00e9par\u00e9e d\u2019un pipe (<code>|<\/code> que l\u2019on obtient \u00e0 l\u2019aide du raccourci <code>\u2318 + \u2325 + L<\/code>). Pour faire un rang suppl\u00e9mentaire, allez \u00e0 la ligne et recommencez.<\/p>\n<p>Voici un exemple :<\/p>\n<pre><code>|1re colonne|2e colonne|3e colonne|\n|:\u2014|:\u2014:|-:|\n|Alignement \u00e0 gauche|Alignement centr\u00e9|Alignement \u00e0 droite|\n<\/code><\/pre>\n<p>Ce qui donne\u00a0:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">1re colonne<\/th>\n<th style=\"text-align:center\">2e colonne<\/th>\n<th style=\"text-align:right\">3e colonne<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Alignement \u00e0 gauche<\/td>\n<td style=\"text-align:center\">Alignement centr\u00e9<\/td>\n<td style=\"text-align:right\">Alignement \u00e0 droite<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Vous aurez remarqu\u00e9 que pour aligner le texte \u00e0 gauche, on ins\u00e8re <code>:--<\/code> dans le deuxi\u00e8me rang. Tandis que pour aligner le texte \u00e0 droite, on ins\u00e8re <code>--:<\/code>.<\/p>\n<h4>Exemple<\/h4>\n<p>Voici un exemple de tableau pr\u00e9sentant la conjugaison des temps de l\u2019indicatif.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Temps simples<\/th>\n<th style=\"text-align:left\">Temps compos\u00e9s<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Pr\u00e9sent : <em>je suis<\/em><\/td>\n<td style=\"text-align:left\">Pass\u00e9 compos\u00e9 : <em>j\u2019ai \u00e9t\u00e9<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align:left\">Imparfait : <em>j\u2019\u00e9tais<\/em><\/td>\n<td style=\"text-align:left\">Plus-que-parfait : <em>j\u2019avais \u00e9t\u00e9<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align:left\">Pass\u00e9 simple : <em>je fus<\/em><\/td>\n<td style=\"text-align:left\">Pass\u00e9 ant\u00e9rieur : <em>j\u2019eus \u00e9t\u00e9<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align:left\">Futur simple : <em>je serai<\/em><\/td>\n<td style=\"text-align:left\">Futur ant\u00e9rieur : <em>j\u2019aurai \u00e9t\u00e9<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align:left\">Conditionnel pr\u00e9sent : <em>je serais<\/em><\/td>\n<td style=\"text-align:left\">Conditionnel pass\u00e9 : <em>j\u2019aurais \u00e9t\u00e9<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Le markdown s\u2019apprend en cinq minutes. C\u2019est vraiment tr\u00e8s simple. Son int\u00e9r\u00eat est triple : Vous \u00e9crivez sur un traitement de texte dont le format est txt ou md. Autant dire que ce type de fichier sera encore lisible dans 50 ans, quelle que soit l\u2019\u00e9volution de l\u2019application que vous utilisez. Vous formatez votre texte [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[55,44],"tags":[52,54],"class_list":["post-4058","post","type-post","status-publish","format-standard","hentry","category-markdown","category-technologie","tag-documentation","tag-markdown"],"_links":{"self":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/4058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/comments?post=4058"}],"version-history":[{"count":4,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/4058\/revisions"}],"predecessor-version":[{"id":4062,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/4058\/revisions\/4062"}],"wp:attachment":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/media?parent=4058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/categories?post=4058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/tags?post=4058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}