L’éditeur de texte de WordPress ne reçoit que des caractères. Cette page montre comment appliquer des mises en forme à vos contenus en utilisant la syntaxe Markdown, reconnue pour sa simplicité.
Les développements qui suivent s’inspirent des sources suivantes :
- Syntaxe Markdown originale (en français)
- Markdown simple (en anglais)
- Markdown Extra (en français)
Nous utilisons le Markdown Extra, auquel nous avons fait des ajouts que nous allons marquer d’une obèle (†).
Lorsque plusieurs manières de faire sont possibles, nous allons systématiquement présenter celle qui est recommandée par le Guide des bonnes pratiques Markdown de WordPress (en anglais).
Avis aux utilisateurs de synthèse vocale. Les textes qui suivent sont plus faciles à lire depuis une plage braille. Pour les parcourir en mode sonore, réglez le niveau des ponctuations à toutes, et portez une attention particulière aux espaces.
Mises en forme fréquentes
Nous allons commencer par les mises en forme que vous allez utiliser le plus souvent et finir par celles que vous n’utiliserez que rarement, voire jamais.
Paragraphe
Laissez une ligne vide après chaque paragraphe, comme ceci :
...fin d'un paragraphe.
Début d'un autre paragraphe...
Pour obtenir des lignes collées, ne laissez pas de lignes vides entre elles. Exemple :
AQJÉHV
206-2385, rue Henriette-Céré
St-Hubert (Québec) J3Y 9C6
Markdown tient compte des espacements. Ne mettez pas de lignes vides inutiles ; à l’inverse, mettez-en une après un paragraphe, un groupe de lignes collées, et en général tout ce qui ressemble à un bloc de texte.
Titre
Mettez un ou plusieurs dièses en début de ligne, suivi d’une espace, suivi du texte. Le nombre de dièses indique le niveau de titre voulu. Exemple :
## Je suis un titre de niveau 2
Gras et italique
Entourez le texte de deux astérisques pour le mettre en gras, et d’un seul caractère de soulignement pour le mettre en italique. Exemple :
Phrase avec **du gras** et _de l'italique_.
Pour combiner les deux styles, disposez les astérisques et les caractères de soulignement en couches successives autour du texte, comme ceci :
_**Bout de texte gras et italique**_.
Exposant (†)
Mettez un accent circonflexe avant le texte à mettre en exposant, et une espace après, comme ceci :
Le 1^er janvier
Lien externe
Mettez le texte entre crochets, immédiatement suivi de l’adresse entre parenthèses :
[RAAMM](https://raamm.org/)
Puisque ce lien pointe vers un contenu situé en dehors de votre site, une icône s’ajoutera à la fin pour en avertir l’utilisateur (†). De même, lorsqu’un lien pointe vers un fichier Word, Excel ou PDF, une icône s’ajoute à la fin pour en avertir l’utilisateur (†).
Pour faire surgir une info-bulle au survol du pointeur sur le lien, faites suivre l’adresse d’une espace, suivi du texte voulu entre guillemets. Exemple :
[RAAMM](https://raamm.org/ "Regroupement des
aveugles et amblyopes du Montréal métropolitain").
Lorsque le texte et l’adresse sont identiques, il suffit de mettre le texte entre les signes inférieur et supérieur, comme ceci :
<https://raamm.org/>
Lorsque vous avez plusieurs liens dans un texte, vous pouvez utiliser un système de référence qui renvoie plus loin ce que vous auriez mis entre parenthèses. Exemple :
Je reçois 10 fois plus de trafic de [Google][1] que de
[Yahoo][2] ou [MSN][3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
Ce qui rend le texte beaucoup plus facile à lire.
Lien interne
Le préfixe https://aqjehv.org peut être omis lorsqu’il s’agit d’un lien qui pointe vers une page ou un article de votre site. Il sera donc plus simple d’écrire ceci :
[AQJÉHV](/activites)
plutôt que d’écrire cela :
[AQJÉHV](https://aqjehv.org/activites)
Lorsque le lien pointe vers une page réservée aux membres connectés, ajoutez [cadenas] à la fin du texte pour en avertir l’utilisateur (†). Exemple :
[Liste et nom des joueurs [cadenas]](/liste-et-nom-des-joueurs)
Pour soustraire une adresse courriel aux robots malveillants, ne faites pas de lien et tapez [a commercial] à l’endroit où vous auriez mis l’arobase (†). Exemple :
Écrivez-nous à : info[a commercial]aqjehv.org
Liste
Nous montrerons comment créer des listes à puces et des listes numérotées. Chemin faisant, nous montrerons comment imbriquer une sous-liste à une liste.
Liste à puces
Tapez un trait d’union en début de ligne suivi d’une espace pour chaque item, comme ceci :
- fraises
- pommes
- bananes
Pour imbriquer une sous-liste, indentez les éléments concernés avec trois espaces, comme ceci :
- fraises
- pommes
- vertes
- rouges
- bananes
Liste numérotée
Tapez un chiffre en début de ligne suivi d’un point suivi d’une espace devant chaque item, comme ceci :
1. Chapitre premier
2. Chapitre deuxième
3. Chapitre troisième
Pour imbriquer une sous-liste, indentez les éléments voulus avec trois espaces, comme ceci :
1. Introduction
2. Développement
1. Section A
2. Section B
1. Sous-section 1
2. Sous-section 2
3. Conclusion
Les chiffres utilisés n’ont aucune importance. Vous mettriez des zéros partout et le résultat serait le même.
Tableau de données
Entourez le contenu de chaque cellule avec une barre verticale en la séparant du texte avec au moins une espace, puis séparez la ligne d’en-tête des autres lignes avec des traits-d’union. Exemple :
| Nom | Prénom | Cote |
| ---------- | ------ | ---- |
| Latour | Lucie | 1500 |
| Lecavalier | David | 1300 |
Vous pouvez ajouter des espaces pour aligner les barres verticales si désiré. Mettez un deux-points au bout des traits-d’union pour indiquer l’alignement voulu. Voici un tableau avec les trois types d’alignements :
| Article | Prix | Quantité |
| :-------- | -------: | :------: |
| Casquette | 7,99 $ | 1 |
| Foulard | 12,98 $ | 3 |
L’alignement à gauche est facultatif, puisqu’il s’agit de l’alignement par défaut. De plus, les barres verticales de début et de fin de ligne peuvent être omises. Exemple :
Article | Prix | Quantité
:-------- | -------: | :------:
Casquette | 7,99 $ | 1
Foulard | 12,98 $ | 3
Nous avons aligné le texte des cellules de données avec des espaces pour faciliter la lecture. Le résultat final dépendra uniquement des deux-points.
Mises en forme plus rares
Bien que rares, les mises en forme dont nous allons maintenant parler pourraient vous être utiles dans certaines circonstances.
Ligne séparatrice
Pour obtenir une ligne horizontale pleine largeur, tapez trois traits d’union consécutifs au début d’une ligne précédée d’une ligne vide, comme ceci :
---
Bloc de citation
Tapez le signe supérieur suivi d’une espace au début de chaque ligne de texte, incluant les lignes vides, comme ceci :
> Ah! comme la neige a neigé !
> Ma vitre est un jardin de givre.
>
> – Émile Nelligan
Pour inclure un bloc de citation dans un autre, utilisez deux signes supérieurs consécutifs. Exemple :
La voici.
> Vous avez oublié la pièce jointe.
>> Vous trouverez le document en pièce jointe.
Notez qu’un bloc de citation peut contenir d’autres types de mises en forme Markdown telles que des titres, des listes, des liens, du gras, etc.
Note de fin
Reproduisez le modèle suivant pour créer des notes et des appels de note au sein de votre document :
Paragraphe avec un appel de note[^1], puis un autre appel de note[^2].
[^1]: Texte de la première note.
[^2]: Texte de la deuxième note.
Les notes vont se retrouver sous forme de liste à la fin du document, et le balisage utilisé a spécifiquement été pensé pour être lisible et accessible aux outils d’adaptation en sonore.
Les chiffres utilisés pour numéroter les notes et les appels de note seront mis en exposant. L’appel de note deviendra un lien pointant vers la note qui lui correspond, et un lien de retour vers l’appel de note sera incorporé à la fin du texte de la note.
Veuillez à ce que le numéro d’une note ou d’un appel de note n’apparaisse pas deux fois dans le même document.
Abréviation
Lors de la première occurrence d’une abréviation dans une page, la meilleure pratique consiste à écrire l’expression au long suivi de son abréviation entre parenthèses, puis à utiliser l’abréviation uniquement, si on veut, les fois suivantes. Sinon, on peut aussi définir une abréviation accessible en la codifiant selon le modèle qui suit :
*[AQJÉHV]: Association québécoise de joueurs d'échecs handicapés visuels
Une fois ce code inscrit au début d’une ligne quelque part dans votre texte, toutes les occurrences de l’abréviation AQJÉHV qui se trouvent avant ou après seront correctement codées en HTML. Ce qui vous permet de faciliter la maintenance en groupant vos abréviations où bon vous semble.
Liste de définitions
Tapez le mot à définir sur une ligne, suivi d’un deux-points au début de la ligne suivante, suivi d’au moins une espace, suivi de sa définition, puis laissez une ligne vide entre chaque paire, comme dans l’exemple suivant :
WordPress
: Plateforme de publication en ligne
Markdown
: Syntaxe de conversion du texte en HTML
Texte préformaté
Faites précéder chaque ligne d’une seule espace, comme ceci :
U n T e x t e préformaté
e s t reproduit tel q u e l.
Code en ligne
Entourez chaque bout de code en ligne avec un seul accent grave, comme suit :
La balise `<img>` doit avoir un attribut `alt`.
Bloc de code
Lorsque le code à présenter comporte plusieurs lignes, tapez trois accents graves consécutifs au début d’une ligne avant et après votre bloc de code, comme ceci :
```
body {
background: #ffffff;
color: #212121;
}
```
Caractère d’échappement
Pour empêcher qu’un signe de ponctuation soit interprété comme élément de syntaxe Markdown, il suffit de le faire précéder d’une barre oblique inverse. Cette barre n’apparaîtra pas dans le résultat final.
Par exemple, pour avoir exactement - 30 - à la dernière ligne d’un communiqué, on doit écrire \- 30 \- pour éviter que le premier trait d’union provoque l’apparition d’une liste à puces, et pour éviter que le deuxième soit remplacé par un tiret.
En Markdown, la barre oblique inverse sert donc de caractère d’échappement. Pour générer une barre oblique inverse depuis un clavier QWERTY configuré à Français(Canada), il faut faire ALT-DROIT + DIÈSE.
Voici la liste des caractères que vous pourriez avoir besoin de faire précéder d’une barre oblique inverse dans certaines circonstances : ^ : ! # * + - _ () [] {} | \.
Normand Lamoureux, M.A., SRDV
Expert en accessibilité du web