Présentation

édition technique tutoriel

principe de cette page

Pour rédiger:

• une recette de cuisine
• un tutoriel
• un commentaire avec un lien

c'est quoi le markdown ?

• wikipédia : Markdown
• Markdown guide

utilisation du markdown

L'utilisation du markdown se fait de façon assez intuitive et permet de rédiger directement un contenu multimédia.

Il permet notamment d'aborder la rédaction d'une page complète sans intégrer directement tous les éléments HTML soi-même. Le texte, les liens, les images et quelques éléments typiques peuvent être intégrés dans le contenu en utilisant une syntaxe dédiée.

Voici un tableau qui résume les principaux éléments à disposition:

• wikipédia : Syntaxe markdown

les titres

Les titres d'en-tête <h1>,<h2>,... sont déclarés en utilisant le symbole #:

• # titre (h1)
• ## la section 1 (h2)
• ### la division 11 (h3)

Il y a peu de javascript inclus mais il sert notamment à mettre des majuscules pour chaque titre.

On verra dans ce cas :

 TITRE
  La Section 1
   La Division 11

On utilise également javascript pour construire l'index en début de page. On choisit ici d'inclure le titre principal <h1> dans un bloc <details> pour porter l'index.

les liens hypertextes

On peut utiliser les liens hypertextes ou hyperliens à tout moment via la syntaxe suivante :

[hyperliens](https://fr.wikipedia.org/wiki/Hyperlien)

Ou encore, de façon très générique :

[le titre à lire](URL)

Le traitement automatique des références est simple. Mais il peut être inclus à la main - comme pour n'importe quel document.

Le principe permet de garder tous les liens en bas de page (mais pas seulement) :

Le traitement automatique des [références] est simple...
[références]:https://wikipedia.org

Ou encore :

[expression rédigée]
du texte.
[expression rédigée]
encore du texte.

[expression rédigée]:URL

L'autre intérêt des références est de pouvoir réutiliser les liens existants ✨ plus facilement.

Exemple, en fin de page:

Une référence à [un article][1] pour plus tard.

## Références
- [Un nouveau lien pour la fin de page][1]

[1]:url

Un dernier titre 2 pour lister les liens utilisés. La référence dynamique [1]: suivie d'une URL valide permet de générer un lien vers la ressource correspondante dans votre texte. La référence peut être définie n'importe ou (a priori) dans le corps de page (et être utilisée plusieurs fois !).

style de texte

code ou expression

Il est possible de faire ressortir un texte précis en élément <code></code> avec la notation backtick ` (ALT-GR + 7 + 7).

Exemple : faire ressortir un `bout de code`

faire ressortir un bout de code

Pour obtenir un extrait multilignes, on utilise le triplement des backtick ``` et cela génère un bloc <pre><code></code></pre>.

Exemple: ``` Pour obtenir un exemple multilignes Et avoir un bloc de code ```

Pour obtenir un exemple multilignes
Et avoir un bloc de code

italique

Pour un passage en italique, on peut utiliser les tirets bas _:

Pour un _passage en italique_

La syntaxe avec une étoile simple * est généralement possible en remplacement des tirets bas.

gras

Pour un passage en gras, on peut utiliser les doubles étoiles **:

Pour un **passage en gras**

tableaux

La syntaxe pour tabler un ensemble de valeurs :

|Alignement à gauche |Alignement central|Alignement à droite|
|-- | :-: | --:|
| valeur11 | valeur12 | valeur13|
| valeur21 | résultat22 | valeur23 |

Le résultat :

Alignement à gauche	Alignement central	Alignement à droite
valeur11	valeur12	valeur13
valeur21	résultat22	valeur23

C'est une des syntaxes les plus compliquées en markdown ! C'est pour dire la simplicité du système.

Bien sûr, ces éléments <table> générés restent configurables en style et aussi via javascript (si on souhaite une méthode associée au tri des données, par exemple).

chevrons de balise

Pour pouvoir afficher les chevrons ouvrants < ou fermants > (les signes mathématiques inférieur et supérieur), on peut utiliser l'encodage HTML des symboles spéciaux sans que cela ne soit interprété par le moteur HTML (ces chevrons ne font pas partie du balisage) :

Valeur encodée	Valeur finale
&lt;	<
&gt;	>

citations

N'hésitez pas à citer avec le chevron fermant > (signe supérieur).

Exemple :

> Citation incroyable
>
>⁃ Auteure incroyable

Citation incroyable

⁃ Auteure incroyable

Il est possible de citer un extrait qui comporte déjà une citation (et indenter le niveau de citation en ajoutant plusieurs chevrons) :

> Une citation multilignes
> qui comporte une citation est une opération qui, je cite :
>> "ne pose pas de problème"
>
> selon les personnes interrogées

Une citation multilignes qui comporte une citation est une opération qui, je cite :

"ne pose pas de problème"

selon les personnes interrogées

Emojis

© ® ‼ ⁉ ™ ℹ ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ⌨ ⏏ ▪ ▫ ▶ ◀ ◻ ◼ ◽ ◾ ☀ ☁ ☂ ☃ ☄ ☎ ☑ ☘ ☠ ☢ ☣ ☦ ☪ ☮ ☯ ☸ ☹ ☺ ♀ ♂ ♠ ♣ ♥ ♦ ♨ ♻ ♾ ⚒ ⚔ ⚕ ⚖ ⚗ ⚙ ⚛ ⚜ ⚠ ⚰ ⚱ ⛈ 🥬 🥭 🥮 🥯 🥰 🥳 🥴 🥵 🥶 🥺 🥼 🥽 🥾 🥿 🦘 🦙 🦚 🦛 🦜 🦝 🦞 🦟 🦠 🦡 🦢 🦰 🦱 🦲 🦳 🦴 🦵 🦶 🦷 🦸 🦹 🦺 🧁 🧂 🧧 🧨 🧩 🧪 🧫 🧬 🧭 🧮 🧯 🧰 🧱 🧲 🧳 🧴 🧵 🧶 🧷 🧸 🧹 🧺 🧻 🧼 🧽 🧾 🧿

😁;🙃;🙂;😅;😌;🥲;🤪

🥳;🤡;🤠;🧐;🥸;🤓;😎;😶;😐;😒;🤗;🤥;😢;😭;🤤;✌;️🤞;✊;🤌;🤏;👆;👇;☝;️

surcharge du HTML

On peut à tout moment introduire des éléments HTML.

Si je dois inclure un script js ou autre, c'est possible. Tous les éléments HTML seront interprétés par le moteur de rendu (sans être modifié par l'évaluation markdown):

<script>
    alert('This is a test');
</script>

surcharge du CSS

On peut également surcharger le style par page. Le mieux étant d'éditer directement le fichier global de style mais pas de souci de perso de toute façon.

Ici, j'ajoute la règle CSS suivante à la fin du fichier dans un élément HTML <style>:

:root {
    --bg4: #789789
}

notations mathématiques

mathjax

La librairie MathJax permet de générer un rendu pour la notation LaTeX ✌.

Pour inclure des notations scientifiques au cours d'un paragraphe, on peut encapsuler la formule avec la syntaxe \( contenu \) mais il faut nécessairement inclure le contenu dans un paragraphe.

Par exemple, pour définir \(a=1\).

<p>Par exemple, pour définir \(a=1\).</p>

Pour définir une formule ou une équation, on utilise la notation $$ \psi(x) = 4x - 2u^2 $$: $$ \psi(x) = 4x - 2u^2 $$

1. Notation en ligne : \( x=1 \)
2. Notation en bloc : $$ x=1 $$

⚠ Il peut être nécessaire d'inclure les blocs $$ $$ dans un paragraphe également. Mieux vaut en faire une habitude !

équations

Une équation différentielle notée:

$$ \frac{dy}{dx} = -e^{a x^2} $$

sera visible sous cette forme : $$ \frac{dy}{dx} = -e^{a x^2} $$

D'ou: $$ dy = -e^{a x^2}dx $$

Et, en intégrant: $$ \int dy = \int e^{a x^2}dx $$

Je vous renvoie aux notations LaTeX et une référence en français.