Tout pour créer une page

Attention aux indentations

Les indentations de 4 espaces peuvent être réalisé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 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	...

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ôtes à côtes

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.

Image et mode sombre

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%}

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.

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']
```

Python Console Session

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

Dans un éditeur Python

Le code à copier

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

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

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 : `a == 3` est                 booléenne.

Par exemple : a == 3 est booléenne.

une possibilité pour ajouter des espaces

Le code avec espace

Par exemple : `a == 3` est $\hspace{10em}$ booléenne.

Par exemple : a == 3 est \(\hspace{10em}\) booléenne.

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 remarque repliée

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 attention repliée

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

Voir le VI. Exercice suivi d'une solution qui se découvre en cliquant

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

[Exercices Python en ligne](https://codex.forge.apps.education.fr/)

Exercices Python en ligne

Lien externe sans bouton dans une autre fenêtre

Le code à copier

[Exercices Python en ligne](https://codex.forge.apps.education.fr/){:target="_blank" }

Exercices Python en ligne

Lien externe avec bouton dans une autre fenêtre

Le code à copier

[Exercices Python en ligne](https://codex.forge.apps.education.fr/){ .md-button target="_blank" rel="noopener" }

Exercices Python en ligne

2. Liens internes

Lien vers un article du même répertoire

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

Le code à copier

[link text](mon_article.md)

link text

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

Lien vers le fichier mon_article.md.

Le code à copier

[Mon lien](../mon_article.md)

Mon lien

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.

Le code à copier

[link text](directory/mon_article.md)

link text

👉 Le suivant est le seul qui fonctionne ici :

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

Lien vers le fichier exercices.md du sous-répertoire 03_ecrire_exos du répertoire parent du répertoire actif.

Le code à copier

[Ecrire des exercices](../03_ecrire_exos/exercices.md)

Ecrire des exercices

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

Barrer des réponses fausses

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

Créer un QCM 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 ...

Créer un QCM avec validation, rechargement et score : un premier exemple

Le code à copier

{{ multi_qcm(
["Compléter : $2^3=$", ["9", "8", "Je ne sais pas", "6"],[2],],
multi = False,
qcm_title = "Puissances",
shuffle = True,
)  }}

Puissances

• Compléter : \(2^3=\)
  • 9

  • 8

  • Je ne sais pas

  • 6

Le principe

Chaque question est une liste contenant : l'énoncé, une liste des réponses à choisir, une liste des réponses justes numérotées à partir de 1, et éventuellement la donnée du fait qu'il y ait plusieurs réposes possibles ou pas.

Après les questions on trouve des options de réglage du QCM complet. shuffle = True mélange toutes les questions et toutes les réponses proposées à chaque rechargement du QCM.

Un piège avec les guillemets

Toutes les questions et toutes les réposes sont des chaines de caractères entre " ... ". ou entre """ ... """ si elles prennent plusieurs lignes.

Il ne faut donc absolument pas utiliser de " dans les questions et réponses.

Pour utiliser des guillemets, il faudra absolument utiliser des guillemets à simple côte : '

Un piège avec les formules de maths

Les opérateurs LaTex utilisant un échappement de caractère devront être eux-mêmes échappés : "$3 \\times 5$"

Admonition

Il est inutile de mettre le QCM dans une admonition, car cela se fait automatiquement : voir le rendu ci-dessous.

Exemple avec des énoncés ou réponses multi-lignes proposé par frédéric Zinelli

Le code à copier

{{ multi_qcm(
    [
"""
On a saisi le code suivant :
```python title=''
n = 8
while n > 1:
    n = n/2
```

Que vaut `n` après l'exécution du code ?
""",
        [
            "2.0",
            "4.0",
            "1.0",
            "0.5",
        ],
        [3]
    ],
    [
        "Quelle est la machine qui va exécuter un programme JavaScript inclus dans une page HTML ?",
        [
            "La machine de l’utilisateur sur laquelle s’exécute le navigateur web.",
            "La machine de l’utilisateur ou du serveur, selon celle qui est la plus disponible.",
            "La machine de l’utilisateur ou du serveur, suivant la confidentialité des données manipulées.",
            "Le serveur web sur lequel est stockée la page HTML."
        ],
        [1],
    ],
    [
"""
Cocher toutes les bonnes réponses
```python title=''
meubles = ['Table', 'Commode', 'Armoire', 'Placard', 'Buffet']
```
""",
        [
            "`#!py meubles[1]` vaut `#!py Table`",
            "`#!py meubles[1]` vaut `#!py Commode`",
            "`#!py meubles[4]` vaut `#!py Buffet`",
            "`#!py meubles[5]` vaut `#!py Buffet`",
        ],
        [2, 3],
        {'multi':True}
    ],
    multi = False,
    qcm_title = "Un QCM avec mélange automatique des questions (bouton en bas pour recommencer)",
    shuffle = True,
) }}

Un QCM avec mélange automatique des questions (bouton en bas pour recommencer)

1. On a saisi le code suivant :

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

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

   • 2.0

   • 4.0

   • 1.0

   • 0.5

2. Quelle est la machine qui va exécuter un programme JavaScript inclus dans une page HTML ?
   • La machine de l’utilisateur sur laquelle s’exécute le navigateur web.

   • La machine de l’utilisateur ou du serveur, selon celle qui est la plus disponible.

   • La machine de l’utilisateur ou du serveur, suivant la confidentialité des données manipulées.

   • Le serveur web sur lequel est stockée la page HTML.

3. Cocher toutes les bonnes réponses

   meubles = ['Table', 'Commode', 'Armoire', 'Placard', 'Buffet']
   

   • meubles[1] vaut Table

   • meubles[1] vaut Commode

   • meubles[4] vaut Buffet

   • meubles[5] vaut Buffet

Tout sur les QCM

Documentation officielle pour les QCM

VI. Exercice suivi d'une solution qui se découvre en cliquant

1. Exercice sans code

Exercice sans code Python

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

2. Exercice avec code : un tout premier exemple

Un IDE avec du code à compléter

Le code à copier

???+ question

    Compléter le script ci-dessous :
    Mettre le fichier python dans un dossier scripts


    {{ IDE('scripts/mon_fichier') }}


    ??? success "Solution"

        On peut donner la solution sous forme de code à copier :
        ```python
        # Code de la solution
        ```       

Question

Compléter le script ci-dessous : Mettre le fichier python dans un dossier scripts

###(Dés-)Active le code après la ligne # Tests (insensible à la casse)
(Ctrl+I)

Entrer ou sortir du mode "deux colonnes"
(Ctrl+Clic pour inverser les colonnes)

Entrer ou sortir du mode "plein écran"

Tronquer ou non le feedback dans les terminaux (sortie standard & stacktrace / relancer le code pour appliquer)

Si activé, le texte copié dans le terminal est joint sur une seule ligne avant d'être copié dans le presse-papier

Exécuter le code
(Ctrl+S)TéléchargerTéléverserRéinitialiser l'éditeurSauvegarder dans le navigateur

Solution

On peut donner la solution sous forme de code à copier :

Python

# Code de la solution

3. D'autres exemples

Pour en savoir plus, voir la rubrique Ecrire des exercices

Vous y trouverez des exemples d'exercices avec des réponses dans des IDE, qui peuvent s'afficher après plusieurs tentatives de l'élève, et plein d'autres possibilités.

VII. Notebooks pythons : sujet à télécharger et corrections cachées ou visibles

On peut évidemment mettre en ligne un Notebook Python, et faire travailler les élèves dessus.

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

Mon sujet sur notebook à télécharger avec correction cachée

Le code à copier

???+ question "Mon sujet sur notebook à télécharger avec correction cachée"

    Après avoir téléchargé le fichier, vous pourrez le lire à partir de [Basthon](https://notebook.basthon.fr/){ .md-button target="_blank" rel="noopener" }

    🌐 TD à télécharger : Fichier `mon_fichier_sujet.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_sujet.ipynb)

    ⏳ La correction viendra bientôt ... 

<!--- La correction à télécharger plus tard A SORTIR DE L'ADMONITION
👉 Bien sortir ce commentaire de l'admonition en supprimant l'indentation
🌐 Fichier `mon_fichier_corr.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_corr.ipynb)
-->

Mon sujet sur notebook à télécharger avec correction cachée

Après avoir téléchargé le fichier, vous pourrez le lire à partir de Basthon

🌐 TD à télécharger : Fichier mon_fichier_sujet.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

⏳ La correction viendra bientôt ...

Si l'on veut dévoiler la correction, il suffit de supprimer la syntaxe qui la cachait dans un commentaire.

Mon sujet sur notebook à télécharger avec correction visible

Le code à copier

???+ question "Mon sujet sur notebook à télécharger avec correction visible"

    Après avoir téléchargé le fichier, vous pourrez le lire à partir de [Basthon](https://notebook.basthon.fr/){ .md-button target="_blank" rel="noopener" }

    🌐 TD à télécharger : Fichier `mon_fichier_sujet.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_sujet.ipynb)

    🌐 Correction à télécharger : Fichier `mon_fichier_corr.ipynb` : ["Clic droit", puis "Enregistrer la cible du lien sous"](a_telecharger/mon_fichier_corr.ipynb)

Mon sujet sur notebook à télécharger avec correction visible

Après avoir téléchargé le fichier, vous pourrez le lire à partir de Basthon

🌐 TD à télécharger : Fichier mon_fichier_sujet.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

🌐 Correction à télécharger : Fichier mon_fichier_corr.ipynb : "Clic droit", puis "Enregistrer la cible du lien sous"

VIII. Exercices en lignes

Il existe beaucoup d'exercices en ligne, il suffit de donner le lien (par exemple sur le site CodEx )

Bouton de lien vers un exercice

Le code à copier

???+ question "Lectures dans deux tableaux (1) - non guidé"

    Les éléments d'un tableau sont-ils tous différents ?

    [Éléments tous différents](https://codex.forge.apps.education.fr/exercices/tous_differents/){ .md-button target="_blank" rel="noopener" }

Lectures dans deux tableaux (1) - non guidé

Les éléments d'un tableau sont-ils tous différents ?

Éléments tous différents

IX. Ecriture de code : compléments

Annotations première présentation

Attention

Bien veiller à mettre une ligne vide après la balise fermante ``` et avant les annotations numérotées

L'exemple suivant est donné avec Python, mais peut servir avec n'importe quel langage (avec html par exemple)

Le code à copier

```python 
note = float(input("Saisir votre note : "))
if note >= 16:  # (1)
    print("TB")
elif note >= 14:  # (2)
    print("B")
elif note >= 12:  # (3)
    print("AB")
elif note >= 10:
    print("reçu")
else:
    print("refusé")
```

1. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. :warning: `elif` signifie **sinon si**.

3. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

!!! warning "Prenez le temps de lire les commentaires (cliquez sur les +)"

Python

note = float(input("Saisir votre note : "))
if note >= 16:  # (1)
    print("TB")
elif note >= 14:  # (2)
    print("B")
elif note >= 12:  # (3)
    print("AB")
elif note >= 10:
    print("reçu")
else:
    print("refusé")

1. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. elif signifie sinon si.

3. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Prenez le temps de lire les commentaires (cliquez sur les +)

Annotations autre présentation

Le code à copier

!!! warning inline end "Important"

    Prenez le temps de lire les commentaires !

    Cliquez sur les +


```python
    note = float(input("Saisir votre note : "))
    if note >= 16:  # (1)
        print("TB")
    elif note >= 14:  # (2)
        print("B")
    elif note >= 12:  # (3)
        print("AB")
    elif note >= 10:
        print("reçu")
    else:
        print("refusé")
```

1. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. :warning: `elif` signifie **sinon si**.

3. :warning: Le caractère `#!py :` est **obligatoire** après `if`, `elif`, `else`, `for` et `while`. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Important

Prenez le temps de lire les commentaires !

Cliquez sur les +

Python

    note = float(input("Saisir votre note : "))
    if note >= 16:  # (1)
        print("TB")
    elif note >= 14:  # (2)
        print("B")
    elif note >= 12:  # (3)
        print("AB")
    elif note >= 10:
        print("reçu")
    else:
        print("refusé")

1. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

2. elif signifie sinon si.

3. Le caractère : est obligatoire après if, elif, else, for et while. Il provoque l'indentation automatique du bloc d'instruction qui suit.

Surlignage de lignes de code

Vous pouvez surligner des lignes, consécutives ou non, en couleur.

Le code à copier

```python hl_lines="1 3-5"
def trouve_max(tableau):
    maximum = tableau[0]
    for valeur in tableau:
        if valeur > maximum:
            maximum = valeur
    return maximum
```

Python

def trouve_max(tableau):
    maximum = tableau[0]
    for valeur in tableau:
        if valeur > maximum:
            maximum = valeur
    return maximum

X. 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

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

XI. 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

XII. Les classes

Une classe

Le code à copier

```mermaid
    classDiagram
    class Yaourt{
        str arome
        int duree
        str genre
        __init__(arome,duree)
        modifie_duree(duree)
        modifie_arome(arome)
    }
```

    classDiagram
    class Yaourt{
        str arome
        int duree
        str genre
        __init__(arome,duree)
        modifie_duree(duree)
        modifie_arome(arome)
    }

lien vers la documentation mermaid - essais en ligne de mermaid