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é
- exposant
- indice
- 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
Par défaut, tous les paragraphes sont alignés à gauche. Mais vous pouvez aussi forcer cet alignement vous-même, en utilisant le style de paragraphe text-align:left
.
Un paragraphe centré avec le style de paragraphe text-align:center
.
Cette ligne appartient aussi au paragraphe centré. Elle est donc centrée également.
Voici un paragraphe justifié, avec le style text-align:justify
, qui tente au mieux de répartir les mots horizontalement entre les deux bordures du texte. Malheureusement, parfois, cet alignement génère de grands écarts entre les mots d’une même ligne.
Et un paragraphe aligné à droite avec le style text-align:right
.
Notes
Vous pouvez écrire des notes
Listes
Liste à puces,
- premier point
- 2ème point
- …
liste numérotée,
- A
- B
- 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
Première colonne
Qui nostrud occaecat excepteur enim incididunt anim sit officia laboris aliquip qui aute. Tempor ad labore aute sunt occaecat occaecat sit veniam consequat proident velit Lorem eiusmod non. Quis adipisicing cillum officia laboris mollit aute labore.
et deuxième colonne
Officia est do dolore quis nulla ut in duis officia ea ea. Lorem dolore elit proident dolor exercitation veniam excepteur ex incididunt ex. Culpa anim pariatur incididunt ad adipisicing deserunt officia quis consequat exercitation minim. Labore Lorem irure do quis aute occaecat anim eu dolore.
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 :
- Créez un dossier à côté de votre fichier
- 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.
- Mettez votre média dans le dossier : p. ex.
panda.png
. - 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
Cellules | de tableau | bien alignées |
---|---|---|
col 1 est | alignée à gauche | A |
col 2 est | centrée | B |
col 3 est | alignée à droite | C |
É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 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)