Titre de la page 2 #

Ceci est une “teaser video” : une vidéo qui se lance automatiquement quand on arrive sur la page, muette, et sans contrôles visibles.

Titre de niveau 2 #

Titre de niveau 3 #

Titre de niveau 4 #

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.

Formattage du texte #

Ceci est un texte en italique.

Ceci est un texte en gras.

Ceci est un texte en gras italique.

Ceci est une citation.

Elle peut être sur plusieurs lignes. Elle peut être sur plusieurs lignes. Elle peut être sur plusieurs lignes. Elle peut être sur plusieurs lignes.

Emojis #

📌 Une note qui demande à être approfondie

📚 Une référence à étudier pour aller plus loin

⇒ Implication de la ligne précédente

Hints #

Bonne pratique #

Code

{{< bonne_pratique >}}
Il faut faire ceci, c'est une bonne pratique.
{{< /bonne_pratique >}}

Affichage

À noter #

Code

{{< a_noter >}}
Il faut noter ceci !!!
{{< /a_noter >}}

Affichage

Pour aller plus loin #

Code

{{< aller_plus_loin >}}
Approndissement optionel de la notion.
{{< /aller_plus_loin >}}

Affichage

Notion avancée #

Code

{{< notion_avancee >}}
Il s'agit d'une notion avancée.
{{< /notion_avancee >}}

Affichage

Attention #

Code

{{< attention >}}
Il faut faire attention à ce point en particulier.
{{< /attention >}}

Affichage

À éviter #

Code

{{< a_eviter >}}
Il ne faut surtout pas faire ceci !!!
{{< /a_eviter >}}

Affichage

À faire #

Code

{{< a_faire >}}
- Serie 1
- TP 1 : parties 1, 2 et 3
- TP 2 : parties 1, 2 et 3
{{< /a_faire >}}

Affichage

Images #

Avec une image dans le répertoire local static/images #

Code

{{< figure src="/images/AE_Fork.png#center" width="100%" >}}

Affichage

Avec une image sur le web #

Boutons #

Tabs #

UML Diagrams (avec PlantUML) #

Le code PlantUML doit être placé entre les balises {{< plantuml >}} et {{< /plantuml >}}.

Exemple de diagrammes PlantUML #

Code

{{< plantuml id="eg1" >}}
@startuml
skin rose
skinparam classAttributeIconSize 0
class Hero {
   - strength : int
   - agility : int
   - intelligence : int
   - hp : double
   - name : std::string

   + show() : void
   + interact(const Hero &) : void
   + getAgility(): int
}
@enduml
{{< /plantuml >}}

Affichage

LaTeX #

Il suffit de mettre le code LaTeX entre les balises {{< katex >}} et {{< /katex >}}.

Quelques exemples #

Code

{{< katex >}}\alpha \beta \gamma \rho \delta \epsilon{{< /katex >}}

Affichage

\(\alpha \beta \gamma \rho \delta \epsilon\)

Code

{{< katex >}}\Alpha \Beta \Gamma \Rho \Delta \Epsilon{{< /katex >}}

Affichage

\(\Alpha \Beta \Gamma \Rho \Delta \Epsilon\)

Code

{{< katex >}}\times \otimes \oplus \cup \cap{{< /katex >}}

Affichage

\( \times \otimes \oplus \cup \cap\)

Code

{{< katex >}}\sum_{i=1}^{\infty} \frac{1}{n^s} = \prod_p \frac{1}{1 - p^{-s}}{{< /katex >}}

Affichage

\( \sum_{i=1}^{\infty} \frac{1}{n^s} = \prod_p \frac{1}{1 - p^{-s}} \)

Code

{{< katex >}}\sum_{n=1}^{\infty} 2^{-n} = 1{{< /katex >}}

Affichage

\(\sum_{n=1}^{\infty} 2^{-n} = 1\)

Code

{{< katex >}}
\begin{pmatrix}
1 & 2 & 3\\
a & b & c
\end{pmatrix}
{{< /katex >}}

Affichage \(\begin{pmatrix} 1 & 2 & 3\\ a & b & c \end{pmatrix}\)

On peut mettre des formules LaTeX dans le texte : \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \) .

On peut aussi mettre des équations sur des lignes séparées :

Code #

Directement dans le texte #

On peut mettre du code directement dans le texte : int i = 0;.

int i = 100;
char c = static_cast<char>(i); // int -> char  

float f = 100.0f;
i = static_cast<int>(f); // float -> int
 
class Base{};
class Deri : public Base{};
Deri  *d = new Deri;
Base *b = static_cast<Base*>(d); // Deri* -> Base*

On peut aussi mettre du code avec des lignes en surbrillance :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HelloWorld : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

Avec un fichier de snippet #

On peut inclure des snippets de code depuis des fichiers sources.

Code

<!-- SNIPPET:INCLUDE source_file=hello.c id=hello_world -->

Ensuite, il faut exécuter le préprocesseur Hugo pour inclure le code :

python .\tools\hugo_preprocessor.py

Affichage

int main(void)
{
	printf("Hello World\n");

	return 0;
}

On peut aussi nettoyer le code automatiquement inclus et revenir à la balise de snippet d’origine grâce à la commande suivante :

python .\tools\hugo_preprocessor.py clean

Listes #

Voici une liste non-ordonnée :

• élément 1;
• élément 2;
• élément 3.

Voici une liste ordonnée :

1. élément 1;
2. élément 2;
3. élément 3.

Référence #

Voici un texte avec une référence listée en bas de page ¹.

Vidéos #

Youtube #

Playlist Youtube #

Vidéo MP4 hébergée ailleurs #

PDFs #

Avec un PDF dans le répertoire local static/pdfs #

Code

{{<pdf src="/pdfs/n4849.pdf">}}

Affichage

Avec un PDF sur le web #

Code

{{<pdf src="https://www.open-std.org/jtc1/sc22/wg14/www/docs/n3088.pdf">}}

Affichage

Reveal.js Slides #

Les slides Reveal.js sont générées automatiquement à partir des blocs {{< slide >}} et {{< /slide >}} directement inclus dans la page.

Colonnes #

Barre de progression #

Références #