Code
TP-0 - B. Les celulles Markdown et sa syntaxe
Dans un notebook la touche M transforme la cellule sélectionnée en type Markdown. Vous pouvez alors rédiger du texte enrichi (titres, sous-titres, gras, italique, alinéas, tableaux, liens hypertexte, etc).
Le texte de la cellule doit être rédigé en langage Markdown qui est un langage de balisage léger. La syntaxe markdown est facile à apprendre (le plus simple est d’ailleurs de regarder des exemples de documents). Voici quelque liens :
Il est également possible d’insérer des morceaux de texte en langage \(\LaTeX\) pour composer des expressions mathématiques.
1 La syntaxe
Markdown est un système d’édition et de formatage de texte. La philosophie du système veut que le texte écrit soit lisible sans interpréteur particulier en mode texte. Il est léger et épuré de l’essentiel de la verbosité d’un language balisé.
Les éléments de syntaxe sont des caractères de ponctuation qui font sens visuellement même non convertis. Une fois converti, le navigateur web (qui joue alors le rôle d’interpréteur) en rendra la lecture plus claire.
Vous pouvez tout à fait introduire directement des balises HTML dans votre texte. Attention, le formatage markdown ne sera pas appliqué à l’intérieur de ces balises.
1.1 Les titres
Il est possible de titrer en ajoutant des dièses (#) au début de la ligne. Il n’y a pas de limite au nombre de niveaux de titres qu’il est possible d’utiliser (mais n’allez pas au delà de 4).
# Title 1
## Title 2
### Title 3
#### Title 4
##### Title 51.2 Les paragraphes
Pour afficher un paragraphe, laisser une ligne vide.
Effectuer un saut de ligne simple dans votre texte markdown n’aura aucun effet. Sauf si vous terminez votre ligne par un double espace (ou plus que ça)…
comme ici.
1.3 L’emphase
Pour formater une partie de votre texte comme emphase, entourez le par des astérisques * ou des underscores _. Entourer par un signe unique passe en italique et par un double signe en gras.
Un double tildes ~~ vous permettent de barrer le texte.
1.4 Les citations
Pour afficher un bloc de citation, commencez le paragraphe par un chevron fermant
>. Si votre bloc contient plusieurs lignes, vous pouvez faire des sauts de lignes à la main et toutes les ouvrir par un chevron fermant, mais ce n’est pas nécessaire. Ces bloc peuvent contenir d’autres éléments markdown comme des titres ou des listes.
1.5 Bootstrap Box
On peut utiliser des boîtes colorées fournies par bootstrap, mais pour cela il faut utiliser des balises html.
NB: Des lignes vides sont nécessaires avant/après une section de démarquage qui se trouve dans une balise html, sinon la syntaxe markdown ne fonctionnera pas.
1.5.1 Boîte de type “alert-success”
<div class="alert alert-success">
**Success!** Indicates a successful or positive action.
</div>Success! Indicates a successful or positive action.
1.5.2 Boîte de type “alert-warning”
<div class="alert alert-warning">
**Warning!** Indicates a warning that might need attention.
</div>Warning! Indicates a warning that might need attention.
1.5.3 Boîte de type “alert-danger”
<div class="alert alert-danger">
**Danger!** Indicates a dangerous or potentially negative action.
</div>Danger! Indicates a dangerous or potentially negative action.
1.5.4 Boîte de type “alert-info”
<div class="alert alert-info">
**Info:** indicates a neutral informative change or action.
</div>Info: indicates a neutral informative change or action.
1.5.5 Boîte à dérouler
<details>
**Shopping list**
- Vegetables
- Fruits
- Fish
</details>Shopping list
- Vegetables
- Fruits
- Fish
1.6 Les listes non ordonnée
Pour afficher une liste, commencez la ligne par une astérisque *, un moins - ou un plus +. Là encore, le choix n’a pas d’importance, mais il faut rester cohérent dans votre document.
+ item
+ item
+ itemdonne
- item
- item
- item
1.7 Les listes ordonnées
Pour afficher une liste ordonnée, commencez la ligne par un nombre suivit d’un point.
1. item
123. item
17. item donne
- item
- item
- item
1.8 Le bloc de code
Pour afficher un bloc de code, sautez deux lignes comme pour un paragraphe, puis indentez avec 4 espaces ou une tabulation.
Pour afficher du code dans une ligne, il faut l’entourer par des guillemets simples (`).
1.9 Les filets ou barres de séparation
Pour afficher un filet de séparation, entrez dans votre texte au moins 3 astérisques * ou 3 moins - sur une ligne entourée de sauts de lignes. Il est possible de les séparer par des espaces.
1.10 Les liens
Il y a deux façons d’afficher un lien.
- De manière automatique en encadrant un lien par des chevrons, par exemple
<http://www.google.com>donne http://www.google.com. Il est alors cliquable et affiche l’url indiquée entre chevrons.
- Ou en ajoutant des paramètres. Le texte à afficher est alors indiqué entre crochets suivit de l’adresse du lien entre parenthèses, par exemple
[google](http://www.google.com "link to google")donne google. Dans les parenthèses, à la suite du lien, on peut indiquer un titre entre guillemets. Ce titre sera affiché lors du survol du lien dans le navigateur. Il sera également lu par les navigateurs textuels pour les déficients visuels.
1.11 Les images
Pour afficher une image en markdown,
commencez par un point d’exclamation,
puis indiquez le texte alternatif entre crochets. Ce dernier sera affiché si l’image n’est pas chargé et lue par les moteurs de recherche.
Terminez par l’URL de l’image entre parenthèses:
- Cette URL peut être un lien vers le web
https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg - ou un chemin local de ce type :
/dossier_images/nom_de_mon_image.jpg.
- Cette URL peut être un lien vers le web
Après le lien vers l’image, il est possible d’ajouter un titre lu par les navigateurs textuels et affiché au survol de l’image par les autres.
Exemple:
donne
Si l’image doit être redimensionnée, utiliser directement du code \(\texttt{html}\).
Comparer les codes suivants
donne
<img src = "https://www.google.fr/images/srpr/logo11w.png" title = "google logo" alt = "Google logo" width="200">donne
Si on veut qu’une image locale soit directement sauvegardée dans le notebook (par exemple pour partager le notebook sur le web), on peut utiliser une cellule Python et plusieurs méthodes sont possibles:
Code
1.12 Les tableaux
L’idée globale est de “dessiner” des colonnes en les entourant avec des pipes |. Le nombre de colonnes est défini dans la première ligne du tableau et vous devez pour chaque ligne avoir le même nombre de colonnes, même si certaines sont vides.
La première ligne sera votre en-tête. La seconde ligne sépare cet en-tête du corps du tableau, elle ne contient que des tiret - Il n’est plus possible de définir l’alignement des colonnes dans markdown.
| Header 1 | header 2 | header 3 |
| --- |--- |--- |
| 1 Online | 1 | value |
| Line 2 | 2 | value |
| 3 Online | 3 | value | | Header 1 | header 2 | header 3 |
|---|---|---|
| 1 Online | 1 | value |
| Line 2 | 2 | value |
| 3 Online | 3 | value |
Assistant en ligne : Markdown Tables Generator
1.13 Échappement des caractères
Les caractères spéciaux ayant un sens en markdown doivent être échappés. Si vous souhaitez utiliser dans votre texte des astérisques, accolades, dièses… à une position indiquant à markdown que vous désirer un formatage particulier, vous devez les échapper en les faisant précéder d’un antislash \. Sinon markdown les masquera et appliquera le formatage correspondant. Les caractères suivants sont à échapper :
\ * ` - _ [] () {} # + . ! 2 Écriture de formules mathématiques
Les équations peuvent être directement données au format \(\LaTeX\), on peut donc par exemple écrire \(x_i\) au milieu d’une ligne ou bien écrire des équations dans une nouvelle ligne et centrées:
\(\sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6}. \)
Quelques commandes \(\LaTeX\) de base sont expliquées sur cette page, et pour plus de détails, vous pourrez consulter mon polycopié d’Initiation à \(\LaTeX2e\), disponible ici, en particulier le chapitre 3.
2.1 Les modes mathématiques
Pour taper des formules mathématiques avec \(\LaTeX\) , il y a besoin d’entrer en mode mathématiques.
Il existe deux modes mathématiques : les formules dans le texte (appelée inline) et les formules en évidence (dites en displaystyle).
- Pour mettre une formule dans le texte, comme \(y=f(x)\), il suffit de mettre la formule entre deux dollars:
$y=f(x)$.
Remarquer la différence entre le mode texte et le mode mathématique : avec des dollars on a \(y=f(x)\) tandis que sans dollars on a y=f(x) - Pour mettre une formule en évidence, comme \(y=f(x)\) il faut mettre la formule entre deux doubles dollars
\( y=f(x) \)
2.2 Formules complexes
Pour un cours sur la syntaxe \(\LaTeX\) pour écrire des formules mathématiques, vous pouvez consulter le chapitre 4 de ce cours (à partir de la section 4.3) :