Markdown est un langage de balisage léger avec une syntaxe de formatage de texte brut.
C’est la syntaxe de facto pour écrire de la documentation sur les principaux référentiels de code tels que GitHub.
Nous le retrouvons un peu partout principalement sur les outils moderne: Discord, logiciel de prise de note, etc.
Wiki.js prend en charge la spécification CommonMark complète et ajoute quelques extensions utiles (y compris les modules complémentaires Github Flavored Markdown).
Utiliser le symbole supérieur à (>), suivi d’un espace, avant chaque ligne de texte.
En sélectionnant du texte, puis en cliquant sur le bouton dans la barre d’outils.
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
En ajoutant une classe sur une ligne séparée, après le blockquote, vous pouvez changer l’apparence du blockquote. Notez que ces styles sont spécifiques à Wiki.js et reviendront au style standard des citations de blocs dans d’autres applications.
is-info
is-success
is-warning
is-danger
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
{.is-info}
Il s’agit d’un blockquote sans style par défaut.
Il s’agit d’un blockquote
{.is-info}
Il s’agit d’un blockquote
{.is-success}
Il s’agit d’un blockquote
{.is-warning}
Il s’agit d’un blockquote
{.is-danger}
Utilisation des doubles astérisques ( ** ) avant et après la sélection de texte.
En sélectionnant du texte, puis en cliquant sur le bouton dans la barre d’outils.
Lorem **ipsum** dolor
Lorem ipsum dolor
Utilisation des triple backticks avant et après la sélection de texte, sur des lignes dédiées.
Utilisation de l’outil Code intégré dans la barre d’outils.
```
function lorem (ipsum) {
const dolor = 'consectetur adipiscing elit'
}
```
Par défaut, un bloc de code est rendu sous forme de texte préformaté brut. Il est cependant préférable d’utiliser la coloration syntaxique pour le code de programmation, permettant une meilleure lisibilité.
Pour spécifier le langage de programmation utilisé dans le bloc de code, ajoutez simplement le mot-clé language juste après les triples backticks d’ouverture :
```java
// some code here
```
Reportez-vous à la liste de référence d’environ 185 langages de programmation pris en charge.
Cette fonctionnalité n’est disponible qu’à partir de la version 2.4 et supérieure.
Utilisation d’en-têtes et ajout de la classe {.tabset}
à l’en-tête parent. Le texte de l’en-tête parent ne sera pas affiché dans le résultat final.
Notez que vous pouvez utiliser n’importe quel niveau d’en-tête, tant que les en-têtes enfants sont d’un niveau supérieur.
Par exemple, si un en-tête parent est ###
(h3), les en-têtes des onglets doivent être ####
(h4). Le niveau d’en-tête maximum pour un parent étant 5 et les enfants 6.
# Tabs {.tabset}
## Premier onglet
Tout le contenu présent ici ira dans le premier onglet...
## Deuxième onglet
Tout le contenu présent ici ira dans le deuxième onglet...
## Troisième onglet
Tout le contenu présent ici ira dans le troisième onglet...
Utilisation de la syntaxe :identifier:
Voir la [Emoji Cheat Sheet] (https://www.webfx.com/tools/emoji-cheat-sheet/) pour la liste complète des options possibles.
:apple:
Peut aussi être utilisé :fire: en ligne
Peut aussi être utilisé en ligne
Utilisez la syntaxe [^1]
pour l’emplacement de la note de bas de page dans le texte principal, et [^1]: ceci est une note de bas de page
pour la note de bas de page réelle.
Les notes de bas de page elles-mêmes apparaîtront automatiquement en bas de la page sous une ligne horizontale.
Utiliser entre 1 et 6 symbole(s) hashtag (#), suivis d’un espace, avant la sélection du texte.
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
Utilisation des triple tirets (—) sur une ligne dédiée.
Lorem ipsum dolor
---
Consectetur adipiscing elit
Lorem ipsum dolor
Consectetur adipiscing elit
Utiliser la syntaxe ![légende de l'image](source/chemin de l'image)
.
![Zozor](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
Consectetur ![adipiscing](/link/to/image.jpg) elit
![ui-markdown-hr.png](/guide/ui-markdown-hr.png)
Parfois, les images sont trop grandes ou vous voulez peut-être que l’image remplisse tout l’espace disponible.
Ajouter simplement les dimensions à la fin du chemin de l’image :
![Image](/lien/de/l'image.jpg =100x50)
Vous pouvez également omettre l’une des valeurs pour conserver automatiquement le rapport d’image :
![Image](/lien/de/l'image.jpg =100x)
![Image](/lien/de/l'image.jpg =x50)
Il est également possible d’utiliser d’autres unités, comme %. Utile lorsque vous avez besoin que l’image prenne tout l’espace disponible :
![Image](/lien/de/l'image.jpg =100%x)
Utilisation d’un backtick avant et après la sélection de texte.
Lorem `ipsum` dolor
Lorem ipsum
dolor
Utilisation d’une astérisque ( * ) avant et après la sélection de texte.
Lorem *ipsum* dolor
Lorem ipsum dolor
Utiliser <kbd>
avant et </kbd>
après la sélection de texte.
Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd>
Lorem ipsum dolor CTRL + C
Utiliser la syntaxe [Texte du lien](cible du lien)
.
[Lorem ipsum](https://wiki.js.org/about)
Consectetur [adipiscing](/install/requirements) elit
Consectetur adipiscing elit
Utilisation d’un bloc de code ave le language mermaid.
Reportez-vous au [site Web de la sirène] (https://mermaid-js.github.io/mermaid) pour référence.
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
Utiliser un chiffre, suivi d’un point, suivi d’un espace, avant chaque ligne de texte.
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Morbi vehicula aliquam
Bien que vous puissiez numéroter chaque ligne dans l’ordre, il est plus facile d’utiliser le numéro 1 sur chaque ligne.
Le résultat final sera incrémenté automatiquement. De cette façon, vous n’avez pas besoin de renuméroter chaque ligne lors de l’ajout ou de la suppression d’une ligne ultérieurement.
Utilisation d’un bloc de code avec le langage plantuml.
Reportez-vous au [site Web de PlantUML] (https://plantuml.com/) pour référence.
```plantuml
Bob->Alice : hello
```
Utilisation de double tildes ( ~~ ) avant et après la sélection de texte.
Lorem ~~ipsum~~ dolor
Lorem ipsum dolor
Utilisation d’un simple tilde ( ~ ) avant et après la sélection de texte.
Lorem ~ipsum~ dolor
Lorem ipsum dolor
Utilisation d’un simple caret ( ^ ) avant et après la sélection de texte.
Lorem ^ipsum^ dolor
Lorem ipsum dolor
Utiliser la syntaxe - [ ]
ou - [x]
.
- [x] Élément de tâche coché
- [x] Un autre élément de tâche coché
- [ ] Élément de tâche non coché
En utilisant un astérisque ( * ) ou un tiret ( - ), suivi d’un espace, avant chaque ligne de texte.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam
En ajoutant une classe sur une ligne séparée, après la liste, vous pouvez modifier l’apparence de la liste :
links-list
grid-list
Par exemple:
- Élément de grille 1
- Élément de grille 2
- Élément de grille 3
{.grid-list}
- [Lien Titre 1 *Description du lien*](https://www.google.com)
- [Lien Titre 2 *Autre Description du lien*](https://www.google.com)
- [Lien Titre 3 *Troisième Description du lien*](https://www.google.com)
{.links-list}
Aura pour résultat:
Et:
Notez que ces styles sont spécifiques à Wiki.js et reviendront au style de liste standard dans d’autres applications.