Documentation

Tinh Vo

Technische Universität Darmstadt

21 May, 2025

Sample section, in reality this would be Background or Motivation

Incremental slides , also let’s say that this section is really long so that the next h3 will include it all for sizing

  • Step 1
  • Step 2

Only list items are incremented

Reddit–comment-style sparse for linebreak
And \ \ for hard newline

or with 3 dots , like “. . .”

Outside of .incremental, list items must have empty lines above . . .

Subsubsection

This is a check for persistent header: h2 should be on upper right
h3 is not considered as a header

Columns

only split col inside ::: {.column} :::

Collumn size with width= - WARNING! style="width: 40%" is NOT correct!

Left column

Right column

Codeblock col-template for your copying pleasure:

:::: {.columns}

::: {.column .col-border-right width="50%" style="font-size: 50%;"}
:::

::: {.column width="50%" style="font-size: 50%;"}
:::

::::

Content alignment

To manual line break, \n will not work -> use <br>

Centering : There is only one option known to work, style="text-align:center". Put this into delimiters

In fact, anything to be centered can enter a centered generic block, including images ::: {.block style="text-align:center"} :::

You can stack stuff on top of each other (any block) with the .r-stack property {.fragment}

See how it works? {.fragment}

  • To use with .columns, care is needed:
    • force full width for columns
    • properly .block other contents
:::::: {.r-stack }

:::: {.columns style="width: 100%;" .fragment}

::: {.column width="50%"}
Content left
:::

::: {.column width="50%" style="text-align:right"}
Content right
:::

:::: 

:::: {.block .fragment}
Content after
::::

::::::

For images, use fig-align="center"

Photo management

with [Caption](/path/to/image.png)

    • Positioning : a verbose example
      {.absolute top=200 left=0 width="350" height="300"}, vice versa
    • offset relative from usual position, instead of absoluting
  • Overlaying
    • ::: {.r-stack} into ![](image.png){.fragment}
  • Vertical stretch-to-fill
    • Enable: {.r-stretch}
    • Disable: {.nostretch}
  • change dir structure to source from one single ext file
    • careful gitignore template
    • cascading custom styles, local variable to each ppt
  • snippets
    • br
    • block
    • style
    • center
    • fragment

Formatting

Apply into {style="key:value;"} or .smaller
Applicable {key}s

- font-size: {#}%; // This is parsed as pseudo code - commonmark issue

.scollable scroll long code
.fragment delay display until next arrow cmd

  • Tabs : ::: {.panel-tabset} ::: , with ### being each tab

Flow control

Instead , use other line break strings like *** or ___ 1

Fragments

For a text:

Normal fragment are its own line/block , wrapped in .fragment

But if you want to do it inline,

use :::: {.inline-fragment} (4x:) in addition, wrapping the block.

this was hacked with css

For irregular order, add fragment-index=

indexed fragments will show first by defaul ie. cannot intercept ordering implicitly

For an equation: \[ x = \class{fragment}{{} x(x+1) + 1(x+1)} \] Use \class{fragment}{ ... } , but ordering appearance here is impossible

Citations

Citation with footnotes 1 via:

Python embed

Render code with “{.code}” eg. {.python}

  • Highlight lines code-line-numbers=, no spaces!
  • Incremental highlights with | separation
  • Leave the entire block highlighted with | at start
  • eg. {.python code-line-numbers="7,9|10"}
#| label: fig-1
#| fig-cap: "Demo plot name"
#| echo: true
#| output-location: column

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(  subplot_kw = {'projection': 'polar'} )
ax.plot(theta, r);ax.set_rticks([0.5, 1, 1.5, 2]); ax.grid(True) ; plt.show()

tagalong css styles with style="key:value;"
code wrapping does not work (yet)

Figure 1: Demo plot name

(see forced squashing) Code should be separate from source items, size adjustment & other formatting likely

Or to dump the plot to next slide (no heading), use

#| echo: true
#| output-location: column

Python embed 2

To really echo true source, use output options:

  • fragment
  • slide
  • column
  • column-fragment (just a combi)
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(  subplot_kw = {'projection': 'polar'} 
,figsize=(3,3)) # this for size 
ax.plot(theta, r);
ax.set_rticks([0.5, 1, 1.5, 2]); 
ax.grid(True) ; plt.show()
Figure 2: Source-echoed plot

Python embed 3

Presenting anims

  • Zoom: Alt + Click (or Ctrl + Click on Linux)
  • Speaker view: press s
  • Click the hamburger menu or press m 1
  • Black out: press b
  • Code anim: with ## {auto-animate=true} between 2 codeblocks

Separating slides


<!-- {{< include /path/to/_file.qmd >}} -->

Subfiles MUST start with a _

Automation

TODO - md basics are different

https://quarto.org/docs/authoring/markdown-basics.html