Quarto & More

Bell ’24

Logistics

  • Are you in CSCI 0451?
  • Finished Software and Setup?
    • Anaconda, Quarto, VSCode, a cloned GitHub repo
  • Installation issues: drop-in help sessions or Slack

go/qrto to follow along

We will cover

  • Jupyter in VSCode
  • Markdown, figures, \(\LaTeX\)
  • Running Quarto
  • Themes for your blog!

Why Quarto

  • Prof. Phil said so
  • You can make a nice blog without much effort.
  • Learn some useful skills (such as \(\LaTeX\)) along the way.
  • Versatile:
    • Course website is made with Quarto.
    • Your blog will be made with Quarto.
    • This presentation is also made with Quarto.

Hello VSCode!

  • Open a folder
  • Command Palette: Cmd + Shift + P
  • Use the Terminal

Your first notebook

  • Open a notebook & verify kernel
  • Blocks: code or markdown or raw (Front matter for Quarto)
    • Markdown basics here
  • Edit and run Python code!

Note on autoreload

Editing imports don’t work? Use this:

%load_ext autoreload
%autoreload 2

Preview and Render with Quarto

Run quarto preview, or use the Command Palette.

Run quarto render when you are ready.

To end: Ctrl + C

Submit Changes

  • Use git or VSCode’s “Source Control” panel
  • Lots of modified files, but mostly generated stuff inside docs
  • Stage - Commit - Push
  • On GitHub: publishing from main/docs?
    • Code - About - Settings - “Use your GitHub Pages website”
  • Wait for it…

Figures!

Captions - Filename - Cross Referencing (Optional)

Use a web URL!

![An image of the Earth!](image.jpg){#fig-earth}

![xkcd comic](https://imgs.xkcd.com/comics/predictive_models_2x.png){#fig-comic}

@fig-earth is an image of the Earth.

@fig-comic is a comic by [Randall Munroe](https://xkcd.com/2861/).

Math with \(\LaTeX\)

Inline formula:

$x = 2$ gives \(x = 2\)


Simple formula:

$$ F = ma $$

\[ F = ma\]

Complex formula:

$$
f(x) = \frac{1}{\sigma \sqrt{2\pi} }
e^{-\frac{1}{2}
\left(\frac{x-\mu}{\sigma}\right)^2
}
$$

\[ f(x) = \frac{1}{\sigma \sqrt{2\pi} } e^{-\frac{1}{2} \left(\frac{x-\mu}{\sigma}\right)^2 } \]

Align with \(\LaTeX\)

$$
\begin{align*}
x&=y           &  w &=z              &  a&=b+c\\
2x&=-y         &  3w&=\frac{1}{2}z   &  a&=b\\
-4 + 5x&=2+y   &  w+2&=-1+w          &  ab&=cb
\end{align*}
$$

\[ \begin{align*} x&=y & w &=z & a&=b+c\\ 2x&=-y & 3w&=\frac{1}{2}z & a&=b\\ -4 + 5x&=2+y & w+2&=-1+w & ab&=cb \end{align*} \]

\(\LaTeX\) Life Hacks

  • Detexify: handwrite symbols
  • See how other people do it

List of supported MathJax commands

Themes!

Config file: _quarto.yml

website: options

format: options

These apply to all documents.

For example:

format:
  html:
    toc: true
    theme: flatly

There’s more!

Themes, fonts, nice plots in Python…

  • Read the docs.
    • Learn about HTML, CSS, SCSS, etc.
    • Have a nice website to show people
  • PM me @Bell on Slack

Thanks!

We’re here to help!

  • Prof. Phil’s office hours
  • Drop-in help sessions: go/cshelp
  • Slack: ask in #questions or PM me @Bell