Exemple de mise en forme d’un fichier markdown

Cette page web a été calculée à partir d’un fichier markdown. Le fichier source montre la syntaxe basique du format markdown et certaines variations permises par pandoc.

Table des Matières (optionnelle)

Mise en forme des caractères

Vous pouvez utiliser de nombreuses mises en formes de caractères :

• italique
• gras
• souligné
• expo^sant
• ind_ice
• mot barré

Vous pouvez insérer des smileys 😄

Liens

Liens vers d’autres pages de votre site

Vous pouvez insérer des liens vers d’autres pages de votre site en utilisant des chemins relatifs, à partir du dossier courant de ce fichier-ci, jusqu’au fichier cible : p. ex un lien vers le manuel ou un lien vers la page “À propos”. Ainsi, dans vos fichiers markdown, les liens sont également valides et ils vous permettent de vous déplacer entre vos fichiers grâce à votre éditeur de texte.

Liens vers l’extérieur

Vous pouvez insérer des liens vers des pages internet externes, p. ex. www.google.com. Pour cela, veillez à bien commencer l’URL avec le protocole (http:// ou https://) : p. ex. http://www.google.com/.

Vous pouvez écrire des emails et des numéros de téléphone :

john@doe.com
(+33).6.12.34.56.78

Liens vers une section d’une page web

Vous pouvez insérer un lien vers une section d’une page web en utilisant votrepage.html#la-section. Par exemple, voici un lien vers la section nommée “Mise en forme des caractères”, de cette page.

Voici plusieurs solutions pour trouver le lien vers une section : (i) Récupérer le lien grâce à l’affichage automatique des liens d’ancrage. Sur les sites générés avec notre service un lien d’ancrage devient, généralement, visible lorsque vous bougez votre souris devant le titre d’une section.

Faites ensuite un clic droit sur l’ancre et copiez le lien correspondant. (ii) Une deuxième solution est d’utiliser le lien d’une table des matières. (iii) Une dernière solution est d’inspecter le code source de la page que vous ciblez, à la recherche d’un éventuel identifiant (“id”) de la cible.

Notez bien qu’il est nécessaire :

• que la-section soit en lettres minuscules, avec des traits d’unions (-) entre les mots.
• de supprimer les backslash (\) et les apostrophes (')
• que les lettres accentuées soient renseignées en suivant l’encodage pour url utf8.

“é” sera écrit %C3%A9 dans le lien du fichier markdown.

Couleurs

Vous pouvez utiliser des couleurs avec l’attribut de style CSS “color” : p. ex., voici du texte coloré. Utilisez ce service en ligne pour prévisualiser les couleurs CSS disponibles et trouver leurs noms. Le format hexadécimal est aussi possible, p. ex. #0000ff.

Mise en forme des paragraphes

Nouvelle ligne et nouveau paragraphe

Un paragraphe est un ensemble de lignes qui se finit dès la première ligne vide. Si vous voulez faire un retour à la ligne au sein d’un paragraphe, finissez la ligne avec un backslash “\”
Après une ligne vide, c’est un nouveau paragraphe.

Alignement des paragraphes

Notes

Vous pouvez écrire des notes

Listes

Liste à puces,

• premier point
• 2^ème point
• …

liste numérotée,

1. A
2. B
3. C

et liste de définitions

Premier élément

description

Deuxième

autre description

Mise en page

Colonnes

Vous pouvez insérer du texte en colonnes

Séparateurs horizontaux

Vous pouvez insérer des séparateurs horizontaux

Insertions de médias

Étapes pour l’insertion d’un nouveau média

Quand vous voulez insérer un nouveau média (p. ex. une image) dans une page :

1. Créez un dossier à côté de votre fichier
2. Renommez ce dossier et donnez-lui le nom de votre fichier.

Par exemple, si votre fichier markdown s’appelle i_love_pandas.md, dans ce cas renommez le dossier en i_love_pandas.

3. Mettez votre média dans le dossier : p. ex. panda.png.
4. Dans le fichier markdown, insérez l’image avec Une description de l'image](i_love_pandas/panda.png "Un texte qui s'affiche lorsque le curseur survole l'image"){ width=25% }

Images

Images bitmap

Vous pouvez insérer des images standard (bitmap ou matricielles) en png ou jp(e)g

et contrôler la taille de l’image à partir du fichier markdown.

Images vectorielles

Vous pouvez insérer des images vectorielles et contrôler leurs tailles

Pour les images vectorielles, vous devez obligatoirement spécifier une taille.

Images animées

Vous pouvez insérer des images animées (GIF) et contrôler leurs tailles

Tableaux

Vous pouvez insérer des tableaux

Équations mathématiques

Vous pouvez insérer des formules mathématiques avec la syntaxe Latex : p. ex. \(x^2 + y^2 = z^2\).

Ainsi que des blocs d’équations

\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]

Html brut

Les possibilités de mise en pages sont infinies étant donné que vous pouvez même écrire directement en html dans vos fichiers !

Exemple de bloc html complexe

Vous pouvez définir des colonnes, insérer une image (animée ou non) à partir d’une URL et contrôler finement sa position.

Vous pouvez
faire
ce que vous voulez
en html brut

Pdf

Vous pouvez inclure des pdf

ou insérer un lien pour télécharger le fichier pdf.

Audio

Vous pouvez jouer des sons à partir d’un fichier mp3 uploadé

Video

Vous pouvez afficher des vidéos à partir d’un fichier vidéo uploadé. Soit en utilisant l’encodage WebM (flower.webm) …

… soit à partir d’un encodage MPEG-4 (beach.mp4)

iframes

Vous pouvez insérer des iframes et contrôler facilement leurs dimensions grâce à un rapport de forme (aspect-ratio).

Vidéos youtube

Google calendars

Google maps

Métadonnées de vos pages internet

Le fichier de format markdown vous permet de spécifier les méta-données de la page web correspondante, p. ex. le titre de la page web. Pour cela, écrivez les méta-données dans le header de votre fichier markdown, au tout début du fichier, comme ceci :

---
title: "Pambda.fr: Exemple de mise en forme d'un fichier markdown"
author: 'Joseph Lucas'
date: '2020-11-10'
description: "Exemple de mise en forme d'un fichier markdown pour créer une page internet"
keywords: 'Pambda, Pambda.fr, pandoc, markdown, html, website'
header-includes: |
  <meta property="og:type" content="website" />
  <meta property="og:description" content="Pambda.fr: Exemple de mise en forme d'un fichier markdown" />
  <meta property="og:url" content="https://pambda.fr/markdown-formatting.html" />
  <meta property="og:image" content="https://pambda.fr/index/logo-social-networks.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Pambda" />
  <meta property="og:locale" content="en_US" />
  <meta name="twitter:card" content="summary\_large\_image">
...

Attention, si vous utilisez des apostrophes (') dans les champs de valeurs, écrivez les valeurs entre des guillemets (") plutôt qu’entre des apostrophes.

Éditez les valeurs à droite des “:” avec les valeurs que vous souhaitez.

Les méta-données ne sont pas nécessaires, mais elles ont les utilités suivantes : Le titre est affiché dans l’onglet de la page de votre navigateur internet. Le titre, la description et les keywords (mots clefs) aident les moteurs de recherche (comme Google) à indexer votre page. Pour plus d’informations à propos des valeurs du champ “header-includes” allez voir The Essential Meta Tags for Social Media.

Table des matières

Si vous voulez une table des matières, ajoutez ceci au bloc de meta-données

toc: true
toc-title: 'Titre de votre table des matières'
toc-depth: 2

La barre de navigation

Pour la barre de navigation, le fichier .navbar.md, utilisez une liste à puces comme celle-ci :

- `<a>Lang</a>`{=html}
  - [English](https://pambda.com)
  - [Français](https://pambda.fr)
- [Accueil](index.html)
- [Services](services.html)
- `<a>Documentation</a>`{=html}
  - [Manuel](Documentation/manual.md)
  - [FAQ](Documentation/faq.md)
- [Blog](blog.html)
- [À propos](about.html)
- [Contact](contact.html)