flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> D[Result one]
C --> E[Result two]
Quarto Markdown
Quelques exemples de mises en page
Voici un aperçu des possibilités du markdown et des adaptations propres à Quarto qui intègre nativement bootstrap. Comparer le code et la page générée pour bien comprendre ce qui se passe !
Texte
Les basiques
Titre 1 à titre 6 avec des # (# = titre1, ## = titre2 etc…)
Les Blockquotes, avec la syntaxe > en début de ligne, marchent bien pour écrire des petites introductions sur une page.
Voici un mot en gras et un autre en italique… et un gras italique. On peut aussi mettre facilement des exposants taux2024 ou des indices Total2024.
Deux espaces (ou plus) pour aller la ligne (ou le caractère d’échappement \ suivi d’une retour à la ligne).
Du texte barré ou du verbatim code.
- Liste à puce
- sur plusieurs niveaux
- A
- B
- pour indenter proprement
- sur plusieurs niveaux
- Et liste numérotée
- pour…
- énumérer
NB : Les listes ne fonctionnent que si elles ont une ligne vide avant !
Les spéciaux
Ecrire un raccourci clavier : Shift-Ctrl-PShift-Ctrl-P
Ecrire des définitions :
- term
-
definition
Note de bas de page1 avec la syntaxe [^]. Le contenu apparaît en infobulles.
Un Line Block
permet de préserver les espaces et nouvelles lignes
pour faire du sur mesure
pour cela utiliser le | en début de ligne
permet de préserver les espaces et nouvelles lignes
pour faire du sur mesure
pour cela utiliser le | en début de ligne
Liens et images
<lien> pour un hyperlien : https://quarto.org
[texte](lien) pour un hyperlien avec texte alternatif Quarto
 pour une image : 
En mode visual, vous avez pouvez faire des copier coller d’image à la volée ! Le fichier se copiera automatiquement dans un répertoire image.
[](liens) pour un lien via une image :
Une image entouré de texte
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id massa eleifend, imperdiet lorem sit amet, lacinia tortor. Suspendisse vel posuere purus. Sed hendrerit tellus id gravida malesuada. Praesent condimentum augue in ligula bibendum, fermentum dapibus nibh viverra. Maecenas consequat tempor neque vitae sagittis. Sed vel risus molestie, tincidunt eros at, tempor nulla. Aenean velit neque, bibendum at mauris id, ultricies semper ante. Nam blandit velit vitae est lacinia, sit amet condimentum velit pulvinar. Vestibulum vitae arcu blandit tellus pharetra ultrices non nec erat. Donec a tincidunt lorem.
In elementum eros consequat pulvinar pulvinar. Donec vitae cursus orci, vel pharetra enim. Vivamus viverra tincidunt nibh, consectetur suscipit dui sagittis nec. Nam dictum sed ipsum sit amet convallis. Fusce egestas et erat eu aliquam. Aliquam ac congue velit, eget posuere ipsum. Maecenas nec vehicula dolor, vitae sodales nisi.
Tableau
Pour faire des tableaux simples, passer par le mode visual beaucoup plus pratique !
| Code | Nom |
|---|---|
| 76540 | Rouen |
| 76351 | Le Havre |
Code
Vous pouvez écrire du code (non exécuté) pour documenter votre travail
SELECT * FROM schema.table
WHERE id=666let x=1;
let y= 4x + 2;
console.log(y)Equation
Ecriture mathématique intégré dans une ligne : E = mc^{2}
ou bien mise en évidence à la ligne : P(E) = {n \choose k} p^k (2-p)^{n-k}
Schema
La bibliothèque mermaid est intégrée à Quarto et permet de réaliser des schémas à partir d’une syntaxe très simplifiée.
Autre exemple avec un diagramme de GANT de la même librairie :
gantt
%%title Calendrier prévisionnel
tickInterval 1month
dateFormat YYYY-MM-DD
section Phase 1 Usages, surfaces
Synthèse du PCAET :done, p1_1, 2024-06-20, 1d
Collecte données :done, p1_2, after p1_1, 4w
Réunion de lancement :crit, r1, 2024-07-04, 1d
Création BDD MRN :done, p1_3, after p1_2, 2w
COTECH n°1 :crit, c1, 2024-09-19, 1d
section Phase 2 NRJ
Benchmark :done, p2_1, after p1_1, 5w
Réunion mi-phase :crit, r2, after c1, 1d
Echelle et jeu d'hypothèses :done, p2_2, after c1, 4w
section Phase 3 PortailWeb
Articles au fil de l'eau : done, p3_1, after r1, 12w
Réunion mi-phase :crit, r3, 2024-11-08, 1d
Dashboard : active, p3_2, after c1, 8w
COTECH n°2 et 3 : crit, c3, 2024-11-15, 1d
Ajustements : p3_3, after c3, 4w
Les callout
Callout basiques
Note
Note that there are five types of callouts, including: note, tip, warning, caution, and important.
Astuce
un callout tip
Avertissement
Un callout warning
Mise en garde
un callout caution
Important
un callout important
Variantes titre, simple et expandable
Mon titre personnalisé
Exemple de callout avec un titre personnalisé
Apparence simple
Il est possible d’utiliser une variante plus simple simplement pour surligner le propos.
La version expandable, cliquez pour en savoir +…
Et voici un callout replié qui peut être déplié pour voir son contenu, très pratiques pour les encarts en savoir +…
Les boostrap icons
Quarto intègre bootstrap et vous pouvez écrire directement du html dans une page en markdown… alors des milliers d’icons sont disponibles sur
Vous pouvez copier coller la syntaxe directement sur le site bootstrap icons et illustrer votre article :
Les emojis 🥰🥰🥰
Très pratique, les emojis permettent de mettre des symboles au milieux de son texte, 😁🤯.
Les onglets
Celui qui lit…
… ceci…
… est une patate.
Les colonnes
Il est possible d’encapsluer son texte dans des colonnes assez simplement. Il existe des possibilités plus avancées mais la syntaxe de base permet déjà de faire beaucoup. Attention, ces colonnes resteront des colonnes même sur des petits écrans (cf grille pour le responsive design).
Lorem ipsum odor amet, consectetuer adipiscing elit. Ligula pharetra aliquet fringilla, dolor himenaeos phasellus varius nostra. Bibendum accumsan curae rutrum luctus posuere porta. Iaculis penatibus ac adipiscing potenti; consequat quisque. Quam lorem ultrices neque nec luctus duis. Consectetur pharetra morbi consectetur mi posuere fusce vitae. Nisi porta ullamcorper nec mollis, eu ante dui efficitur. Torquent iaculis penatibus id montes quisque.
Non nullam congue adipiscing aenean suspendisse senectus? Neque et dui feugiat porta potenti donec aliquet. Luctus nibh ligula interdum; tincidunt est tellus potenti elementum. Pretium amet euismod nullam egestas primis est duis magna. Cursus imperdiet sollicitudin ut eu parturient. Proin morbi inceptos tortor vestibulum, faucibus potenti neque. Penatibus sed tellus; ac maecenas libero pretium. Condimentum gravida egestas hac torquent sociosqu aliquet fermentum duis nisl.
Les grilles responsive design
Plus subtil et faisant appel à Bootstrap, les grilles permettent de définir précisément comment les colonnes se réorganisent : doc bootstrap.
Selon la taille de l’écran on peut définir, sur une grille de 12 cases, l’espace occupé par chaque élément.
Pour bien comprendre la syntaxe quarto : les ::: correspondent au div html (trois doubles points pour ouvrir, le contenu, trois doubles points pour fermer) et les {.class} aux class=“maclasse” du html.
Sur un écran small sm, l’élément occupera 12 cases de grilles (largeur totale), sur un ecran medium md l’éléments occupera 6 cases (moitié de l’écran donc deux colonnes et deux lignes) et sur un écran très large xl l’élément occupera 4 cases de grilles (donc trois colonnes).
::: {.grid}
::: {.g-col-sm-12 .g-col-md-6 .g-col-xl-4}
Colonne 1
:::
::: {.g-col-sm-12 .g-col-md-6 .g-col-xl-4}
Colonne 2
:::
::: {.g-col-sm-12 .g-col-md-6 .g-col-xl-4}
Colonne 3
:::
:::Exemple : changer la taille de la fenêtre et ces trois colonnes passeront sur 2 puis 3 lignes.
Colonne 1
Colonne 2
Colonne 3
Gallerie d’images avec lightbox
Quarto intègre lightbox, une librairie qui permet de gérer les images. En ajoutant lightbox: true dans l’entête yaml vous activez celle-ci.
Cliquez sur une image ci-dessous pour la faire apparaître en plein écran et naviguer dans sa galerie :
Et si on sortait du cadre…
un peu :
et de la noblesse de leurs petites façons ; il avait besoin de laver son imagination de toutes les façons d’agir vulgaires, de toutes les pensées désagréables au milieu desquelles il respirait à Verrières. C’était toujours la crainte de manquer, c’étaient toujours le luxe et la misère se prenant aux cheveux. Les gens chez qui il dînait, à propos de leur rôti, faisaient des confidences humiliantes pour eux, et nauséabondes pour qui les entendait.
C’était Mme de Rênal, qui avait fait un voyage à la ville, et qui, montant les escaliers quatre à quatre et laissant ses enfants occupés d’un lapin favori qui était du voyage, était parvenue à la chambre de Julien, un instant avant eux. Ce moment fut délicieux, mais bien court : Mme de Rênal avait disparu quand les enfants arrivèrent avec le lapin, qu’ils voulaient montrer à leur ami. Julien fit bon accueil à tous, même au lapin. Il lui semblait retrouver sa famille ; il sentit qu’il aimait ces enfants, qu’il se plaisait à jaser avec eux. Il était étonné de la douceur de leur voix, de la simplicité
ou beaucoup
M. de Rênal avait ordonné à Julien de loger chez lui. Personne ne soupçonna ce qui s’était passé. Le troisième jour après son arrivée, Julien vit monter jusque dans sa chambre un non moindre personnage que M. le sous-préfet de Maugiron. Ce ne fut qu’après deux grandes heures de bavardage insipide et de grandes jérémiades sur la méchanceté des hommes, sur le peu de probité des gens chargés de l’administration des deniers publics, sur les dangers de cette pauvre France, etc., etc., que Julien vit poindre enfin le sujet de la visite. On était déjà sur le palier de l’escalier, et le pauvre précepteur à demi disgracié reconduisait avec le respect convenable le futur préfet de quelque heureux département, quand il plut à celui-ci de s’occuper de la fortune de Julien, de louer sa modération en affaires d’intérêt, etc., etc. Enfin M. de Maugiron, le serrant dans ses bras de l’air le plus paterne, lui proposa de quitter M. de Rênal et d’entrer chez un fonctionnaire qui avait des enfants à éduquer, et qui, comme le roi Philippe, remercierait le ciel, non pas tant de les lui avoir donnés que de les avoir fait naître dans le voisinage de M. Julien. Leur précepteur jouirait de huit cents francs d’appointements payables non pas de mois en mois, ce qui n’est pas noble, dit M. de Maugiron, mais par quartier et toujours d’avance.
Et encore beaucoup de possibilités…
La documentation sur le site Quarto présente de nombreuses possibilités de mise en page notamment :
- les article layout
- les dashboards
Et n’oubliez pas qu’il est toujours possible d’écrire en html et css pour sortir des sentier battus ou pour intégrer une charte graphique !
Notes de bas de page
Ceci est une note de bas de page rédigé avec la syntaxe [^1]: en cliquant sur le petit symbole de flèche vous pouvez retourner à l’endroit de l’article référencé. Pratique : vous écrivez la note de bas de page où vous voulez !↩︎