⬇éditeur
# Le markdown à la cool Le but de cette page est de découvrir la syntaxe [markdown][1] et de tester son utilisation en rédigeant le contenu que vous souhaitez. > Mode d'emploi ? > > - Vous pouvez éditer le document à volonté dans la zone d'édition en pied de page. > > - Vous pouvez télécharger le document HTML que vous avez construit. > > - Vous pouvez enregistrer la source cette page dans un nouveau fichier sur votre poste et l'éditer sur votre navigateur. Si vous avez peu ou pas de connaissances sur [HTML](https://fr.wikipedia.org/wiki/HTML) et [CSS](https://fr.wikipedia.org/wiki/CSS), la notation markdown est une façon de s'en passer. Basiquement, le HTML nous permet de structurer le contenu rédigé et le CSS permet de le mettre en forme et en mouvement. Si vous souhaitez uniquement en savoir plus sans mettre en pratique, voici le [guide markdown][2] dont cette page s'inspire (il n'y a pas énormément d'éléments de notation à retenir, on retrouve donc les fondamentaux pour la rédaction d'un texte). Pour les personnes curieuses : sachez que votre navigateur comporte des outils pour vous aider à comprendre la structure et le style d'une page sur internet. Vous pouvez consulter la source HTML/CSS de la page en cours (par exemple via un raccourci type `CTRL+u`). Vous pouvez également chercher dans vos paramètres un bouton vers les « outils de développement » (par exemple avec la touche `F12`). ---- ## Titres et sous-titres Pour hiérarchiser les titres, on utilise le symbole `#` en début de ligne : * un seul `#` pour le premier titre de la page `<h1>` * un double pour le second niveau de titre `<h2>` : `##` Etc, etc.. jusqu'au niveau de titre `<h6>`. ---- ## Séparateur de section de texte La ligne de séparation `<hr/>` est notée `----` (visible ci-dessous avant le titre suivant). ---- ## Citations (via `<blockquote>`) On utilise la notation `> ` avant de rédiger le contenu de la citation. ``` > Citation - Auteur ``` > Citation - Auteur <style> blockquote { background:lightgrey; margin:10px auto; padding:10px; width:fit-content; border-radius: 8px; cursor: text; transition:all 0.25s ease-out } blockquote:hover { background:grey; } </style> ---- ## Style de texte Vous pouvez utiliser `_` ou `*` autour d’un mot pour le mettre en italique. Mettez-en deux pour le mettre en gras. ### Texte italique ``` Ceci est _en italique_. ``` Ceci est _en italique_. ### Texte gras ``` Ceci est **en gras**. ``` Ceci est **en gras**. ### Texte barré ``` Ceci est ~~barré~~. ``` Ceci est ~~barré~~. ### Texte souligné Il n'existe pas de notation markdown pour souligner du texte. C'est probablement dû au fait que sur internet, les textes soulignés sont généralement des liens vers d'autres pages. Pour éviter la confusion auprès des internautes, on évite donc de souligner les éléments non cliquables. Vous pouvez cependant utiliser la balise HTML `<u>` pour souligner le contenu : ``` <u>Ceci n'est pas un lien</u> ``` <u>Ceci n'est pas un lien</u> ---- ## Les listes ### Liste ordonnées (via `<ol>`) On note `.` en début de ligne pour indiquer un élément d'une liste à représenter : ``` 1. premier élément 2. second élément 3. troisième élément ``` 1. premier élément 1. second élément 1. troisième élément <!-- Subtilité : peu importe le numéro noté, les éléments seront numérotés dans l'ordre croissant --> Les éléments seront générés comme les éléments `<li>` numérotés dans l'ordre croissant à l'affichage. ### Liste non ordonnées (via `<ul>`) On note `-` en début de ligne pour indiquer un élément d'une liste à représenter : ``` - premier élément - second élément - troisième élément ``` - premier élément - second élément - troisième élément ---- ## CSS à la volée On peut ajouter un bloc `<style>` à tout moment dans le document et ajouter des règles CSS : ``` <style> pre { background:lightgrey; color:black; line-height:1.1rem; padding:5px 10px } code { background:lightgrey; color:black } </style> ``` <style> pre { background:lightgrey; color:black; line-height:1.1rem; padding:5px 10px } code { background:lightgrey; color:black } textarea { background:lightgrey; border:none } </style> Pour faciliter votre prise en main, j'ajoute un bloc style dédié après chaque exemple, n'hésitez pas à vous l'approprier. J'ajoute aussi quelques propriétés dynamiques (notamment une rotation sur l'image) pour les curieux. ---- ## Lien hypertexte (via `<a>`) La notation pour déclarer un lien est `[titre](url)`. ``` Ceci est [un lien](https://fr.wikipedia.org/wiki/lien). ``` Résultat : Ceci est [un lien](https://fr.wikipedia.org/wiki/lien). <style> a { color:blue;text-decoration:none } a:hover { text-decoration:underline } </style> ## Lien de référence Pour alléger le texte, on peut créer une référence : ``` Ceci est [un lien][ex1]. [ex1]:https://ceci.est.un/lien ``` [ex1]:https://ceci.est.un/lien Résultat : Ceci est [un lien][ex1]. L'avantage est de pouvoir réutiliser la référence plusieurs fois sous un nom différent. ---- ## Une image (via `<img>`) On utilise la notation `` pour afficher une image. Les dimensions doivent être gérées côté HTML/CSS sinon l'image est affichée avec sa taille originale. ```  <style> img[alt="Logo Python"] { width:200px; } p > img { display:flex; margin:20px auto; width:200px } </style> ``` <style> img[alt="Logo Python"] { width:200px; } p > img { display:flex; margin:20px auto; width:200px } </style>  J'ajoute quelques règles CSS pour animer le logo en lui faisant faire une rotation lorsqu'on passe la souris dessus : ``` <style> img { transition:all 1s ease-out } img:hover { transform:rotate(360deg); } </style> ``` <style> img { transform:rotate(-180deg); transition:all 1s ease-out } img:hover { transform:rotate(360deg); } </style> CSS permet notamment d'animer, déplacer, redimensionner les éléments en fonction des conditions que vous décidez. Il a été considérablement amélioré pour cibler précisément les éléments HTML et nous permet de rendre nos pages lisibles et réactives (ou __responsive__ en anglais) sur tous nos appareils. ---- ## Tableaux (via `<table>`) Pour créer un tableau simple, on peut utiliser la notation suivante : ``` | commande | argument | résultat | - | - | - | pwd | - | affiche le dossier en cours | cd | chemin | se déplacer vers le chemin | ls | chemin(s) | liste le chemin | echo | texte(s) | affiche le texte | cat | fichier(s) | affiche le contenu du fichier | wc | fichier(s) | affiche les #lignes, #mots, #caractères | grep | expression, fichier(s) | recherche l'expression dans les fichiers <style> table { border: 1px solid black; border-collapse: collapse; margin:10px auto } td,th { border: 1px solid black; border-collapse: collapse; padding:4px; width:max-content; } tr:hover { background:lightgrey } </style> ``` | commande | argument | résultat | - | - | - | pwd | - | affiche le dossier en cours | cd | chemin | se déplacer vers le chemin | ls | chemin(s) | liste le chemin | echo | texte(s) | affiche le texte | cat | fichier(s) | affiche le contenu du fichier | wc | fichier(s) | affiche les #lignes, #mots, #caractères | grep | expression, fichier(s) | recherche l'expression dans les fichiers <style> table { border: 1px solid black; border-collapse: collapse; margin:10px auto } td,th { border: 1px solid black; border-collapse: collapse; padding:4px; width:max-content; } tr:hover { background:lightgrey } </style> Il n'est pas nécessaire d'aligner les séparateurs verticaux `|` pour générer le tableau. ---- ## Commande simple (via `<code>`) Les guillemets arrières ` permettent de mettre en valeur du texte. Il faut activer la combinaison de touches ALTGR+7 (répéter deux fois de suite pour un guillemet). ``` Mettre en valeur du `texte` ou une `instruction` de programmation. ``` Mettre en valeur du `texte` ou une `instruction` de programmation. ## Commande multiligne (via `<pre>`) En triplant les guillemets arrières ```, on peut utiliser un bloc multiligne. Cet élément me permet de montrer les notations markdown sur cette page sans qu'elles soient interprétées (ça permet de les afficher telles qu'ont les rédige). ``` ` ` ` # un commentaire dans le language bash $ mycommand-en-bash résultat de ma commande ` ` ` ``` Pour montrer la notation ci-dessus, je dois ajouter des espaces entre les triples guillemets. Sinon on obtient le résultat suivant : ``` # un commentaire dans le language bash $ mycommand-en-bash résultat de ma commande ``` ---- ## Références * FR - [Wikipédia][1] * FR - [Guide Markdown][2] * EN - [Markdown Guide][3] * EN - [Daring Fireball][4] [1]:https://fr.wikipedia.org/wiki/Markdown [2]:https://flus.fr/carnet/markdown.html [3]:https://www.markdownguide.org/ [4]:https://daringfireball.net/projects/markdown/ ---- Pied de page
Télécharger le contenu HTML
⬆haut de page