# Document de démonstration pour le *Markdown*
> [!info]- Pour consulter la source de ce document
> **NB :** le « source » en *Markdown* de ce document peut être consulté et téléchargé ⭢ [document de démonstration.md](https://dr-spinnler.ch/myfiles/textes/document%20de%20d%C3%A9monstration.md).
> Si vous l’affichez dans votre navigateur et que vous voyez des caractères bizarres, c’est que votre navigateur n’utilise pas le bon jeu de caractères, ce document étant en “UTF-8”.
> Si vous le téléchargez, vous devez pouvoir l’ouvrir sans autres, comme n’importe quel document de texte (`.txt`). Au pire :
> * vous le renommez en remplaçant l’extension `.md` par `.txt` ;
> * vous indiquez à votre éditeur que ce texte est en “UTF-8”.
Ce document permet de tester comment tel ou tel éditeur affiche le *Markdown*, tant en mode “édition” qu’en mode “lecture”. On peut aussi l’utiliser, bien évidemment, pour tester le rendu des feuilles de styles *CSS*.
Il démontre, en particulier, toutes les capacités du dialecte *Markdown* géré par *Obsidian*.
----------------------------------------------
Le paragraphe suivant sert à étalonner la longueur des lignes de texte. Classiquement, elles devraient faire environ *deux et demi* à *trois* alphabets : [^longueur_ligne]
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklm nopqrstuvwxyz abcdefghijklm nopqrstuvwxyz
## Titre de niveau 2
***Lorem ipsum*** dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
### De temps en temps, on a aussi besoin du niveau 3
En pratique, on va généralement utiliser le niveau *1* pour le titre du document. Le niveau *2* correspond ensuite aux *divisions* du texte et le niveau *3* aux *subdivisions*.
Souvent, on appelle *intertitres* ces titres de subdivisions.
#### Voici le niveau 4
##### Voici le niveau 5
###### Voici le niveau 6
Ce n’est généralement pas une bonne idée que d’écrire avec plus de 3 niveaux de titres et sous-titres. Les niveaux *4* à *6* ne sont guère utilisés qu’avec des significations particulières, dans des feuilles de styles spécialisées. Ils peuvent servir, par exemple, pour noter des références bibliographiques dans un papier académique.
----------------------------------------------
↑ **Séparateur** (“divider”) — Au-dessus du présent paragraphe se trouve un « séparateur », rendu de différentes manières selon les feuilles de styles ou les contextes. Ce peut être une ligne horizontale ou un élément décoratif. En *Markdown*, c’est une ligne sur laquelle il n’y a que des tirets — au moins 3, mais on peut en mettre plus.
**NB :** la syntaxe *Markdown* originelle accepte également les lignes d’astérisques (`*`) ou de soulignés (`_`). Je recommande cependant les tirets, car ils sont plus universels, certains logiciels (*Ulysses*, par ex.) ne comprenant pas les lignes d’astérisques ou de soulignés.
## Enrichissements typographiques
***Ce texte*** est en **gras** et en *italique*. Pas besoin d’en écrire davantage, vu que nous avons ainsi un échantillon de
* *italique* (= “emphasis”)
* **gras** (= “bold”)
* ***gras italique***.
## Listes
* Ceci est une liste à puces.
* Selon la feuille de styles utilisée, les puces peuvent, à l’occasion, être rendues par des tirets ou tout autre ornement typographique.
* Il existe, par exemple, des puces carrées.
Il faut du texte, entre deux listes de natures différentes — liste numérotée ou liste à puces. Faute de quoi, les deux listes sont considérées comme une seule et même liste et c’est le premier caractère du premier item de la liste qui en détermine la nature.
1. Un paragraphe numéroté
1. Un deuxième paragraphe numéroté
1. Et un troisième. Ça suffira pour la démonstration.
Il nous faut vérifier comment se comporte l’éditeur — ou l’interpréteur — avec des listes à deux ou trois niveaux hiérarchiques.
1. Voici donc une liste numérotée…
* avec un deuxième niveau qui est constitué, lui, d’une liste à puces ;
* ceci est la continuation de la liste à puces
* et ce *deuxième* niveau de la liste à puces est le *troisième* niveau de la liste globale
* suite du troisième niveau
* suite du deuxième niveau
1. retour au premier niveau
Certaines feuilles de styles — CSS ou autres — ne stylent pas correctement le niveau trois. Je trouve cela parfaitement inacceptable.
## Références
### Liens (links)
Dans un *wiki* ou dans un *jardin numérique* comme le présent site, il existe deux sortes de liens :
1. les liens *internes* qui pointent vers des pages du site : la [[accueil|table des matières de ce site]]
2. les liens *externes* qui pointent vers des pages ailleurs sur le net : ⭢ [le blog](https://dr-spinnler.ch/blog/ "blog du Dr O. Spinnler") du site du docteur Spinnler.
Dans un *wiki/jardin numérique*, on a parfois des [[liens qui pointent vers une page pas encore créée]]. Ils doivent être visuellement distincts.
Une adresse mail ressemble à ceci : <
[email protected]><br>ou à ceci : [John Doe](mailto:
[email protected]).
Dans le code source :
``` HTML
<
[email protected]>
[John Doe](mailto:
[email protected])
```
### Notes de bas de page
Quant aux *notes de bas de page* [^1] (“footnotes”), je ne connais guère qu’*Ulysses* qui les gère élégamment. C’est un argument très fort en faveur de cet éditeur.
## Images
Comme, par définition et par design, le *Markdown* est du *texte pur*, on ne peut pas directement y « coller » des images. On écrit donc, dans le texte, des références vers les images. Par exemple, le logo du *Markdown* :
Une image piochée sur le site [*Lorem Picsum*](https://picsum.photos/) :
## Citations et code
Pour faire une citation, il faut commencer chaque paragraphe par un “\>”:
> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.
>
> I don't know whether the universe, with its countless galaxies, stars and planets, has a deeper meaning or not, but at the very least, it is clear that we humans who live on this earth face the task of making a happy life for ourselves. Therefore, it is important to discover what will bring about the greatest degree of happiness.
> <div class="citation-source">Cicéron</div>
Il y a aussi, dans certaines implémentations, le `verbatim` ou `code block` :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### Code
Le code, c’est du texte qui vient généralement en fonte « à échappement fixe » (“monospaced”). Il suffit d’indenter avec une tabulation ou 4 espaces:
Ceci est du code.
La deuxième ligne de code.
Pour la suite du code, on peut indenter et désindenter à volonté.
Ceci est à la marge gauche du code.
Il y a aussi le `Code inclus entre deux “backticks”`, c’est-à-dire entre deux *accents graves*.
## Les tables
| Colonne 1 | Colonne 2<br>un long texte, sur deux lignes | Colonne 3 |
| ------------------------------------------------------------ | :----------------------------------------------------------: | ----------------------------------------------------------: |
| cellule | cellule | cellule |
| cellule | cellule | cellule |
| cellule avec du texte, pour voir comment ça va s’aligner, verticalement | cellule | cellule |
| cellule | cette cellule-ci aussi, il s’agit de voir comment elle s’aligne verticalement | ou plutôt: comment s’alignent les autres, sur la même ligne |
| cellule | cellule | cellule |
### Liste des caractères souvent ambigus
Dans certaines fontes, il y a des caractères qui se ressemblent, voire sont carrément identiques. Dans du « texte au kilomètre », ce n’est pas forcément gênant. Mais quand il est important de les distinguer [^ambigus], cela peut devenir problématique. Voici une liste de tels caractères. Dans les dernières lignes de la table, j’ai juxtaposés des caractères semblables.
[^ambigus]: par exemple : dans des mots de passe, des numéros de compte, des adresses web ou mail, etc.
| Car. | Description |
|:----:| --------------- |
| i | idée |
| I | Idée |
| 1 | un |
| l | luxe |
| L | Luxe |
| o | ordre |
| O | Ordre |
| 0 | zéro |
| j | juste |
| J | Juste |
| S | Subtil |
| 5 | cinq |
| 0O | zéro, Ordre |
| l1 | litre, un |
| lI | litre, Italique |
| Il | Italique, litre |
| Il | Italique, litre |
| IL | Italique, Litre |
| il | italique, litre |
| 71 | sept, un |
| vy | Vevey, yes |
| Z2 | zèbre, deux |
| S5 | sucre, cinq |
| G6 | gare, six |
| B8 | brique, huit |
## Quelques spécialités
Certaines implémentations ont d’autres enjolivements à disposition. Pour les listes, ceci est un « quasi standard » :
- [ ] case à cocher (= “to do”)
- [x] case cochée  (= “done”)
Pour terminer, voici deux éléments non-standards, mais qu’*Obsidian* utilise :
* Le texte ~~entre des “tildes” doubles~~ apparaît *biffé*.
* Le texte ==entre des “égal” doubles== apparaît *surligné*.
## Où trouver la description de la syntaxe ?
Deux excellentes références :
* le [guide écrit par les auteurs de *ByWord*](https://bywordapp.com/markdown/syntax.html)
* le [guide de *Typora*](https://support.typora.io/Markdown-Reference/)
On peut utilement consulter le site [Markdown Guide](https://www.markdownguide.org/basic-syntax/) (voir aussi la partie “[Extended Syntax](https://www.markdownguide.org/extended-syntax/)”).
Finalement, pour connaître ce qui est « le plus standard à l’heure actuelle », c’est ici ⭢ [spec.commonmark.org](https://spec.commonmark.org/)
 
<p style="text-align: center;"><a href="https://dr-spinnler.ch"><img src="https://dr-spinnler.ch/myfiles/logos/Olivier-Spinnler.png" class= "signature"/></a></p>
<p style="text-align: center; font-style: italic;">le 24 août 2022
</p>
 
[^longueur_ligne]: Pour le confort de lecture. Dans un éditeur, on peut aller jusqu’à environ *trois et demi* alphabets.
[^1]: Le texte de la note de bas de page.
----------------------------------------------
[[Markdown (domaine)|Markdown]] ✦ [[éditeurs de Markdown]]
#test #démo #écriture #markdown