Le markdown - Mise en page des articles en v24

Un article de Fantomas-2
Publié le 02/02/2025
Dans la section #GEEK
Article public d'intéret général
198 visiteurs
114 points
21 participants
114 points POUR
0 point CONTRE
 
Conforme ou séditieux?

Hello tout le monde !

Je vois que beaucoup de citoyens ont du mal avec le markdown depuis le passage en v24 donc voici un peu d’histoire et aussi le topo des balises qu’on peut utiliser sur parano.

Le Markdown, c’est un langage de balisage léger créé en 2004 par John Gruber, avec un coup de main d’Aaron Swartz (le co-fondateur de Reddit, connu aussi pour son engagement en faveur de l’Internet libre). Leur objectif était simple : permettre d’écrire du texte destiné au web sans se casser la tête avec des balises HTML compliquées.

À l’époque, si vous vouliez mettre du texte en gras, faire des listes ou insérer des liens, il fallait jongler avec des balises du type <strong>, <ul>, etc. Pas très pratique, surtout quand on veut juste rédiger rapidement. C’est là que Markdown entre en jeu : un système où vous écrivez de manière naturelle, lisible même sans mise en forme, et qui peut facilement être converti en HTML pour le web.

Pourquoi ça s’appelle "Markdown" ?

Le nom Markdown est un jeu de mots. Il vient de "markup", qui signifie balisage en anglais (comme dans HTML : HyperText Markup Language), et de "mark down", qui veut dire noter rapidement. L’idée était de faire du balisage, mais de façon simplifiée, sans les balises lourdes du HTML. En gros, vous notez votre texte comme bon vous semble, et le Markdown s’occupe de la mise en forme derrière.

Aujourd’hui, Markdown est utilisé partout : sur GitHub, dans des blogs, des documents techniques, des applications de prise de notes… Bref, c’est devenu un standard. Un outil simple, efficace, qui va à l’essentiel.

Allons-y !

1. Les bases de la mise en forme

Texte en gras

Pour mettre un mot ou une phrase en gras, encadrez-le de deux étoiles :
Code : **texte**
Résultat : texte

Texte en italique

Pour écrire en italique, utilisez une étoile :
Code : *texte*
Résultat : texte

Texte en gras et en italique

Besoin de combiner les deux ? Utilisez trois étoiles :
Code : ***texte***
Résultat : texte

Texte barré

Pour barrer un texte, encadrez-le de deux tildes :
Code : ~~texte~~
Résultat : texte

Ajouter un séparateur

Pour insérer une ligne horizontale, utilisez trois tirets (---) ou trois astérisques (***) :
Code :

---

Résultat :


Sauts de ligne forcés

Pour créer un saut de ligne ou un retour à la ligne, terminez une ligne avec deux espaces ou plus.

Espace= __

Exemple :

Parano__
Carotte__
DMZ__

Résultat :
Parano
Carotte
DMz

Pour les titres et les sous-titres

Pour ajouter des titres et des sous-titres, précedez-les de #.

Titre : # Titre

Sous-titre : ## Sous Titre

Sous sous-titre : ### Sous Sous Titre

Etc

Résultats :

Titre

Sous Titre

Sous Sous Titre

Simple non?


2. Listes simples et efficaces

Liste à puces

Commencez chaque ligne avec un tiret ou un astérisque :
Code :

- Élément 1  
- Élément 2  
- Élément 3

Résultat :

  • Élément 1
  • Élément 2
  • Élément 3

Liste numérotée

Ajoutez simplement un numéro suivi d’un point :
Code :

1. Élément 1  
2. Élément 2  
3. Élément 3

Résultat :

  1. Élément 1
  2. Élément 2
  3. Élément 3

On peut avec des espaces, faire des sous listes:

- Élément 1
  1. Sous 1-1
  2. Sous 1-2
- Élément 2

Résultat :

  • Élément 1
    1. Sous 1-1
    2. Sous 1-2
  • Élément 2

3. Ajouter des liens, des images ou une vidéo

Insérer un lien

Pour créer un lien cliquable :
Code : [texte](url)
Exemple : [Google](https://www.google.com)
Résultat : Google

Ajouter une image

Pour afficher une image :

Code : ![Titre de l’image](url de l’image)
Exemple : ![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Résultat :
Logo Markdown

Ajouter une image ou du texte dans un encadrement style citation

Pour encadrer une image avec un style citation, utilisez le symbole > devant l’image :

Code :

> ![Titre de l’image](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

Résultat :
> Titre de l’image

Avec juste du texte:

Code :

> Une citation

Résultat :

> Une citation

Lien sur une image

Pour combiner un lien et une image :
Code : [ ![Titre de l’image](url de l’image) ](url du lien)
Exemple : [ ![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg) ](https://www.markdownguide.org)

Résultat :
Logo Markdown

Ajouter une vidéo Youtube ou autre vidéo

Ce n’est pas du markdown, Charly a simplifié la chose en nous permettant de mettre seulement le lien youtube sans aucune balise et celle-ci s’affiche toute seule. Il faut juste veiller à retirer la fin de l’URL jusqu’au point d’interrogation inclus.

Attention, si ce n’est pas une vidéo Youtube, il faut procéder de la même manière que pour une image simple.

Résultat :


4. Ajouter des tableaux

Créer un tableau simple

Les tableaux en Markdown sont créés avec des barres verticales (|) et des tirets (-) pour définir les en-têtes :
Code :

| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|-----------|-----------|
| Valeur 1  | Valeur 2  | Valeur 3  |
| Valeur A  | Valeur B  | Valeur C  |

Résultat :

Colonne 1 Colonne 2 Colonne 3
Valeur 1 Valeur 2 Valeur 3
Valeur A Valeur B Valeur C

On peut aligner le texte des colonnes d’un tableau avec deux points.

Code :

| Aligné à gauche | Centré | Aligné à droite |
| :--------------- |:---------------:| -----:|
| Aligné à gauche | Centré | Aligné à droite |

Résultat :

Aligné à gauche Centré Aligné à droite
Aligné à gauche Centré Aligné à droite

5. Ajouter du code

Code inline

Pour ajouter du code sur une seul ligne (par exemple, un mot), il faut utiliser le backtit.

Code :

La fonction `println`

*Résultat :

La fonction println

(Je l’utilise beaucoup dans cet article)

Blocs de code simples

Pour afficher un bloc de code :
Code :

```
Ton code ici
```

Résultat :

Ton code ici

Blocs de code sans surlignage syntaxique (avec, un jour peut-être)

Pour un bloc de code avec une langue spécifique (par exemple, Python) :
Code :

```python
print("Hello, world!")
```

Résultat :

print("Hello, world!")

Et voilà, j’ai fait le tour. Je pense qu’avec tout ça, vous êtes prêts à taper plein de beaux articles.

23 commentaires
Un Intrus
()
c'est très clair chef merci ☺️
Un égaré
()
Je connaissais la plupart mais il semble y avoir eu un update. Merci pour la mise à jour
Machin
()
Il y a moyen d'aligner le texte des colonnes d'un tableau avec les deux points...

| Aligné à gauche | Centré | Aligné à droite |
| :--------------- |:---------------:| -----:|
| Aligné à gauche | ce texte est centré | Aligné à droite |


On peut aussi indenter des listes ('_' est un espace simple).

** Liste indentée :**

1. First item
2. Second item
3. Third item
____1. Indented item
____2. Indented item
4. Fourth item

** Liste indentée sans numérotation :**

* une élément
* un autre
___* un sous élément
___* un autre sous élément
* un dernier élément


C'est dommage que les couleurs ne fonctionnent pas. @Charly implémente les couleurs. 😋
Machin
()
J'ai rajouté, Gulli
Un Intrus
()
C'est dommage que l'on ne puisse exploiter le plein potentiel du bloc de code, ça aurait permis de mettre de la couleur à nos textes via les codes ansi, mais il faut que parano accepte le caractère spécial d'échappement.

@Xine : tu as oublié le single quote qui permet d'avoir des caractères dans un bloc de police courrier (ou similaire) dans une phrase. Exemple : je ne comprends rien aux `bubulles` mais je sais utiliser le `markdown`.

Il suffit d'entourer son texte des symboles "`"
Un égaré
()
@Pluck: Ouep, c'est vrai qu'on l'a utilisé en plus 🙂
Bidule
()
Merci
un fureteur
()
Woooow ! Merci pour ce rappel qui va certainement en aider plus d’un 🙂
LeDétective
()
Merci pour cette propas très utile.
Un témoin
()
Merci pour cet éclairage.

;)
Chose
()
cette article devrait etre en DMZ directement, mais je me le garde dans un coin :)

merci XINE pour ce travail
Truc
()
Merci Xine ! Ça évitera d'écumer 3 ou 4 sites pour trouver toutes les astuces.
Ya moyen de faire des décalés ? J'ai pas l'impression d'avoir vu ?

J'imagine que toutes les markdown sont aussi d'office pour les fiches du coup ?
LeDétective
()
Après j'ai vu qqun en Wall qui demandait comment on retrouve cet article plus tard : c'est là que rentre en jeu le système de votation des articles. Si on est bcp à le voter en "pour", il restera visible plus longtemps.
Machin
()
Est-ce qu'il serait judicieux de le poster chez les #DEP aussi ?
Chose
()
Image

Ah, j'oubliais, ça pourrait être utile de forcer le "carriage return" à certains moment...

Line Breaks

To create a line break or new line (), end a line with two or more spaces, and then type return. '_' = espace !

courgette___
carotte___
concombre___
Un espion
()
Ajouté
Un témoin
()
Gloire au markdown ! Merci de l'avoir intégré !
Je n'utilise que ça (dès que je peux)
Bidule
()
Un grand merci 🌸 j'avais quelques bases, mais ma mémoire a été légèrement formaté
Un Intrus
()
Grand merci Xine, super utile ! 😊
Un Intrus
()
Merci ! Par contre j'ai essayé de le faire dans mon profil, et ça ne fonctionne pas. On voit les astérisques x)
Truc
()
Sur les fiches, c'est du bbcode.
Chose
()
Merci ! Ça c'est ce que j'appelle un article ultra utile.
Y'a pas moyen de le bookmarquer ?
Un Observateur
()
Rhooooo, je viens de lire l'article qui est d'une vrai aide !!! Ca frôle le *HELLPoinT* 🙂
Voir mon profil (facepalm)
(Vous n'avez pas (encore) les droits nécessaires pour répondre à cet article)
© 2003-2025 PaRaNo • Les CGU • Réseau Social Discret • Jour/Nuit