Comment rédiger un texte en Markdown?

Merci Ulysses, ByWord et bien d'autres !
Header de l'article Comment rédiger un texte en Markdown?

Vous souhaitez mettre en forme facilement vos écrits sans vous encombrer d'un éditeur de texte avancé, qui plus est, souvent "usine à gaz" regorgeant d'une foultitude d'options & de boutons. Bref, écrire et se concentrer uniquement sur l'écrit. Dans le cadre de la rédaction d’articles sur le web, de billets de blog, etc., le format Markdown s'avère redoutablement efficace. Ce tutoriel vous initiera à la prise en main de ce format.

Qu'est-ce que le langage Markdown ?

Markdown est un langage de mise en forme de texte ou balisage simple d'utilisation. Outre sa simplicité, il a l'avantage de faciliter le formatage, la lecture et la rédaction du texte. En effet, un texte en Markdown est clair à lire et à comprendre, contrairement à un texte en langage HTML (langage de mise en forme d'une page Web). Ce langage a été créé par John Gruber.

Comment formater mon texte en Markdown ?

Vous trouverez dans ce tutoriel différents exemples de mise en forme de texte en Markdown. Il s'agit à chaque fois de baliser votre texte avec certains caractères (des « __, **, #, etc..). Le texte ainsi présenté sera par la suite converti par un logiciel ou une application web en HTML. Vous ne vous encombrerez donc aucunement de balises HTML, ni de CSS, etc. Un bloc note, notepad suffit à présenter un texte en Markdown!

Vous pourrez ainsi facilement depuis votre iPad ou iPhone ou tout autre Smartphone rédiger des document depuis la plus simple application qu'est le bloc note. Certains logiciels ont cependant l'avantage de reconnaître cette syntaxe. Certains de ces logiciels sont proposer plus bas.

La liste des Markdown présentée ici n'est peut être pas complète, mais elle viendra à s'étoffer. Elle présente les markdown utilisés actuellement sur Zatras. En effet, vous pourrez vous familiariser avec les Markdown directement depuis les commentaires des article, dont celui-ci bien évidemment. Certains Markdowns ne sont cependant pas activés pour les commentaires: les titres notamment.

Liste des Markdown détaillés

Créer un paragraphe
Passer à la ligne
Mettre du texte en gras
Mettre du texte en italique
Créer une liste à puces
Créer une liste à puces numérotées
Créer un lien
Créer des liens par références
Créer une ancre HTML
Insérer une image
Insérer une image par références
Créer une citation
Créer un titre
Insérer du code

Créer un paragraphe

Pour créer un paragraphe, il vous suffit d’appuyer 2 fois sur la touche "retour chariot" ou "Entrée », afin de laisser un espace vide entre l'ancien bloc de texte et le nouveau.

Note : En HTML le paragraphe se traduira par la balise <p></p>

retour au menu

Passer à la ligne

Pour passer à la ligne, sans créer de nouveau paragraphe, il vous suffit de laisser 2 espaces après le dernier mot de votre phrase.

Note : En HTML le retour à la ligne se traduira par la balise <br />

retour au menu

Mettre du texte en gras

Mettre du texte en gras revient à placer, suivant votre préférence, 2 underscores « _ » ou 2 astérisques « * » de part et d'autre du mot ou portion de phrase choisie :

__Ceci est un texte en gras__ => Ceci est un texte en gras

**Ceci est un texte en gras** => Ceci est un texte en gras

Note : En HTML le gras se traduira par la balise d'emphase <strong></strong>

retour au menu

Mettre du texte en italique

Mettre du texte en italique revient à placer, suivant votre préférence, 1 underscore « _ » ou 1 astérisque « * » de part et d'autre du mot ou portion de phrase choisie :

_Ceci est un texte en italique_ => Ceci est un texte en italique

*Ceci est un texte en italique* => Ceci est un texte en italique

Note : En HTML l'italique se traduira par la balise <i></i>

retour au menu

Créer une liste à puces

Une liste est créée en plaçant un astérisque « * », un plus « +" ou un tiret « - » suivi d'un espace puis de l'élément de votre liste.

A noter: Afin que la liste soit bien prise en compte, il vous faut laisser 1 retour chariot de part et d'autre du bloc formé par votre liste.

Il est nécessaire d’avoir un paragraphe précédent la liste, et un autre qui suit la liste.

- Ceci est le premier élément de ma liste.
- On peut __également utiliser un « * » ou « +"__.
- Ceci est le troisième

Donnera :

  • Ceci est le premier élément de ma liste.
  • On peut également utiliser un « * » ou « + ».
  • Ceci est le troisième.

Note : En HTML la liste se traduira par les balises <ul><li>Ligne 1</li><li>Ligne 2</li></ul>

Note : Pour créer une sous liste à puces d'un élément d'une liste existante, il suffit d'ajouter une tabulation ou 4 espaces avant le tiret (ou *, +, etc.)

retour au menu

Créer une liste à puces numérotées

Le principe est identique que la création d'une liste simple.

1. Un élément.
2. Un deuxième élément.
3. Un troisième élément.

Note : En HTML la liste numérotée se traduira par les balises <ol><li>Ligne 1</li><li>Ligne 2</li></ol>

retour au menu

Créer un lien

[Voici le site Zatras.com](http://zatras.com)

Avec un titre (la balise title sera générée) :

[Voici le site Zatras.com](http://zatras.com "Eventuellement entre guillemets le titre du lien")

Note : En HTML un lien se traduira par la balise <a href="monlien.php" title="Mon titre">Un lien cliquable</a>

retour au menu

Créer des liens par références

Un texte comportant plusieurs liens, chacun plus ou moins long, peut être être difficile à relire lors de la rédaction et de la relecture d'un document en Markdown.

Il existe une solution simple et efficace: les liens par références, qui s'apparentent à des notes de bas de page :

Pour le site [Zatras][accueil] et son [Share Blog][share], vous pouvez me contacter via la [page contact][contact].

Et je place le texte suivant n'importe où dans ma page:

[accueil]: http://zatras.com/ "Page d'accueil de Zatras.com"
[share]: http://zatras.com/share "Accueil du Zatras Share Blog"
[contact]: http://zatras.com/share/info/contact "Page de contact"

On obtient :

Pour le site Zatras et son Share Blog, vous pouvez me contacter via la page contact.

retour au menu

Créer une ancre HTML

Une ancre HTML est un lien invisible qui pointe dans la page courante.

Cela ne semble à priori pas possible en Markdown, mais il existe une astuce pour les utiliser : combiner le Markdown avec un tout petit peu de code HTML.

Création du lien vers l’ancre en Markdown :

Voici un lien vers [mon titre](#mon_titre)

Création de l’ancre en HTML, à placer dans la page :

<a name="mon_titre"></a>

Par exemple, voici un lien-ancre qui pointe directement sur un titre H3 :

### <a name="mon_titre"></a>Ceci est mon titre en H3

A noter : Le code HTML peut être inclu dans du code Markdown, il sera bien interprété / transformé en ce que vous souhaitez.

retour au menu

Insérer une image

![Texte alternatif si l'image ne s'affiche pas](/chemin/image.jpg "Titre optionnel")

Note : En HTML une image se traduira par la balise <img src="mon-image.jpg" alt="belle image" title="Mon titre" />

retour au menu

Insérer une image par références

A l'instar de la création de liens, on peut également, insérer des images dans notre document Markdown sans pour autant encombrer sa lisibilité.

![Texte alternatif][identifiant]
[identifiant]: /chemin/image.jpg "Titre optionnel"

retour au menu

Créer une citation

Vous souhaitez citer quelqu'un?

Il vous suffit d’ajouter le caractère « > » croissant devant chaque ligne. (Comme lors d'une réponse de mail où cela se fait automatiquement en cliquant sur le bouton "Répondre »).

> Voici une citation.
> Ce texte est déjà un bloc citation!

Le rendu final sera donc sans les ">" :

Note : En HTML une citation se traduira par la balise <blockquote></blockquote>

retour au menu

Créer un titre

Si l'on considère qu'il existe plusieurs niveaux de hauteurs de titre, en markdown, vous pourrez également "voir" ces niveaux.

Pour les titres de hauteurs 1 et 2 (H1 et H2 en HTML), on pourra utiliser la syntaxe suivante :

Voici un titre H1 avec au moins 6 "=" au dessous
===============
Voici un titre H2 avec au moins 6"-" au dessous
---------------
### Voici un titre h3

Enfin, une autre méthode de présenter les titres en Markdown :

# Voici un autre titre de hauteur H1
## Voici un titre de hauteur H2
### Voici un titre de hauteur h3

Note : En HTML un titre se traduira par la balise <h1>Titre 1</h1><h2>Titre 2</h2>

retour au menu

Insérer du code

Pour insérer du code HTML, sans que celui-ci ne soit interprété par le navigateur, on utilise le markdown « ` » de part et d'autre du code.

Cela a pour effet de remplacer les "&lt; et &gt;, idem pour le caractère "et commercial": « & ».

Texte en `<strong>` gras `</strong>` => Texte en <strong>gras</strong>

Note : En HTML une portion de code se traduira par la balise <code></code>

Si votre code comporte plusieurs lignes, il vous suffit de commencer chaque ligne de votre code par au moins 4 espaces ou bien au moins une tabulation. (ne pas oublier d’avoir un retour chariot de part et d’autre de ce code)

<blockquote>
<p>Voici mon code HTML.</p>
<p>Chaque ligne comporte au moins 4 espaces ou une tabulation.</p>
</blockquote>

Et voici le code HTML généré :

<pre><code>
&lt;blockquote&gt;
&lt;p&gt;Voici mon code HTML.&lt;/p&gt;
&lt;p&gt;Chaque ligne comporte au moins 4 espaces ou une tabulation.&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>

Note : En HTML, toute une portion de code correctement indenté se traduira par les balises <pre><code></code></pre>

retour au menu

Des logiciels qui supportent les Markdown ?

Si vous êtes sur Mac ou possédez un iPhone ou iPad, vous pourrez retrouver l'excellent Byword de Metaclassy qui prend en charge le format Markdown. Un des avantages est qu'il bénéficie d'une grande pureté au niveau de sib interface graphique. De plus, il supporte l'iCloud d'Apple. Vous pourrez ainsi initier un document sur votre Mac, et le poursuivre, ou le retoucher sur votre iPad ou iPhone. D'autres part, il met en forme automatiquement le texte lors de sa composition. Les balises « __ » gras, mettent automatiquement en gras de le texte durant l'écriture.

La version iOS iPhone/iPad possède un clavier avec des raccourcis de mise en forme pour les Markdown. Enfin, cerise sur le gâteau, outre l'interface épurée au maximum, l'écriture peut se faire en plein écran (sur Mac) sur fond noir; ce qui est reposant à mon goût. Bien entendu, un export en HTML est possible à tout moment, avec prévisualisation du Markdown vers HTML.

Sans tous les nommer, car je ne le les connais pas tous, vous pourrez retrouver :

  • Byword de Metaclassy(Mac & iPhone & iPad)
  • iA Writer (iPhone/iPad/MacOS), style très épuré avec support iCloud et iOS iPhone/iPad, dans la lignée de Byword
  • MultiMarkdown Composer (MacOS) Il prend en charge le MultiMarkdown
  • Ulysses (MacOS & iPad), un éditeur très avancé et puissant (pour écrivain, rédaction de livres, etc.)
  • Scrivener (MacOS & Windows), un éditeur très avancé et puissant (pour écrivain, rédaction de livres, etc.)
  • Marked (MacOS) un outil de prévisualisation à la volée de document Markdown qui s'incorpore à n'importe quel document texte en cours d'édition.

retour au menu

Pour aller plus loin…

Vous pourrez retrouver la documentation originale Markdown (en anglais) de John Gruber sur son site.

Il existe d'autres balises de mises en forme, notamment dans une extension au Markdown nommé Multi Markdown (MMD).

Le format MultiMarkdown (MMD), créé par Fletcher Penney accroit encore plus l'intérêt du Markdown en y ajoutant entre autres :

  • Création de tableau
  • Création de notes de bas de pages
  • Et bien d'autres choses... !

Voici la documentation du MultiMarkdown (en anglais).

Je ne manquerai pas d'améliorer et étoffer ce tutoriel au fil du temps, en fonction de vos remarques et suggestions.

retour au menu

Zatras
Concepteur de Zatras - Développeur - Designer - Intégrateur - Administrateur - Rédacteur

Cet article m'a apporté quelque chose :

 
Une question, une remarque ?

Connectez-vous ou inscrivez-vous pour participer, c'est gratuit !

Inscription Zatras

  • profile
    Zatras le 12 avril 2015

    Heureux de voir que ce tutoriel Markdown serve à ce point! :-)

    Répondre 0 0
  • profile
    ZenPower le 12 avril 2015

    Merci pour ce tuto qui se bonifie avec le temps à ce que je vois!

    C'est un point de référence pour moi: j'y reviens assez souvent.

    Les récentes mises à jour le rendent encore plus clair.

    Répondre 2 0
  • profile
    Zatras le 9 avril 2015

    Je viens de mettre à jour cet article, avec notamment, l'astuce pour utiliser les ancres HTML en lien, qui à priori, n'est pas possible en MD.

    Répondre 0 0
  • profile
    Mememe le 7 oct. 2013

    Je trouve cela vraiment pratique et rapide ! Le tuto est bien fait en plus

    Répondre 0 0
  • profile
    tonydu52 le 31 oct. 2012

    voila qui m'a été bien utile pour rédiger et mettre en forme des articles sur mon blog! je garde cette page sous le coude depuis que je l'ai découverte!! ;)

    Répondre 0 0
  • profile
    Cindy le 21 oct. 2012

    Personnellement, je me débrouillais également, tant bien que mal, avec la syntaxe du BBCode propre à de nombreux forums (Bulletin Board Code il me semble), un peu galère pour ma part...

    Mais là, j'avoue que que pour moi le MarkDown est bien plus sympa et pratique!!
    En plus, ça me parait être un bon choix comme langage pour écrire des texte conséquents tout en se passant d'un traitement de texte, souvent bien plus lourd autant techniquement que visuellement...

    Merci pour cette découverte et ces éclaircissements qui me serviront de mémo afin de me mettre aux MarkDown !!!

    Répondre 0 0
  • profile
    Sev le 17 juin 2012

    Super merci. Voilà de quoi s'y mettre rapidement !

    Répondre 0 0
  • profile
    LeDuc le 18 mai 2012

    Merci pour ces explications. Je connaissais un peu de HTML et le BBCode des forums, c'est vrai que le markdown semble vraiment être une syntaxe plus simple et claire.
    Hop retour à la ligne! ;-)

    Hop nouveau paragraphe!
    J'en profite pour apprendre en testant, par l' exemple.

    Répondre 0 0