Syntaxes de base

Attention aux indentations

Les indentations de 4 espaces peuvent être réaisées dans le Web IDE en utilisant la touche de tabulation à condition d'avoir réalisé le réglage du Web IDE "Select indentation".

👉 Configuration du Web IDE

I. Syntaxe basique de Markdown

Les titres

Le code à copier

## Titre 1 : Mon titre de niveau 1

Mon paragraphe

### Titre 2 : Mon titre de niveau 2

Titre 1 : Mon titre de niveau 1

Mon paragraphe 1

Titre 2 : Mon titre de niveau 2

Mon paragraphe 2

2. Les tableaux

Il est facile de réaliser des tableaux avec Markdown, mais la présentation est basique.
Les largeurs de colonnes sont gérées automatiquement, les espaces entre les | | peuvent être aléatoires.
Il faut laisser une ligne vide avant de commencer un tableau.

Les tableaux

Le code à copier

| Titre 1  | Titre 2 | Titre 3 |
| :---    | :----:    | ---:   |
| aligné gauche   | centré  | aligné droite |
| Pomme | Brocoli | Pois |

Titre 1	Titre 2	Titre 3
aligné gauche	centré	aligné droite
Pomme	Brocoli	Pois

Pour centrer un tableau

Le code à copier

<center markdown>

| Titre 1  | Titre 2 | Titre 3 |
| :---    | :----:    | ---:   |
| aligné gauche   | centré  | aligné droite |
| Pomme | Brocoli | Pois |

</center>

Titre 1	Titre 2	Titre 3
aligné gauche	centré	aligné droite
Pomme	Brocoli	Pois

Pour des tableaux plus sophistiqués, on peut les écrire en HTML :

Les tableaux en HTML

Le code à copier

<table>
<tr>
    <td style="border:1px solid; font-weight:bold;">Poires</td>
    <td style="border:1px solid; font-weight:bold;">Pommes</td>
    <td style="border:1px solid; font-weight:bold;">Oranges</td>
    <td style="border:1px solid; font-weight:bold;">Kiwis</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
<tr>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">2 kg</td>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">500 g</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
</table>

Poires	Pommes	Oranges	Kiwis	...
1 kg	2 kg	1 kg	500 g	...

Pour centrer un tableau

Le code à copier

<center>
<table>
<tr>
    <td style="border:1px solid; font-weight:bold;">Poires</td>
    <td style="border:1px solid; font-weight:bold;">Pommes</td>
    <td style="border:1px solid; font-weight:bold;">Oranges</td>
    <td style="border:1px solid; font-weight:bold;">Kiwis</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
<tr>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">2 kg</td>
    <td style="border:1px solid; font-weight:bold;">1 kg</td>
    <td style="border:1px solid; font-weight:bold;">500 g</td>
    <td style="border:1px solid; font-weight:bold;">...</td>
</tr>
</table>
</center>

Poires	Pommes	Oranges	Kiwis	...
1 kg	2 kg	1 kg	500 g	...

3. Emojis qui peuvent être utiles

🌐 👉 ⚠️ 🌵 💡 🤔 🌴 😂 🤿 😀 ✏️ 📝 😢 🐘 🖐️ 👓 👗 👖 ⌛ 😊 🖲️ 🏳️ 😴 💻 👀

4. Insérer une image

A partir de Web IDE : Créer un dossier images. Télécharger dans ce dossier les images.

Image à gauche

Le code à copier

![nom image](images/paysage_reduit.jpg){ width=20% }

Par défaut l'image est placée à gauche.

Par défaut l'image est placée à gauche.

Image à droite

Aligner une image à droite

![](images/paysage_reduit.jpg){ width=10%; align=right }

Le texte se place **à gauche** de mon image placée à droite.

Le texte se place à gauche de mon image placée à droite.

3 images côte à côte

Le code à copier

![](images/paysage_reduit.jpg){ width=5% }
![](images/paysage_reduit.jpg){ width=10% }
![](images/paysage_reduit.jpg){ width=15% }

Image centrée

Le code à copier

![paysage](images/paysage_reduit.jpg){ width=10%; : .center }

Le texte se place **en dessous** de l'image centrée.

Le texte se place en dessous de l'image centrée.

Centrer plusieurs images accolées

Le code à copier

<center markdown>
![](images/paysage_reduit.jpg){ width=5% }
![](images/paysage_reduit.jpg){ width=10% }
![](images/paysage_reduit.jpg){ width=15% }
</center>

Image et mode sombre

Vérifier votre dépôt

Pour que cela fonctionne, à la fin du fichier ajustements.css qui se trouve dans le dossier docs/xtra/stylesheets, il faut qu'il y ait les lignes suivantes :

/*
La classe .autolight appliquée aux images
renverse leur couleur en mode "dark
*/

body[data-md-color-scheme^="slate"] img.autolight {
-webkit-filter: invert(1);
filter: invert(1);
}

Tester en passant alternativiement du mode sombre au mode jour grâce à l'icône "passer en mode jour" ou "Passer au mode nuit" située en haut à droite de la page du site.

• Les images au format svg
  GeoGebra par exemple permet d'exporter des images au format svg. Ici, nous avons l'image inverse.svg dans le dossier images.
  Pour qu'elle apparaîsse correctement en mode sombre, il faut ajouter l'option .autolight

Le code à copier

![Fonction inverse](images/inverse.svg){.center .autolight width=30%}

• Les images au format png
  L'option .autolight inverse les couleurs en mode sombre.

Le code à copier

![exemple d'arbre](images/exemple_arbre.png){.center .autolight width=12%}

5. Ecriture de code

Les backticks

Nous utilisons pour cela un ou trois backticks (ou apostrophe inversée). Attention, à ne pas le confondre un backtick avec un guillemet. On le trouve généralement avec les touche ALT GR + è du clavier.

Exemple

🐍 Script Python

for i in range(3):
    print("Hello World")

Toutes les syntaxes

Code au fil d'un texte inline

Le code à copier

La variable `nombres` est de type `list`.

La variable nombres est de type list.

Dans une console Python

Le code à copier

```pycon
>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']
```

🐍 Console Python

>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']

Dans un éditeur Python

Le code à copier

```python
print("Hello World")
```

🐍 Script Python

print("Hello World")

Dans un éditeur Python avec numéros de lignes

Le code à copier

```python linenums='1'
a = 1
b = 2
t = b
b = a
a = t
```

a = 1
b = 2
t = b
b = a
a = t

Coloration syntaxique Python Inline

Le code à copier

Nous allons utiliser le type `#!py list` de Python

Nous allons utiliser le type list de Python

Supprimer les titres au dessus du code avec l'option title=""

Le code à copier

```python title=""
print("Hello World")
```

print("Hello World")

Le code à copier

```pycon title=""
>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']
```

>>> nombres = [3, 8, 7]
>>> fruits = ['Poire', 'Pomme', 'Orange', 'Kiwi']

Le code à copier

```python linenums='1' title=""
a = 1
b = 2
t = b
b = a
a = t
```

a = 1
b = 2
t = b
b = a
a = t

Ajouter des titres au dessus du code avec l'option title="..."

Le code à copier

```python title="Utiliser <code>print</code>"
print("Hello World")
```

Utiliser print

print("Hello World")

6. Les touches du clavier

Une première méthode pour faire apparaître des touches du clavier

Le code à copier

Nous allons utiliser la touche <kbd>%</kbd>

Nous allons utiliser la touche %

Une deuxième méthode pour faire apparaître des touches du clavier

On peut trouver beaucoup de touches ici : Touches du clavier

Voici des exemples d'utilisation :

Le code à copier

++ctrl+alt+del++

++enter++

Ctrl＋Alt＋Del

Enter

7. Des "trous dans le texte"

Les espaces

Pour faire apparaître des espaces dans un texte, mettre des espaces ne suffit pas .

Le code avec espace

Par exemple : Dans la phrase "Je lis un tutoriel." Le verbe "lis" est au                de l'indicatif.

Par exemple : Dans la phrase "Je lis un tutoriel." Le verbe "lis" est au de l'indicatif.

une possibilité pour ajouter des espaces

Le code avec espace

Par exemple : Dans la phrase "Je lis un tutoriel." Le verbe "lis" est au $\hspace{10em}$ de l'indicatif.

Par exemple : Dans la phrase "Je lis un tutoriel." Le verbe "lis" est au \(\hspace{10em}\) de l'indicatif.

II. Les admonitions

Toutes les admonitions ont un titre par défaut. Pour personnaliser un titre, il suffit de le rajouter entre guillemets.

Admonition info

Le code à copier

!!! info "Mon info"

    Ma belle info qui doit être indentée

Mon info

Ma belle info qui doit être indentée

Admonition remarque

Le code à copier

!!! warning "Remarque"

    Ma remarque qui doit être indentée

Remarque

Ma remarque qui doit être indentée

Admonition attention

Le code à copier

!!! danger "Attention"

    texte indenté   

Attention

texte indenté

Admonition note à dérouler

Le code à copier

??? note "se déroule en cliquant dessus"

    Ma note indentée

se déroule en cliquant dessus

Ma note indentée

Admonition astuce à dérouler

Le code à copier

??? tip "Astuce"

    Ma belle astuce indentée

Astuce

Ma belle astuce indentée

Admonition résumé

Le code à copier

!!! abstract "Résumé"

    Mon bilan indenté

Résumé

Mon bilan indenté

Admonition note repliable dépliée

Le code à copier

???+ note dépliée

    Mon texte indenté

Note

Mon texte indenté

Admonition note à cliquer

Le code à copier

??? note pliée "Note à cliquer"

    Mon texte indenté qui se dévoilera après le clic  

Note à cliquer

Mon texte indenté qui se dévoilera après le clic

Admonition échec

Le code à copier

!!! failure "Echec"

    Mon texte indenté

Echec

Mon texte indenté

Admonition bug

Le code à copier

!!! bug "Bug"

    Mon texte indenté

Bug

Mon texte indenté

Admonition exemple

Le code à copier

!!! example "Exemple"

    Mon exemple indenté

Exemple

Mon exemple indenté

Admonition note dans la marge gauche

Le code à copier

!!! note inline "Note à gauche"

    Texte de la note indenté

Le texte non indenté se place à droite de la note.  
Il est en dehors de l'admonition.  
Il doit être assez long  
...

Note à gauche

Texte de la note indenté

Le texte non indenté se place à droite de la note.
Il est en dehors de l'admonition.
Il doit être assez long
...

Admonition note dans la marge droite

Le code à copier

!!! note inline end "Note à droite"

    Texte de la note indenté

Le texte non indenté se place à droite de la note.  
Il est en dehors de l'admonition.  
Il doit être assez long  
...

Note à droite

Texte de la note indenté

Le texte non indenté se place à droite de la note.
Il est en dehors de l'admonition.
Il doit être assez long
...

Admonition exercice

Le code à copier

???+ question "Mon exercice"

    **1.** Question 1.   
    Texte de la question indenté

    ??? success "Solution"

        Ici se trouve la solution rédigée de la question 1.
        Le texte doit être indenté dans cette nouvelle admonition

    **2.** Question 2.   
    Texte de la question indenté

    ??? success "Solution"

        Ici se trouve la solution rédigée de la question 2.
        Le texte doit être indenté dans cette nouvelle admonition

Mon exercice

1. Question 1.
Texte de la question indenté

Solution

Ici se trouve la solution rédigée de la question 1. Le texte doit être indenté dans cette nouvelle admonition

2. Question 2.
Texte de la question indenté

Solution

Ici se trouve la solution rédigée de la question 2. Le texte doit être indenté dans cette nouvelle admonition

Panneaux coulissants

Le code à copier

!!! example "Exemples avec trois panneaux"

    === "Panneau 1"
        Ici du texte concernant ce panneau 1

        Il peut prendre plusieurs lignes

    === "Panneau 2"
        Ici du texte concernant ce panneau 2

        Il peut prendre plusieurs lignes

    === "Panneau 3"
        Ici du texte concernant ce panneau 3

        Il peut prendre plusieurs lignes

        On peut aussi mettre une image : 

        ![nom image](images/paysage_reduit.jpg){ width=20% }

Exemples avec trois panneaux

Panneau 1Panneau 2Panneau 3

Ici du texte concernant ce panneau 1

Il peut prendre plusieurs lignes

Ici du texte concernant ce panneau 2

Il peut prendre plusieurs lignes

Ici du texte concernant ce panneau 3

Il peut prendre plusieurs lignes

On peut aussi mettre une image :

III. Faire des liens

Ce qui est entre crochets comme [link text] est personnalisable.

1. Liens externes

Lien externe sans bouton

Le code à copier

[Additionner des fractions](https://coopmaths.fr/alea/?uuid=b51ec&id=2N30-2&v=eleve&es=021100&title=)

Additionner des fractions

Lien externe sans bouton dans une autre fenêtre

Le code à copier

[Additionner des fractions](https://coopmaths.fr/alea/?uuid=b51ec&id=2N30-2&v=eleve&es=021100&title=){:target="_blank" }

Additionner des fractions

Lien externe avec bouton dans une autre fenêtre

Le code à copier

[Additionner des fractions](https://coopmaths.fr/alea/?uuid=b51ec&id=2N30-2&v=eleve&es=021100&title=){ .md-button target="_blank" rel="noopener" }

Additionner des fractions

Bug avec l'utilisation du caractère _ pour l'ouverture d'un lien dans une autre fenêtre

Actuellement, l'utilisation de {:target="_blank" } ou de { .md-button target="_blank" rel="noopener" } est incompatible avec l'utilisation du caractère _ (par exemple pour écrire en italique) avant ou après le lien, s'il n'y a pas de saut de ligne.

Le code utilisé

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . Une _source_ en ligne.

wikipédia{: target="blank" } . Une _source en ligne.

Solution 1 : mettre en italique avec *

Le code utilisé avec `*` au lieu de `_`

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . 
Une *source* en ligne.

wikipédia. Une source en ligne.

Solution 2 : sauter une ligne

Le code utilisé avec ajout de ligne vide

[wikipédia](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal){: target="_blank" } . 

Une _source_ en ligne.

wikipédia.

Une source en ligne.

2. Liens internes

Lien vers un article du même répertoire

Lien vers le fichier 3_mon_article.md du même répertoire.

Le code à copier

[Mon article](3_mon_article.md)

Mon article

Lien vers un article du répertoire parent du répertoire courant

Lien vers le fichier ajouts.md.

Le code à copier

[Ajouts](../ajouts.md)

Ajouts

Lien vers un article d’un sous-répertoire du répertoire courant

Lien vers le fichier mon_article.md du sous-répertoire directory. (ne fonctionne pas sur ce site)

Le code à copier

[link text](directory/mon_article.md)

link text

Lien vers un article d’un sous-répertoire du répertoire parent du répertoire actif

Lien vers le fichier erreurs_frequentes.md du sous-répertoire erreurs du répertoire parent du répertoire actif.

Le code à copier

[FAQ et erreurs fréquentes](../erreurs/erreurs_frequentes.md)

FAQ et erreurs fréquentes

Lien plus précis vers un paragraphe d'un article

Il suffit de compléter le chemin. Pour ne pas se tromper, il est conseillé de recopier la fin de l'URL du rendu du paragraphe que l'on désire.

⚠️ Ne pas oublier l'extension .md de la page dans laquelle se trouve le paragraphe.

Par exemple pour faire un lien dans ce tutoriel vers le paragraphe "En chimie" de la page : "Formules de mathématiques et chimie"

L'URL du rendu est : https://docs.forge.apps.education.fr/modeles/tutoriels/tutoriel-site-simple/latex/formules_latex/#en-chimie

Le code à copier

[Formules de chimie](../latex/formules_latex.md/#en-chimie)

Formules de chimie

3. Liens de téléchargements de fichiers

Mettre le fichier file_telecharger dans un dossier a_telecharger. Bien indiquer le bon chemin comme dans l'exemple ci-dessous

Mon fichier à donner en téléchargement

Le code à copier

🌐 Fichier à télécharger :

Fichier `file_telecharger` : [Clic droit, puis "Enregistrer la cible du lien sous"](a_telecharger/file_telecharger)

🌐 Fichier à télécharger :

Fichier file_telecharger : Clic droit, puis "Enregistrer la cible du lien sous"

IV. Insertion de vidéo

Insérer une vidéo en ligne

Le code à copier

<video controls src="https: ..."></video>

Exemple :

Le code à copier

<video controls src="https://upload.wikimedia.org/wikipedia/commons/d/d2/See_a_Koala_scratch%2C_yawn_and_sleep.webm"></video>

_Source : Paolo Leone: https://www.youtube.com/channel/UCFRQrtHw36NNpX1oXpHMfRw, CC BY-SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0>, via Wikimedia Commons_

Source : Paolo Leone: https://www.youtube.com/channel/UCFRQrtHw36NNpX1oXpHMfRw, CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0, via Wikimedia Commons

👉 Il suffit le plus souvent de recopier le code qui est proposé dans "partager" et "intégrer" de la vidéo que l'on veut mettre.

Exemple d'une vidéo de Portail tubes de apps.education.fr

HTML

<iframe title="Présentation de CodiMD (et du code Markdown) en moins de 2 minutes" width="560" height="315" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

V. QCM

Créer un QCM interactif avec validation, explications, score et rechargement

Il faut créer un fichier avec l'extension .json, par exemple nommé mon_qcm.json qui contient tout le QCM avec les différentes options souhaitées.

👉 Pour créer très facilement de façon automatique ce fichier, suivre ce lien : Création de QCM : générer le fichier .json automatiquement.

👉 On peut remplir les champs en écrivant en Markdown, et donc y inclure du code, des images, des formules écrites en LaTex, des graphes ...

Les champs "Remarque" sont facultatifs. Ils peuvent contenir des explications, ou la solution. Ces champs seront révélés après la validation du QCM.

Une fois tous les champs remplis (on peut agrandir les zones d'écritures en les étirant en bas à droite), il suffit de récupérer le fichier fourni grâce aux deux boutons situés en bas.

Le fichier doit ensuite être placé dans le répertoire du fichier markdown où l'on veut insérer le QCM (ou dans un sous-répertoire), et il suffira alors d'ajouter la macro suivante au fichier markdown :

Le code à copier

{{ multi_qcm('mon_qcm.json') }}

👉 Le chemin vers le fichier .json dans l’appel de macro est relatif au dossier contenant le fichier markdown.
Par exemple si le fichier json se trouve dans le sous-dossier ./qcms/mon_qcm.json, mettre :

Le code à copier

{{ multi_qcm('qcms/mon_qcm.json') }}

Un exemple

Le fichier Json présenté ci-dessous a été généré avec l'outil en ligne de la documentation de Pyodide-MkDocs-Theme, en remplissant les champs comme ceci :

Détails de l'utilisation de l'outil

Question 1

Question 2

Question 3

Question 4

Question 5

Options

Fichier Json généré automatiquement par l'outil en ligne et utilisé pour cet exemple

Le fichier Json utilisé contient le code suivant :

qcm_tuto.json

{
"questions": [
    [
    "Qui est représenté sur cette image ?\n\n![Ada Lovelace](images/Ada_lovelace.jpg){ width=20% }\n\n_Attribution : Alfred Edward Chalon, Public domain, via Wikimedia Commons_",
    [
        "Ada Lovelace",
        "Marie Curie",
        "Rosalind Franklin",
        "Katherine Johnson"
    ],
    [1]
    ],
    [
    "Résoudre l'équation $x^2 = 16$.",
    [
        "Il y a une seule solution $x=4$",
        "Il y a deux solutions $x=4$ et $x=-4$",
        "Il y a une seule solution $x=8$"
    ],
    [2],
    "* $4^2=16$ et $(-4)^2=16$\n* $8^2=64$"
    ],
    [
    "On donne le graphe suivant : \n\n```mermaid\n    graph LR\n        A --- |1| B\n        B --- |5| C\n        A --- |5| D\n        B --- |1| D\n        D --- |1| C\n        A --- |50| C\n```\n\nQuel est le plus court chemin entre A et C en terme de coût ?",
    [
        "A-B-C",
        "A-B-D-C",
        "A-C"
    ],
    [2],
    "A-B-C a un coût de 6, A-B-D-C a un coût de 3 et A-C a un coût de 50."
    ],
    [
    "```python title=\"\"\nn = 8\nwhile n > 1:\n    n = n/2\n```\n\nQue vaut `n` après l'exécution du code ?\n",
    [
        "0.5",
        "1",
        "2",
        "4"
    ],
    [2]
    ],
    [
    "On donne le graphe suivant :\n\n```mermaid\n    graph TD\n    D(Henri IV)\n    E(Maria de Medicis)\n    F(Felipe III d'Espagne)\n    G(Margareta d'Autriche)\n    B(Louis XIII)\n    C(Anna d'Autriche)\n    A(Louis XIV)\n    D --- B\n    E --- B\n    F --- C\n    G --- C\n    B --- A\n    C --- A\n```\n\nQuelles sont les affirmations exactes ?\"",
    [
        "Henri IV est un grand père de Louis XIV.",
        "Maria de Medicis est la mère de Louis XIV.",
        "Anna d'Autriche est la mère de Louis XIV."
    ],
    [1,3],
    {"multi":true}
    ]
],
"description": "questions variées pour un exemple de QCM",
"shuffle_items": true
}

Une fois le fichier placé dans le répertoire du fichier Markdown, le QCM est inséré dans la page avec l'appel suivant :

Le code à copier

{{ multi_qcm('qcm_tuto.json') }}

Questions

questions variées pour un exemple de QCM

1. Qui est représenté sur cette image ?

   

   Attribution : Alfred Edward Chalon, Public domain, via Wikimedia Commons

   • Ada Lovelace

   • Marie Curie

   • Rosalind Franklin

   • Katherine Johnson

2. Résoudre l'équation \(x^2 = 16\).
   • Il y a une seule solution \(x=4\)

   • Il y a deux solutions \(x=4\) et \(x=-4\)

   • Il y a une seule solution \(x=8\)

   Remarque

   .eha^= ur4cxp)-618tlsi2/(mn050g0s0406050s0u04050t0l0c0z0f0j0s0c0t0t0e010c0h0u0r0b0y0c0r0a0k0104090x0i0d0v0e0p0o090m050w0K0M040f0a0r0f0J0L0N0P0R0T0V0X0Z0#0%0)0+0x0x0n0i0m0/0;0?0^0`130I0w0G0D0F0H120M0O0Q0S0U0W0Y0!0$0(0*0,0q1k0o0i0@0_0{0z1q1s0E0w0B04.
3. On donne le graphe suivant :

       graph LR
           A --- |1| B
           B --- |5| C
           A --- |5| D
           B --- |1| D
           D --- |1| C
           A --- |50| C

   Quel est le plus court chemin entre A et C en terme de coût ?

   • A-B-C

   • A-B-D-C

   • A-C

   Remarque

   .eCao uDc.Bdp-û65t03/,An050l040v0m0j0m0b0e0c0e0f0w0e0h0d0n0q0e0k0a0e0o0u0e0A0C0g0D0F0H0J0L0N0P0R0s0e0a0O0A0E0G0I0K0M0O0Q0e0p0r0i050t0y.

4. n = 8
   while n > 1:
       n = n/2
   

   Que vaut n après l'exécution du code ?

   • 0.5

   • 1

   • 2

   • 4

5. On donne le graphe suivant :

       graph TD
       D(Henri IV)
       E(Maria de Medicis)
       F(Felipe III d'Espagne)
       G(Margareta d'Autriche)
       B(Louis XIII)
       C(Anna d'Autriche)
       A(Louis XIV)
       D --- B
       E --- B
       F --- C
       G --- C
       B --- A
       C --- A

   Quelles sont les affirmations exactes ?"

   • Henri IV est un grand père de Louis XIV.

   • Maria de Medicis est la mère de Louis XIV.

   • Anna d'Autriche est la mère de Louis XIV.

Attention aux réponses

Lors de la création du QCM avec l'outil en ligne, il ne faut pas oublier de cocher la ou les bonnes réponses, sinon le pipeline sera mis en échec.

Attention pour les images

Lorsqu'une image est utilisée, il faut absolument donner l'option de sa taille avec le % comme par exemple { width=50% }. Si cette option n'est pas indiquée le rendu du QCM sur smartphone ou tablette risque de ne pas être correct.

Tout sur les QCM

Documentation officielle pour les QCM

Barrer des réponses fausses

Mettre un texte entre ~~ et ~~ permet de le barrer.

Créer un QCM non interactif avec des volets

Le code à copier

???+ question

    Voici diverses propositions

    === "Cocher la ou les affirmations correctes"

        - [ ] Proposition 1
        - [ ] Proposition 2
        - [ ] Proposition 3
        - [ ] Proposition 4

    === "Solution"

        - :x: ~~Proposition 1~~ Optionnel : Faux car ... 
        - :white_check_mark: Proposition 2 . Optionnel : Juste car ...
        - :white_check_mark: Proposition 3 . Optionnel : Juste car ...
        - :x: ~~Proposition 4~~ Optionnel : Faux car ... 

Question

Voici diverses propositions

Cocher la ou les affirmations correctesSolution

• Proposition 1
• Proposition 2
• Proposition 3
• Proposition 4

• Proposition 1 Optionnel : Faux car ...
• Proposition 2 . Optionnel : Juste car ...
• Proposition 3 . Optionnel : Juste car ...
• Proposition 4 Optionnel : Faux car ...

VI. Exercices en lignes

Des exercices en ligne

Il existe beaucoup d'exercices en ligne, il suffit de donner le lien (par exemple MathALEA : générer des exercices de maths )

Bouton de lien vers un exercice

Le code à copier

???+ question "Les fractions"

    Manipuler les fractions :

    [Additionner ou soustraire des fractions](https://coopmaths.fr/alea/?uuid=b51ec&id=2N30-2&alea=vzyN&v=eleve&es=021100){ .md-button target="_blank" rel="noopener" }

Les fractions

Manipuler les fractions :

Additionner ou soustraire des fractions

VII. Les arbres

Il suffit de numéroter les noeuds : n0, n1, n2 etc. avec les étiquettes entre parenthèses, et les flèches pour les arcs entre les noeuds. En 1er à gauche.

Un arbre

Le code à copier

```mermaid
    %%{init: {'themeVariables': {'fontFamily': 'monospace'}}}%%
    flowchart TB
        n0(15) --> n1(6)
        n1 --> n3(1)
        n1 --> n4(10)
        n0 --> n2(30)
        n2 --> n8[Null]
        n2 --> n5(18)
        n5 --> n6(16)
        n5 --> n7(25)
```

    %%{init: {'themeVariables': {'fontFamily': 'monospace'}}}%%
    flowchart TB
        n0(15) --> n1(6)
        n1 --> n3(1)
        n1 --> n4(10)
        n0 --> n2(30)
        n2 --> n8[Null]
        n2 --> n5(18)
        n5 --> n6(16)
        n5 --> n7(25)

Arbres avec certains nœuds absents

Voir l'exemple qui suit :

• On numérote l'arc à ne pas représenter (le 1er est le numéro 0), et on utilise par exemple pour le numéro 3 la syntaxe :
  linkStyle 3 stroke-width:0px;
• On met les nœuds vides avec opacity:0 :
  style E opacity:0;

Des nœuds absents mais leur espace conservé

Le code à copier

```mermaid
flowchart TD
    A(12) --- B(10)
    A --- C(15)
    B --- D(5)
    B --- E( )
    D --- F(4)
    D --- G(8)
    C --- H( )
    C --- I(20)
    linkStyle 3 stroke-width:0px;
    linkStyle 6 stroke-width:0px;
    style E opacity:0;
    style H opacity:0;
```

flowchart TD
    A(12) --- B(10)
    A --- C(15)
    B --- D(5)
    B --- E( )
    D --- F(4)
    D --- G(8)
    C --- H( )
    C --- I(20)
    linkStyle 3 stroke-width:0px;
    linkStyle 6 stroke-width:0px;
    style E opacity:0;
    style H opacity:0;

Placement des nœuds définis

Dans le cas des arbres binaires de recherche par exemple, on a besoin que les nœuds soient représentés dans un ordre bien précis. Il suffit pour cela de les donner dans le code mermaid dans l'ordre de ce qui serait le parcours en largeur de l'arbre (par niveau).

Le code à copier

```mermaid
graph TD
A(5)
B(2)
C(8)
F( )
G( )
D(6)
E(9)
H( )
I( )
J( )
K( )
A --> B
A --> C
C --> D
C --> E
B --> F
B --> G
D --> H
D --> I
E --> J
E --> K
```

graph TD
A(5)
B(2)
C(8)
F( )
G( )
D(6)
E(9)
H( )
I( )
J( )
K( )
A --> B
A --> C
C --> D
C --> E
B --> F
B --> G
D --> H
D --> I
E --> J
E --> K

Lien vers différentes options de nœuds et flèches

lien vers la documentation mermaid - essais en ligne de mermaid

Un arbre horizontal

Le code à copier

```mermaid
graph LR
    A( )
    B(0)
    C(1)
    D(0)
    E(1)
    F(0)
    G(1)
    A --- B
    A --- C
    B --- D
    B --- E
    C --- F
    C --- G
```

graph LR
    A( )
    B(0)
    C(1)
    D(0)
    E(1)
    F(0)
    G(1)
    A --- B
    A --- C
    B --- D
    B --- E
    C --- F
    C --- G

Un arbre horizontal avec des formules de mathématiques sur les branches

Il suffit d'écrire les formules en LaTex à l'intérieur de "$$...$$"

Le code à copier

```mermaid
graph LR
    O( )
    A(A)
    B(B)
    C(C)
    E(X)
    F(Y)
    G(X)
    H(Y)
    I(X)
    J(Y)
    O ---|"$$P(A)$$"| A 
    O ---|"$$P(B)$$"| B
    O ---|"$$P(C)$$"| C
    A ---|"$$P_{A}(X)$$"| E
    A ---|"$$P_{A}(Y)$$"| F
    B ---|"$$P_{B}(X)$$"| G
    B ---|"$$P_{B}(Y)$$"| H
    C ---|"$$P_{C}(X)$$"| I
    C ---|"$$P_{C}(Y)$$"| J
```

graph LR
    O( )
    A(A)
    B(B)
    C(C)
    E(X)
    F(Y)
    G(X)
    H(Y)
    I(X)
    J(Y)
    O ---|"$$P(A)$$"| A 
    O ---|"$$P(B)$$"| B
    O ---|"$$P(C)$$"| C
    A ---|"$$P_{A}(X)$$"| E
    A ---|"$$P_{A}(Y)$$"| F
    B ---|"$$P_{B}(X)$$"| G
    B ---|"$$P_{B}(Y)$$"| H
    C ---|"$$P_{C}(X)$$"| I
    C ---|"$$P_{C}(Y)$$"| J

Un arbre horizontal avec des formules de mathématiques dans les nœuds

Il suffit d'écrire les formules en LaTex à l'intérieur de "$$...$$"

Le code à copier

```mermaid
graph LR
    0( )
    1("$$A$$")
    2("$$\overline{A}$$")
    3("$$B$$")
    4("$$\overline{B}$$")
    5("$$B$$")
    6("$$\overline{B}$$")
    0 --- |"0,1"| 1
    0 --- |"0,9"| 2
    1 --- 3
    1 --- 4
    2 --- 5
    2 --- 6
```

graph LR
    0( )
    1("$$A$$")
    2("$$\overline{A}$$")
    3("$$B$$")
    4("$$\overline{B}$$")
    5("$$B$$")
    6("$$\overline{B}$$")
    0 --- |"0,1"| 1
    0 --- |"0,9"| 2
    1 --- 3
    1 --- 4
    2 --- 5
    2 --- 6

Créer des graphes ou des arbres très facilement avec algographe

Le site créé par Frédéric Zinelli permet facilement de créer des graphes ou des arbres.

L'outil algographe en ligne

La documentation de l'outil algographe

VIII. Les graphes

graphe orienté

Le code à copier

``` mermaid
    graph LR
    A[texte 1] ----> |50| C[texte 2];
    A -->|1| B[B];
```

    graph LR
    A[texte 1] ----> |50| C[texte 2];
    A -->|1| B[B];

graphe orienté horizontal

Le code à copier

``` mermaid
    graph LR
        A[Editeur de texte PHP] --> C[Serveur Apache]
        C --> B[Navigateur]
```

    graph LR
        A[Editeur de texte PHP] --> C[Serveur Apache]
        C --> B[Navigateur]

graphe non orienté

Le code à copier

```mermaid
    graph LR
        A ---|1| B
        B ---|5| C
        A ---|5| D
        B ---|1| D
        D ---|1| C
        A ---|50| C
```

    graph LR
        A ---|1| B
        B ---|5| C
        A ---|5| D
        B ---|1| D
        D ---|1| C
        A ---|50| C

graphe orienté avec des nœuds circulaires ou carrés

Le code à copier

```mermaid
    graph LR
        A[Fichier] --> D((D))
        D --> C[Clavier]
        C --> B((B))
        B --> A
```

    graph LR
        A[Fichier] --> D((D))
        D --> C[Clavier]
        C --> B((B))
        B --> A

Lien vers différentes options de nœuds et flèches

lien vers la documentation mermaid - essais en ligne de mermaid

Créer des graphes ou des arbres très facilement avec algographe

Le site créé par Frédéric Zinelli permet facilement de créer des graphes ou des arbres.

L'outil algographe en ligne

La documentation de l'outil algographe

IX. Masquer le menu latéral

Masquer le menu latéral sur une page

Pour masquer le menu latéral, et ainsi gagner de la place en largeur, il suffit de compléter l'en-tête de la page comme par exemple ci-dessous.

Le code à copier

---
author: Votre nom
title: Ma page
hide:
    - navigation
    - toc
---

Un exemple ici : Une page avec menu latéral caché