outils:markdown [WEBGE Wikis]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[:outils:accueiloutils|{{ :iconemaison.jpg?nolink&25|La page outils}}]]

==== Outils - Mémento de Markdown ====
[Mise à jour le 17/11/2022]

  * **Source**
    * <html><a href="https://www.markdownguide.org/basic-syntax" target="_blank">Markdown Guide : Basic Syntax</a></html>

----

=== Philosophie ===
//**Markdown** a été conçu pour être aussi facile à lire et à écrire que possible.\\

La **lisibilité**, cependant, prime devant tout le reste. Un document formaté selon Markdown devrait pouvoir être publié comme tel, en texte, sans donner l’impression qu’il a été marqué par des balises ou des instructions de formatage//.<html><a href="https://michelf.ca/projets/php-markdown/syntaxe/#apercu" target="_blank">Source</a></html>

----

=== 1. Paragraphes ===

<callout type="primary" icon="true">Écrire **simplement** le texte pour créer un paragraphe. Séparer les paragraphes par une **ligne vide**.</callout>

//Exemple//
<code markdown *.md>
Ceci est un paragraphe de texte.

Ceci est un autre paragraphe de texte !
</code>

//Résultat// \\
Ceci est un paragraphe de texte.

Ceci est un autre paragraphe de texte ! \\
\\
=== 2. Emphase (gras, italique, barré…) ===
   * **Emphase faible (italique)**

<callout type="primary" icon="true">**Entourer** le texte d'une simple étoile (*****) pour l'afficher en //italique// et d'une double (*** ***) pour l'afficher en **gras**.</callout>

//Exemple//
<code markdown *.md>
Voici un mot *important* à mon sens
</code>

//Résultat// : Voici un mot //important// à mon sens

  * **Emphase forte (gras)**

//Exemple//
<code markdown *.md>
Voici des mots **très importants**, j'insiste !
</code>

//Résultat// : Voici des mots **très importants**, j'insiste !

  * **Texte barré**

//Exemple//
<code markdown *.md>
Ce texte est ~~barré~~
</code>

//Résultat// : Ce texte est <del>barré</del> \\
\\
=== 3. Les titres ===
<callout type="primary" icon="true">Les titres sont affichés avec le caractère **#**.</callout>

// Exemple//
<code markdown *.md>
# Titre de niveau 1

## Titre de niveau 2

### Titre de niveau 3

#### Titre de niveau 4
</code>

//Résultat//

<html><h3>Titre de niveau 3</h3></html> \\

=== 4. Les listes ===
  * **Les listes à puces**
<callout type="primary" icon="true">Les listes non ordonnées utilisent l’**astérisque** *****, le plus **+**, ou encore le tiret **—** de façon tout à fait interchangeable.</callout>

<code markdown *.md>
* Une puce
* Une autre puce
* Et encore une autre puce !
</code>

//Résultat//
  * Une puce
  * Une autre puce
  * Et encore une autre puce !

  * **Les listes à puces numérotées**

<callout type="primary" icon="true">Les listes ordonnées utilisent un **nombre suivi d’un point**.</callout>

<code markdown *.md>
1. Et de un
2. Et de deux
3. Et de trois
</code>

//Résultat//
  - Et de un
  - Et de deux
  - Et de trois \\
\\
=== 5. Bloc de citations ===

<callout type="primary" icon="true">On utilise le caractère **>** pour les **blocs de citation**.</callout>

<code markdown *.md>
> Ceci est un texte cité. Vous pouvez répondre
> à cette citation en écrivant un paragraphe
> normal juste en-dessous !
</code>

//Résultat//

> Ceci est un texte cité. Vous pouvez répondre
> à cette citation en écrivant un paragraphe
> normal juste en dessous ! \\
\\
=== 6. Code source ===

  * **Bloc de code**

<callout type="primary" icon="true">Pour produire un bloc de code avec Markdown, vous n’avez qu’à **indenter** chaque ligne par au moins **4 espaces** ou une **tabulation** (touche Tab).</callout>

//Exemple et résultat//
<code markdown *.md>
Voici un code en C :

    int main()
    {
        printf("Hello world!\n");
        return 0;
    }
</code>

//Resultat//
{{ :outils:testmd.png?nolink |}}

  * **Code en ligne**
<callout type="primary" icon="true">On insère du **code dans une ligne de texte** en l'entourant du  caractère apostrophe **'**.</callout>

//Exemple//
<code markdown *.md>
La fonction 'printf()' permet d'afficher du texte
</code>

//Résultat//
{{ :outils:testmd2.png?nolink&500 |}}

<callout type="tip" icon="true">Pour tout autre formatage du code (mise en gras ou en couleur des mots-clés, etc.) il faut utiliser les balises HTML (**code** et** pre**) pour formater le code et des règles CSS intégrées dans des balises <**span style=""**>.</callout>

//Exemple//
<code markdown *.md>
<span style=style="color:blue;">Un texte en bleu.</span>
</code>
<html><p style="color:blue;">Un texte en bleu.</p></html> \\
\\

=== 7. Les liens ===

<callout type="primary" icon="true">Markdown supporte deux styles de liens : **incorporé au texte** et par **référence**. Dans les deux cas, le texte du lien est délimité par des [**crochets**].</callout>

//Exemple//
<code markdown *.md>
Ceci est [un exemple](http://exemple.com/ "Titre") de lien incorporé.

[Ce lien](http://exemple.net/) n'a pas de titre.
</code> \\

=== 8. Les images ===

<callout type="primary" icon="true">Markdown utilise une syntaxe d’image qui ressemble à la syntaxe des liens, permettant deux variantes : **incorporée** et **par référence**.</callout>

//Exemple//
<code markdown *.md>
![Texte alternatif](/chemin/vers/img.jpg)

![Texte alternatif](/chemin/vers/img.jpg "Titre optionnel")
</code>
\\
=== 9. Barre de séparation ===

<callout type="primary" icon="true">Vous pouvez produire une ligne horizontale en plaçant au moins trois tirets, astérisques, ou barres de soulignement seuls sur une ligne. </callout>

//Exemple//
<code markdown *.md>
### Ce titre de niveau 3 est séparé du texte
-----------------
Le texte suivant le titre
</code>

//Résultat//
{{ :outils:testmd3.png?nolink&400 |}}

----

=== Pour en savoir plus ...===
PHP Markdown Syntaxe <html><a href="https://michelf.ca/projets/php-markdown/syntaxe" target="_blank">lien</a></html>