Lesson example - Discover Quarto

Some tips to start with Quarto
Author

Ludovic Deneuville

Introduction

Welcome to this page.

Important

You can click on the Code button at the top right to see the page’s source code.

Objectives

1 Metadata

This file’s metadata are displayed at the top between the ---.

1.1 Basic setup

---
title: "Title of this page"
description: "Description of this page"
author: "Author name"
format: html                             # because it's a webpage
from: markdown+emoji                     # you use markdown language
---

1.2 Advanced

1.2.1 Add a table of contents

With the following setup, all titles, i.e. lines beginning with # will be added to the table of contents.

format:
  html:
    toc: true                            # Add a Table Of Contents
    toc-location: left
    toc-expand: 3                        # 1 : only main titles ... 5 : highly detailed

If you want to remove a title from the table of contents, use the unlisted class :

# My title {.unlisted}

1.2.2 Self-numbering

If you use the following setup, each title will be numbered.

---
number-sections: true
---

If you don’t want to number a part, use class unnumbered. In this page, Introduction and Objectives are unnumbered.

## Introduction {.unnumbered}

1.2.3 PDF export

The format of a web page is html.
But you can also export in pdf format.

format:
  html:
    ...
  pdf: 
    margin-left: 2cm
    margin-right: 2cm
    margin-top: 2cm
    margin-bottom: 2cm
    shift-heading-level-by: -1

When you will render the quarto project, it will create a file lesson.pdf in addition of lesson.html.
On the webpage, a link will appear under the table of contents to download the pdf.

Caution

To perform this you have to install first tinytex : quarto install tinytex

To publish on GitHub pages, you have to modify this step in publish.yml

.github/workflow/publish.yml
    steps:
      - name: Set up Quarto
        uses: quarto-dev/quarto-actions/setup@v2
      - run: quarto install tinytex                         # PDF engine

3 Markdown basics

For more information, you can see this page

3.1 Text format

bold

italic

italicbold

Script

strike

underline

Subscript : Un

Superscript : X2

Citation

It is also possible to add custom formatting by using the style.css file at the project root.

For one-off use, you can declare the desired style right here in the document.

Line Block
  Spaces and newlines
  are preserved

3.2 Table

More about markdown table

French Departments
Code Name City
01 Ain Bourg-en-Bresse
02 Aisne Laon
03 Allier Moulins
04 Alpes-de-Haute-Provence Digne-les-Bains
05 Hautes-Alpes Gap

3.3 List

  • item 1
    • item1.1
  • item 2

3.4 Columns

content of the first column

content of the second column

3.6 Figures and Videos

Stones

Stones
Tip

Metada lightbox: true defined at the top allow you to click on the figure.

3.7 Emoji

💡 In this page, you can add GitHub emojis. 😍

4 Advanced tools

4.1 Callout Blocks

You can easily highlight text using callout blocks.

Note

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

This is very very important

With a custom title

Hidden text

4.2 Tabulations

Content of the first tab

Content of the second tab

Content of the third tab

Caution

In the PDF output, the content of each tab will be displayed consecutively, one after the other.

4.3 Math

  • with one $ : inline \(\overline{X}_n = \frac{1}{n} \sum_{i=1}^{n}X_{i}\)
  • with two $$: \[\tilde{S}^2 = \frac{1}{n} \sum_{i=1}^{n}(X_{i} - \overline{X}_n)^{2}\]

4.4 Diagrams

Mermaid lets you create various diagrams and visualizations

flowchart LR
    20 -- +12 --> 32 -- /8 --> 4


stateDiagram-v2
    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0