Aller au contenu

Page de démonstration

Voici sur cette page plusieurs exemples de ce qu'il est possible d'obtenir avec mkdocs et le thème materials.

Sources

Mises en formes de base

Pour mettre un texte en gras, il suffit d'entourer ce texte de 2 étoiles **.

Pour mettre un texte ex italique, il faut entourer ce texte d'une étoile *.

Pour mettre un texte en gras ET en italique, il faut insérer **_ avant et _** après.

Pour barrer du texte comme ceci entourer ce texte de 2 ~~.

Pour souligner du texte, ajouter ^^ avant et après.

Insérer un lien

La méthode Markdown régulière est d'écrire le texte qui sera visible entre crochets et le lien entre parenthèses comme dans cet exemple

[Lien vers Google](https://www.google.fr) Résultat : Lien vers Google

Admonitions

Voici tout d'abord une présentation de la fonction Admonitions.
Cela permet d'insérer un bloc afin de mettre en valeur un texte. Pour cela, il suffit de commencer une ligne par "!!!"

Exemple :

Note avec un titre personnalisé

Contenu de la note.

Puis le texte continue.

Code pour le cadre ci-dessus :
!!! Note "Note avec un titre personnalisé"
    Contenu de la note.  

Puis le texte continue.

Il existe plusieurs types de cadres : Question, failure, danger... Plus d'infos ici

Ce cadre est à droite grace à la commande inline end

Contenu du cadre
sur plusieurs lignes
en ajoutant 2 espaces
à la fin de chaque ligne

Code pour ce cadre à droite :
!!! tip inline end "Ce cadre est à droite grace à la commande ***inline end***"

    Contenu du cadre  
    sur plusieurs lignes  
    en ajoutant 2 espaces  
    à la fin de chaque ligne

Insérer un bouton

Lien dans un bouton

Code pour ce bouton :
[Page d'accueil](https://mkdocs.fabzh.eu){ .md-button .md-button--primary }

Ce qui affiche ceci : Page d'accueil

Bouton avec une icône

Code pour ce bouton :
[:incoming_envelope: *Envoie-moi !* :fontawesome-solid-shuttle-space:](https://mkdocs.fabzh.eu){ .md-button }

Ce qui donne cela :

📨 Envoie-moi !

Barres de progressions

Voici un essai de barre de progression :

70%

85%

100%

[=85% "85%"]{: .candystripe}
[=100% "100%"]{: .candystripe .candystripe-animate}

[=0%]{: .thin}
[=5%]{: .thin}
[=25%]{: .thin}
[=45%]{: .thin}
[=65%]{: .thin}
[=85%]{: .thin}
[=100%]{: .thin}