Vous pouvez
faire
ce que vous voulez
en html brut
faire
ce que vous voulez
en html brut
toc: true toc-depth: 2 toc-title: 'Table des Matières (optionnelle)' header-includes: | ... ## Mise en forme des caractères Vous pouvez utiliser de nombreuses mises en formes de caractères : - *italique* - **gras** - [souligné]{.underline} - expo^sant^ - ind~ice~ - mot ~~barré~~ Vous pouvez insérer des smileys :smile: ### 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](./manual.md) ou [un lien vers la page "À propos"](../about.md). 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](https://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](mailto:john@doe.com)\ [(+33).6.12.34.56.78](tel:+33612345678) #### 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"](markdown-formatting.html#mise-en-forme-des-caract%C3%A8res), 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. > > {style="width:6rem"} > > 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`](https://outils-javascript.aliasdmc.fr/encodage-caracteres-accentues/encode-caractere-00E9-html-css-js-autre.html) dans le lien du fichier markdown. ### Couleurs Vous pouvez utiliser des couleurs avec [l'attribut de style CSS "color"](https://developer.mozilla.org/en-US/docs/Web/CSS/color) : p. ex., [voici]{style="color:red;"} du [texte]{style="color:green;"} [coloré]{style="color:#0000ff;"}. Utilisez [ce service en ligne](https://www.w3schools.com/colors/colors_names.asp) pour prévisualiser les couleurs CSS disponibles et trouver leurs noms. Le format hexadécimal est aussi possible, p. ex. [\#0000ff]{style="color:#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 ::: {style="text-align:left"} 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`. ::: ::: {style="text-align:center"} Un paragraphe centré avec le style de paragraphe `text-align:center`.\ Cette ligne appartient aussi au paragraphe centré. Elle est donc centrée également. ::: ::: {style="text-align:justify"} 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. ::: ::: {style="text-align:right"} 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, 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 :::::::::::::: {style="display:flex"} ::: {style="flex: 1 1 50%;padding:0.5rem"} 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. ::: ::: {style="flex: 1 1 50%;padding:0.5rem"} 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 : 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](https://fr.wikipedia.org/wiki/Image_matricielle)) en png ou jp(e)g { width=25% } et contrôler la taille de l'image à partir du fichier markdown. { width=50% } #### Images vectorielles Vous pouvez insérer des [images vectorielles](https://fr.wikipedia.org/wiki/Image_vectorielle) et contrôler leurs tailles {width=min(20em,50%)} > 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 { width=5em } ### 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](https://en.wikipedia.org/wiki/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. ```{=html}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.