Syntaxe étendue

introduction

La syntaxe originale de Markdown, publiée par John Gruber, a ajouté plusieurs éléments essentiels pour l'édition de documents, mais certains utilisateurs n'étaient pas satisfaits.

La syntaxe étendue tente de résoudre ce mécontentement en ajoutant de nouveaux éléments grâce à de nouveaux marquages.

Les tableaux, les blocs de code, la génération automatique d'links et même les notes de bas de page sont des exemples d'extension de la syntaxe de base de Markdown.

Ces éléments peuvent être activés en installant un plugin pour votre processeur Markdown ou même en utilisant une petite variation de la syntaxe du langage.

NOTE: il est fort possible que votre application Markdown prenne déjà en charge les éléments présentés dans cet article, il vaut donc la peine de tester chacun d'entre eux en suivant le tutoriel.

Saveurs de Markdown

Markdown a quelques saveurs différentes, c'est-à-dire des variations de la syntaxe de base du langage.

Ces variations, en plus de prendre en charge la syntaxe de base, ajoutent des éléments qui enrichissent l'édition de documents.

Les applications compatibles avec Markdown utilisent souvent l'un des langages ci-dessous:

CommonMark

GitHub-flavored Markdown (GFM)

Markdown Extra

R Markdown

MultiMarkdown

Création de tables dans Markdown

Un tableau dans Markdown peut être utilisé pour présenter des comparaisons de données par l'utilisateur.

Pour créer une table dans Markdown, nous utilisons des tirets - et des barres verticales | pour séparer les lignes et les colonnes.

La première ligne du tableau est l'endroit où nous construisons l'en-tête, en séparant cette ligne par trois tirets ou plus --- afin que le processeur Markdown comprenne le formatage.

La séparation des colonnes se fait à l'aide de la barre verticale |, également appelée pipe par les programmeurs.

Voici un exemple de tableau:

| Titre  | Titre   |
| ------- | -------- |
| Texte   | Texte    |
| Texte   | Texte    |

Les barres verticales | utilisés aux extrémités de la table sont à des fins purement cosmétiques, c'est-à-dire que vous pouvez créer une table sans les barres latérales.

Exemple:

Titre  | Titre
------- | --------
Texte   | Texte
Texte   | Texte

La sortie rendue dans HTML:

La largeur des cellules, dans un tableau Markdown, peut varier.

Exemple:

| Titre | Titre |
| --- | ----------- |
| Texte | Texte |
| Texte     | Texte |

Générer automatiquement des tables dans Markdown

Markdown est venu pour faciliter l'édition de documents, et la création de tableaux peut devenir un peu plus fastidieuse.

L'utilisation de barres verticales et de tirets peut déplaire à certains utilisateurs, il est donc intéressant de pouvoir automatiser le processus de formatage des tableaux dans Markdown.

Étape 1 - Ouvrez notre éditeur Markdown en cliquant ici.

Étape 2 - Cliquez sur l'icône de génération automatique de table pour ouvrir le panneau d'options.

Étape 3 - Dans le panneau des options:

1. Entrez le nombre de lignes dans le tableau.
2. Définissez le nombre de colonnes dans le tableau.
3. Choisissez la position d'alignement du texte dans les colonnes.
4. Cliquez pour confirmer et générer la structure du tableau.

Étape 4 - Remplissez les valeurs pour chaque cellule.

Alignement

Markdown vous permet d'aligner le contenu d'une colonne de tableau à gauche, à droite ou au centre.

Pour aligner le contenu à gauche dans une table Markdown, placez un deux-points : avant les tirets --- qui séparent la ligne d'en-tête.

Exemple:

| Fruit  | Des légumes | Des légumes |
| :---    | :----    | :---    |
| anacardier    | Cresson   | Carotte |
| Pomme    | Brocoli | Pois |

Résultat dans HTML:

REMARQUE: l'utilisation des deux points pour aligner le texte vers la gauche est facultative, car le contenu de la table est déjà aligné dans cette position par défaut.

Pour aligner le texte à droite dans le tableau Markdown, insérez les deux points : après les tirets --- qui séparent la ligne d'en-tête.

Exemple:

| Fruit  | Des légumes | Des légumes |
|    ---: |    ----: |    ---: |
| anacardier    | Cresson   | Carotte |
| Pomme    | Brocoli | Pois |

Résultat dans HTML:

Pour aligner le contenu de la colonne au centre d'une table Markdown, ajoutez deux points : avant et après les tirets qui séparent la ligne d'en-tête.

Exemple:

| Fruit  | Des légumes | Des légumes |
|  :---:  |  :----:  |  :---:  |
| anacardier    | Cresson   | Carotte |
| Pomme    | Brocoli | Pois |

Résultat dans HTML:

Il est possible de fusionner la mise en forme de l'alignement, car cela n'influence que le contenu à l'intérieur de la colonne.

Exemple:

| Fruit  | Des légumes | Des légumes |
| :---    |  :----:  |    ---: |
| anacardier    | Cresson   | Carotte |
| Pomme    | Brocoli | Pois |

Résultat dans HTML:

Il est à noter que l'alignement des tirets --- de la ligne séparant les en-têtes du tableau n'est pas pertinent pour le processeur Markdown, ce qui sera réellement pris en compte est la position des deux points :.

Dans l'exemple suivant, les tirets --- sont positionnés à gauche de la colonne et l'alignement fonctionne uniformément.

| Fruit  | Des légumes | Des légumes |
| :---    | :----:   | ---:    |
| anacardier    | Cresson   | Carotte |
| Pomme    | Brocoli | Pois |

Résultat dans HTML:

REMARQUE: Le contenu de l'en-tête du tableau sera également aligné en fonction de la position des deux points.

Formatage du texte dans les tableaux

Vous pouvez insérer des éléments de base de Markdown dans une table.

Certains formats autorisés sont, la création d'links, soulignent le contenu en gras ou en italique et mettent en évidence le texte sous forme de code, mais seul le code en ligne est accepté, c'est-à-dire lorsqu'il est créé avec l'ouverture et la fermeture de barres obliques inverses `.

Les titres, blocs de code, blockquotes, listes, lignes horizontales, images et tags HTML ne fonctionnent pas.

NOTE: Vous pouvez même trouver des applications qui acceptent l'insertion des éléments mentionnés ci-dessus dans un tableau, mais cela nuira à la portabilité de votre document, car d'autres programmes ne le prennent pas en charge.

Échapper aux barres verticales sur les tables

Vous avez déjà appris que, pour séparer les colonnes du tableau, nous utilisons la barre verticale |.

Maintenant, si vous avez l'intention d'afficher ce même caractère comme contenu dans une cellule, vous devez utiliser l'encodage HTML: |.

Ao converter o seu documento para um outro formato, o código | se transformará em uma barra vertical |.

Bloc de code clôturé

Un bloc de code entouré vous permet de créer des représentations de code sans avoir à indenter la ligne dans quatre espaces ou une tabulation, en outre, il vous permet également de définir quel langage de programmation le bloc représente, avec cela, il est possible d'appliquer la syntaxe appropriée mise en évidence.

Pour créer un bloc de code entouré de Markdown, placez trois guillemets ` ``avant le contenu et trois guillemets `` ` après le contenu.

Exemple:

```
{
  "Nom": "Robert",
  "nom de famille": "Salles",
  "âge": 25
}
```

La sortie rendue ressemble à ceci:

{
  "Nom": "Robert",
  "nom de famille": "Salles",
  "âge": 25
}

NOTE: Certains processeurs Markdown vous permettent d'utiliser des carreaux ~~~ à la place des guillemets pour former le bloc de code.

Voir aussi: Comment échapper aux backbones dans un bloc de code.

Mise en évidence de la syntaxe

De nombreuses bibliothèques JavaScript sont utilisées pour mettre en évidence des blocs de code, par exemple: Prism.js & highlight.js.

Ils prennent un tag HTML spécifique, généralement tag pre ou tag code et appliquent le surlignage basé sur la syntaxe du langage de programmation du bloc de code.

La syntaxe du langage est généralement définie par le paramètre tag class, par exemple:

<code class="lang-markdown"></code>

En utilisant la classe lang-plaintext>lang-markdown, le framework saura que le contenu entre le "code" tags doit être mis en évidence selon le langage Markdown.

NOTE: L'application du surlignage peut se faire même automatiquement, certains outils ont la capacité de détecter les langages de programmation de manière automatisée, sans avoir besoin de le définir dans le paramètre class.

En construisant le bloc de code en utilisant Markdown, vous pouvez spécifier le langage de programmation juste après les trois premiers guillemets ` ``ouverture.

Exemple:

```json
{
  "Nom": "Robert",
  "nom de famille": "Salles",
  "âge": 25
}
```

Comme dans la première ligne du bloc, juste après les trois backbones d'ouverture, json a été spécifié, le code sera mis en évidence en conséquence:

{
  "Nom": "Robert",
  "nom de famille": "Salles",
  "âge": 25
}

NOTE: le code ne sera mis en surbrillance que si vous utilisez une bibliothèque JavaScript qui effectue ce type de tâche, HTML par lui-même, ne met pas le code en surbrillance.

Notes de bas de page

Une note de bas de page dans Markdown permet à l'utilisateur de créer une référence à un concept mentionné dans le document.

En règle générale, ces notes de bas de page sont placées à la fin du document, mais dans Markdown, vous pouvez les définir n'importe où dans le texte.

Lors de la création d'une note de bas de page, un nombre en exposant sous la forme de link sera inséré à l'endroit où vous l'avez créée, lorsque l'utilisateur cliquera sur ce link, il sera dirigé directement à l'endroit qui contient la référence de la note.

La syntaxe de création de la note de bas de page est divisée en deux parties.

La première partie représente le nombre contenant le link et est créée en utilisant des crochets, un signe d'insertion et un identifiant, par exemple: [^1].

L'identifiant peut contenir des chiffres et des lettres, mais n'accepte ni les espaces ni les tabulations.

La deuxième partie couvre le contenu de la référence elle-même, pour la créer utilisez des crochets, un curseur suivi du même identifiant (que vous avez créé précédemment), deux points, un espace vide et le texte, exemple: [^1]: Ma note de bas de page.

Voici une simple note de bas de page[^1]. Voici une note de bas de page plus élaborée[^bignote].

[^1]: Ceci est la première note de bas de page.

[^bignote]: En voici un avec plusieurs paragraphes et du code.

    Mettez les paragraphes en retrait pour les inclure dans la note de bas de page.

    `{ mon code }`

    Ajoutez autant de paragraphes que vous le souhaitez.

La redéfinition dans HTML ressemble à ceci:

Voici une simple note de bas de page¹. Voici une note de bas de page plus élaborée².

NOTE: Le contenu du pied de page peut être placé n'importe où dans le document, sauf dans d'autres éléments Markdown tels que des tableaux, des listes et des blocs de code.

REMARQUE: Les notes de bas de page seront toujours numérotées de manière séquentielle, quels que soient les identificateurs que vous avez créés, une séquence de notes [^ 35], [^ yyyy] et [^ 102_444] sera rendue sous la forme 1, 2 et 3.

Ajouter ID ou Class aux éléments de Markdown

Lorsque nous créons tags dans HTML, nous pouvons leur attribuer une identification unique et une identification générique via les paramètres id et class.

Exemple:

<h2 id="special-title"></h2> & <p class="bg-blue"></p>

Avec id, nous pouvons obtenir une référence spécifique pour un élément particulier, normalement l'id de l'élément est unique dans la balise HTML.

Le paramètre class est générique et peut être affecté à plusieurs éléments.

La fonction de id ou class est de vous permettre de reconnaître facilement ces éléments en utilisant JavaScript ou CSS, en utilisant ce id ou ce class nous pouvons manipuler les propriétés comme la couleur, la taille, le positionnement, etc.

Pour ajouter un id ou un class à un élément dans Markdown ouvrir les accolades { juste après le contenu de l'élément, placez un signe dièse # pour indiquer un id ou un . pour indiquer un class, puis l'identifiant lui-même et, enfin, fermer les accolades }.

Exemples:

### Mon titre {#identifier}

Mon paragraphe{.my-class}

Le HTML ressemble à ceci:

<h3 id="identifier">Mon titre</h3>

<p class="my-class">Mon paragraphe</p>

NOTE: Notez que toutes les applications Markdown ne supportent pas l'insertion des paramètres id ou class, il est important de toujours consulter la documentation du programme.

Links pour ids à ​​Markdown

Avec la même syntaxe standard pour créer links [] (), nous pouvons lier une référence directe à un id dans le document lui-même.

Entre les parenthèses où nous mettons le URL, insérez le id de l'élément précédé du signe dièse #.

Si id est dans un autre document, le formatage est similaire, cependant, avant l'identification, placez le URL sur la page.

Exemple:

[ID d'en-tête](https://markdown.net.br/sintaxe-estendida#markdown-title-id)

Liste des définitions

Une liste de définitions dans HTML est représentée par tags dl et dt. Cette liste représente les termes et leurs explications de manière conceptuelle.

Pour créer une liste de définitions avec Markdown, tapez le terme sur une ligne, appuyez sur la touche Enter, deux points, un espace vide et le terme définition.

Exemple:

Premier mandat
: Telle est la définition du premier terme.

Deuxième mandat
: Ceci est une définition du deuxième terme.
: Ceci est une autre définition du deuxième terme.

Le HTML ressemble à ceci:

<dl>
  <dt>Premier mandat</dt>
  <dd>Telle est la définition du premier terme.</dd>
  <dt>Deuxième mandat</dt>
  <dd>Ceci est une définition du deuxième terme. </dd>
  <dd>Ceci est une autre définition du deuxième terme.</dd>
</dl>

C'est le résultat:

Premier mandat

Telle est la définition du premier terme.

Deuxième mandat

Ceci est une définition du deuxième terme.

Ceci est une autre définition du deuxième terme.

Barré dans Markdown

Le barré est utilisé pour corriger une erreur de manière comparative, généralement suivi d'une correction sur la même ligne.

Le barré n'est rien de plus qu'un format qui insère une ligne horizontale au milieu d'un élément de contenu.

Pour marquer le contenu dans Markdown, utilisez deux tuiles ~~ avant et après le texte à formater.

Markdown est: ~~difficile~~ Facile à apprendre.

Et le résultat est le suivant:

Markdown est: difficile Facile à apprendre.

Listes de tâches dans Markdown

Une liste de tâches dans Markdown permet à l'utilisateur de créer une séquence d'éléments avec des cases à cocher à leur gauche en utilisant des crochets [].

Comme nous travaillons avec une liste, il est nécessaire de commencer la ligne de l'élément par un tiret -.

Pour marquer une tâche comme terminée, placez un x entre les crochets [x].

- [x] Lorem ipsum dolor sit amet
- [ ] Lorem consectetur adipisicing elit
- [ ] Lorem ut labore et dfolore

La sortie rendue ressemble à ceci:

Insertion de Emojis dans le document Markdown

Eh bien, vous pouvez insérer le fameux emoticons directement dans le format Markdown de votre document.

Il existe deux méthodes les plus couramment utilisées pour la tâche: copier et coller l'emoji dans le contenu ou entrer des codes emoji.

Nous comprendrons mieux le fonctionnement des deux procédures, mais d'abord, cliquez ici pour ouvrir notre éditeur Markdown et tester les Emojis en temps réel.

Copier et coller des Emojis sur Markdown

Étape 1 - Ouvrez cette page Emojipedia qui contient un emoticon souriant et cliquez sur le bouton Copy.

Étape 2 - Revenez dans notre éditeur Markdown, cliquez sur le panneau de gauche et appuyez sur CTRL + V pour coller.

REMARQUE: Vous pouvez explorer Emojipedia pour trouver votre emoji préféré, la procédure de copier-coller est la même pour tous.

Si votre application Markdown est compatible, vous verrez la représentation emoticon directement dans le texte.

Lors de la conversion du document Markdown en HTML ou même PDF, les emojis sont toujours représentés correctement.

NOTE: Si le document HTML ne rend pas les emojis comme il le devrait, encodez les pages en UTF-8.

Utilisation des codes d'accès Emoji

Un code emoji est formé en identifiant le emoticon entouré d'un deux-points.

Je suis allé camper! :tent: Je reviens vite.

C'est tellement drôle! :joy:

La sortie rendue ressemble à ceci:

Je suis allé camper! ⛺ Je reviens vite.

C'est tellement drôle! 😂

Découvrir le code d'accès Emojis

Si vous ne connaissez pas le code d'accès emoji, utilisez notre éditeur Markdown pour le savoir.

Étape 1 - Cliquez ici pour ouvrir Markeditor.

Étape 2 - Cliquez sur le bouton d'insertion Emojis dans la barre d'outils.

Étape 3 - Dans la fenêtre de sélection Emoji:

1. Choisissez la source à partir de laquelle vous souhaitez obtenir les Emojis.
2. Cliquez sur le Emoji qui sera inséré dans le document (vous pouvez cliquer sur plusieurs Emojis dans la même fenêtre).
3. Appuyez sur le bouton de confirmation pour insérer le code d'accès des images dans le texte.

Dans le panneau de gauche, vous pouvez afficher les codes Emojis et dans le panneau de droite le rendu.

NOTE: Les images de emoticons peuvent beaucoup varier d'une application à l'autre, dans cette liste vous trouvez les emojis compatibles avec Markdown utilisés par GitHub, vous pouvez les tester dans votre application pour savoir si il y a compatibilité.

Link automatique de URL à Markdown

Certains processeurs Markdown transforment URL en links lorsqu'ils trouvent une adresse entre les signes inférieur à < et supérieur à >.

Exemple:

<https://markdown.net.br>

Em outras ocasiões, embutir o endereço entre <> é dispensável, ou seja, basta inserir a URL no próprio documento que o aplicativo fará a conversão automaticamente.

Exemple:

https://markdown.net.br

La sortie rendue ressemble à ceci:

https://markdown.net.br

Désactivation de la liaison automatique de URL

Si vous souhaitez simplement représenter un URL dans un document et empêcher l'application de le convertir automatiquement en link, placez l'adresse entre guillemets ` `.

`https://markdown.net.br`

La sortie rendue ressemble à ceci:

https://markdown.net.br

REMARQUE: Il convient de se rappeler que l'utilisation de guillemets pour entourer le contenu le transforme en code.