• Reorder slides by dragging the cards in the left list (or Alt+Shift+↑/↓).
• Hover a slide card for duplicate / delete buttons (both ask for confirmation).
• Red dots beside line numbers and ⚠ on slide cards show live QMD diagnostics (hover for details).
• Pasting an image (Ctrl+V) into the editor opens the crop dialog directly.
• Retyping text in the preview by double-clicking it (qmd_editor) is not available here yet.

---
title: "Title"
subtitle: "Subtitle"
---

## Slide heading

Body text

## Next slide

• ## is the normal slide boundary.
• ### is a heading inside a slide. Lua styles it as .slide-body-heading.
• --- is for YAML front matter; do not use it as a separator in the body.

::: {.class1 .class2 key="value"}
Content
:::

• ::: is a fenced div. Classes are .name, attributes are key="value".
• For nesting, make the outer fence longer: ::::, ::::: ...
• Some classes are passed straight to HTML/CSS; others are special classes transformed by Lua.

::: {.callout-note}
## Text shown in the colored header
Body text
:::

• The first Markdown heading inside the callout becomes its colored-header title.
• You can also write ::: {.callout-note title="Header text"}.
• The toolbar's Callout button asks for this title after you choose the type.

::: {.takeaway}
One slide, one key message.
:::

::: {.takeaway .dark}
The same box, white on black.
:::

• Use one short sentence after the slide's supporting content.
• It renders as a large centered box with a square black outline on white.
• Add .dark for white text on a black fill.
• It stays in normal flow rather than being pinned to the viewport.
• The toolbar's Takeaway button asks for the style, then wraps the selected text.

::::: {.columns}
:::: {.column width="50%"}
Left
::::

:::: {.column width="50%"}
Right
::::
:::::

• Put .column inside .columns.
• Set widths with width="40%" etc.
• Columns are top-aligned. Add .columns-v-center to the .columns div to align them on their vertical centers instead — meant for a short figure beside a tall block of text.
• For Python output, #| output-location: column and #| classes: columns3070 also work.

## {background-color="white" .center .break-slide}

::: {.break-title}
Chapter title
:::

• .break-slide is excluded from the automatic slide-body wrapping.
• .break-title renders as a large section title.

::: {.fig-cite src="imgs/foo.png" height="90%"}
::: {.content-box .pos-br}
Caption or description
:::
::: {.cite}
Source: <https://example.com>
:::
:::

## {.bg-cover src="imgs/foo.png"}

::: {.cite}
Source: <https://example.com>
:::

• .bg-cover — Lua turns the slide heading into a background image slide.
• .no-header is added automatically.

::: {.plotly-iframe src="iframes/map.html" width="900" height="520"}
:::

• .plotly-iframe — Lua turns it into a centered iframe.
• Generate the file first on the Python side: fig.write_html("iframes/name.html", include_plotlyjs="cdn").

[link text](other.qmd#peek-id){.peek}

Opens a single slide of another deck in a modal overlay (no navigation). The target slide needs an explicit id:

## Heading {#peek-id}

• Use the 👁 Peek toolbar button: pick the deck and the slide, and if the slide has no id one is created and written back for you.
• Ids are assigned by hand (convention: start them with peek-), so renaming a heading never breaks the link.
• Best for static slides (figures, tables, code). Interactive Plotly slides do not re-initialize from the clone — don't peek those.

```{python}
#| echo: true
#| eval: false
#| code-fold: true
#| code-summary: "Show solution"

print("hello")
```

Scale a plot's output to any width (centered, aspect kept):

::: {.fig width="50%"}
```{python}
plt.plot(...)
plt.show()
```
:::

Set the figure's own shape with plt.figure(figsize=(w, h)).

```{mermaid}
flowchart LR
  A --> B
```

```{=html}
<div>Write raw HTML</div>
```

• #| lightbox: true makes an image zoomable.
• .mermaid-compact is a helper class for tighter Mermaid layout.

::: {.callout-tip}
## Key points
- ...
:::

```{python}
#| echo: true
#| eval: false
#| code-fold: true
#| code-summary: "Show solution"

```