Hands-on Session on Quarto

Author

siju.swamy@saintgits.org

Agenda

Introduction to Quarto
Get Started
Hands-on
- Listings
- Templates and Customization
- Programing

Get Started

Downloading Quarto

Download Quarto
- Linux
- MacOS
- Windows
Choose your platform
- VS Code
- Jupyter Notebook/Lab
- NeoVim
- RStudio

Download Quarto

Download Quarto: https://quarto.org/docs/get-started/

Workshop website: https://sijuswamy.github.io/CME-workshop-1/

Setup

Terminal + Text Editor (VS Code)
Visual Studio Code has options to use quarto in a better user interface

Run the command ‘quarto create project website ’
Alternatively, ctrl+shift+p and create the quarto project
Automatically Quarto will create the following directory structure:
- _quarto.yml
- index.qmd
- about.qmd
- styles.css

Structure

.yml files
- YAML is a human-readable data serialization language
- YAML is an official strict superset of JSON despite looking very different from JSON.
- To create a YAML file, use either the .yaml or .yml file extension.
.qmd files
- Work as markdown files, but they have a configuration section in yml on the top of the file

_quarto.yml
- Defines the basic structure of the website.
- All configurations are done using yml
- Some of the configurations:
  - Navigation bar
  - Side bar
  - Contents

Listings

Listings enable you to automatically generate the contents of a page (or region of a page) from a list of Quarto documents or other custom data
Useful to create blogs, newletters
Link to the documentation: https://quarto.org/docs/websites/website-listings.html

Templates and Customization

Search bar
- https://quarto.org/docs/websites/website-search.html
Themes
- https://quarto.org/docs/output-formats/html-themes.html
Tools
- https://quarto.org/docs/websites/website-tools.html

Programing

Quarto also provides the option to embed some code on your website
Quarto supports Python, R, Julia and Observable Javascript
You can create a code block delimiting using ```
Example of code running: https://tailor-uob.github.io/training-material/cha_odm/odm.html

Programing

Also Quarto allows the creation of short codes.
Shortcodes are special markdown directives that generate various types of content. Quarto shortcodes are similar in form and function to Hugo shortcodes and WordPress shortcodes.
Documentation: https://quarto.org/docs/extensions/shortcodes.html