Le markdown - Mise en page des articles en v24
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 :
- Élément 1
- Élément 2
- É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
- Sous 1-1
- 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 : 
Exemple : 
Résultat :
Ajouter une image ou du texte dans un encadrement style citation
Pour encadrer une image avec un style citation, utilisez le symbole &gt;
devant l’image :
Code :
> 
Résultat :
>
Avec juste du texte:
Code :
> Une citation
Résultat :
> Une citation
Lien sur une image
Pour combiner un lien et une image :
Code : [  ](url du lien)
Exemple : [  ](https://www.markdownguide.org)
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.
| 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. 😋
@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 "`"
;)
merci XINE pour ce travail
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 ?

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___
Je n'utilise que ça (dès que je peux)
Y'a pas moyen de le bookmarquer ?
Voir mon profil (facepalm)