### Touying Bootstrap Setup Prelude

Source: https://github.com/touying-typ/touying/blob/main/docs/README.md

Use `>>>` prefixed lines inside an `example` block for prelude/setup content. This injects common Touying bootstrap code (imports and theme setup) to avoid repeating boilerplate in the visible demo body.

```typst
>>> #import "@preview/touying:0.7.3": *
>>> #import themes.simple: *
>>> #show: simple-theme
```

--------------------------------

### Executable Touying Example

Source: https://github.com/touying-typ/touying/blob/main/docs/README.md

Use `example` fences for snippets intended to be rendered and validated as runnable examples by docs tooling. This includes imports, theme setup, and content.

```markdown
```example
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(aspect-ratio: "16-9")

= Title
== First Slide
Hello, Touying!
```
```

--------------------------------

### Example: Using Handout Mode in a Theme

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/handout.md

This example demonstrates how to integrate `config-common(handout: true)` into a theme setup, such as `simple-theme`. It shows a presentation with multiple subslides, where only the last one will be kept by default in handout mode.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(
  aspect-ratio: "16-9",
  config-common(handout: true),
)

= Title

== Animated Slide

First item.

#pause

Second item (won't generate a separate page in handout mode).

#pause

Third item.
```

--------------------------------

### Simple Theme Example Presentation

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/simple.md

A complete example demonstrating the initialization of the Simple theme and the usage of title-slide, focus-slide, and default slide functionalities, including sections and pauses.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(
  aspect-ratio: "16-9",
  footer: [Simple slides],
)

#title-slide[
  = Keep it simple!
  #v(2em)

  Alpha #footnote[Uni Augsburg] #h(1em)
  Bravo #footnote[Uni Bayreuth] #h(1em)
  Charlie #footnote[Uni Chemnitz] #h(1em)

  July 23
]

== First slide

#lorem(20)

#focus-slide[
  _Focus!_

  This is very important.
]

= Let's start a new section!

== Dynamic slide

Did you know that...

#pause

...you can see the current section at the top of the slide?
```

--------------------------------

### Full Stargazer Theme Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/stargazer.md

A comprehensive example demonstrating the initialization and usage of the Stargazer theme, including various slide types, theorems, and content pauses.

```typst
#import "@preview/touying:0.7.3": *
#import themes.stargazer: *

#import "@preview/numbly:0.1.0": numbly

#show: stargazer-theme.with(
  aspect-ratio: "16-9",
  config-info(
    title: [Stargazer in Touying: Customize Your Slide Title Here],
    subtitle: [Customize Your Slide Subtitle Here],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
    logo: emoji.school,
  ),
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

#title-slide()

#outline-slide()

= Section A

== Subsection A.1

#tblock(title: [Theorem])[
  A simple theorem.

  $ x_(n+1) = (x_n + a / x_n) / 2 $
]

== Subsection A.2

A slide without a title but with *important* information.

= Section B

== Subsection B.1

#lorem(80)

#focus-slide[
  Wake up!
]

== Subsection B.2

We can use `#pause` to #pause display something later.

#pause

Just like this.

#meanwhile

Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.

#show: appendix

= Appendix

== Appendix

Please pay attention to the current slide number.
```

--------------------------------

### Complete University Theme Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/university.md

A comprehensive example demonstrating the initialization of the University theme, including title slide, section slides, focus slide, and various matrix slide configurations.

```typst
#import "@preview/touying:0.7.3": *
#import themes.university: *

#import "@preview/numbly:0.1.0": numbly

#show: university-theme.with(
  aspect-ratio: "16-9",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
    logo: emoji.school,
  ),
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

#title-slide(authors: ([Author A], [Author B]))

= The Section

== Slide Title

#lorem(40)

#focus-slide[
  Another variant with primary color in background...
]

#matrix-slide[
  left
][
  middle
][
  right
]

#matrix-slide(columns: 1)[
  top
][
  bottom
]

#matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9)
```

--------------------------------

### Install Dependencies

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/gistd.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Touying Exporter

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/touying-exporter.md

Install the touying package using pip. This command is used to set up the exporter for command-line use.

```sh
pip install touying
```

--------------------------------

### Develop Locally

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/gistd.md

Start the local development server using pnpm.

```bash
pnpm dev
```

--------------------------------

### Full Dewdrop Theme Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/dewdrop.md

A comprehensive example demonstrating the initialization of the Dewdrop theme, including custom slide content, sections, subsections, and special slide types like focus-slide and appendix.

```typst
#import "@preview/touying:0.7.3": *
#import themes.dewdrop: *

#import "@preview/numbly:0.1.0": numbly

#show: dewdrop-theme.with(
  aspect-ratio: "16-9",
  footer: self => self.info.institution,
  navigation: "mini-slides",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
  ),
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

#title-slide()

#outline-slide()

= Section A

== Subsection A.1

$ x_(n+1) = (x_n + a/x_n) / 2 $

== Subsection A.2

A slide without a title but with *important* infos

= Section B

== Subsection B.1

#lorem(80)

#focus-slide[
  Wake up!
]

== Subsection B.2

We can use `#pause` to #pause display something later.

#pause

Just like this.

#meanwhile

Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.

#show: appendix

= Appendix

== Appendix

Please pay attention to the current slide number.
```

--------------------------------

### Simple Pinit Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/pinit.md

Demonstrates basic usage of pinit for highlighting text and adding points from a pin.

```typst
#import "@preview/pinit:0.2.2": *

#set text(size: 24pt)

A simple #pin(1)highlighted text#pin(2).

#pinit-highlight(1, 2)

#pinit-point-from(2)[It is simple.]
```

--------------------------------

### Complex Pinit Example with Touying Integration

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/pinit.md

An advanced example showcasing Pinit's integration with Touying for creating slides with complex layouts, highlighting, and pointing effects. Requires Touying and Pinit imports.

```typst
#import "@preview/touying:0.7.3": *
#import themes.default: *
#import "@preview/pinit:0.2.2": *

#set text(size: 20pt, font: "Calibri", ligatures: false)
#show heading: set text(weight: "regular")
#show heading: set block(above: 1.4em, below: 1em)
#show heading.where(level: 1): set text(size: 1.5em)

// Useful functions
#let crimson = rgb("#c00000")
#let greybox(..args, body) = rect(fill: luma(95%), stroke: 0.5pt, inset: 0pt, outset: 10pt, ..args, body)
#let redbold(body) = {
  set text(fill: crimson, weight: "bold")
  body
}
#let blueit(body) = {
  set text(fill: blue)
  body
}

#show: default-theme.with(aspect-ratio: "4-3")

// Main body
#slide[
  #set heading(offset: 0)

  = Asymptotic Notation: $O$

  Use #pin("h1")asymptotic notations#pin("h2") to describe asymptotic efficiency of algorithms.
  (Ignore constant coefficients and lower-order terms.)

  #pause

  #greybox[
    Given a function $g(n)$, we denote by $O(g(n))$ the following *set of functions*:
    #redbold(${f(n): "exists" c > 0 "and" n_0 > 0, "such that" f(n) <= c dot g(n) "for all" n >= n_0$})
  ]

  #pinit-highlight("h1", "h2")

  #pause

  $f(n) = O(g(n))$: #pin(1)$f(n)$ is *asymptotically smaller* than $g(n)$.#pin(2)

  #pause

  $f(n) redbold(in) O(g(n))$: $f(n)$ is *asymptotically* #redbold[at most] $g(n)$.

  #only("4-", pinit-line(stroke: 3pt + crimson, start-dy: -0.25em, end-dy: -0.25em, 1, 2))

  #pause

  #block[Insertion Sort as an #pin("r1")example#pin("r2"):]

  - Best Case: $T(n) approx c n + c' n - c''$ #pin(3)
  - Worst case: $T(n) approx c n + (c' \/ 2) n^2 - c''$ #pin(4)

  #pinit-rect("r1", "r2")

  #pause

  #pinit-place(3, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]
  #pinit-place(4, dx: 15pt, dy: -15pt)[#redbold[$T(n) = O(n)$]]

  #pause

  #blueit[Q: Is $n^(3) = O(n^2)$#pin("que")? How to prove your answer#pin("ans")?]

  #pause

  #pinit-point-to("que", fill: crimson, redbold[No.])
  #pinit-point-from("ans", body-dx: -150pt)[
    Show that the equation $(3/2)^n >= c$ \ 
has infinitely many solutions for $n$.
  ]
]
```

--------------------------------

### Full Metropolis Theme Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/metropolis.md

A comprehensive example demonstrating the initialization of the Metropolis theme, including custom info, heading numbering, title slide, outline, regular slides, a focus slide, and slides with pause/meanwhile/speaker notes.

```typst
#import "@preview/touying:0.7.3": *
#import themes.metropolis: *

#import "@preview/numbly:0.1.0": numbly

#show: metropolis-theme.with(
  aspect-ratio: "16-9",
  footer: self => self.info.institution,
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
    logo: emoji.city,
  ),
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

#title-slide()

= Outline <touying:hidden>

#outline(title: none, indent: 1em, depth: 1)

= First Section

---

A slide without a title but with some *important* information.

== A long long long long long long long long long long long long long long long long long long long long long long long long Title

=== sdfsdf

A slide with equation:

$ x_(n+1) = (x_n + a/x_n) / 2 $

#lorem(200)

= Second Section

#focus-slide[
  Wake up!
]

== Simple Animation

We can use `#pause` to #pause display something later.

#meanwhile

Meanwhile, #pause we can also use `#meanwhile` to display other content synchronously.

#speaker-note[
  + This is a speaker note.
  + You won't see it unless you use `config-common(show-notes-on-second-screen: right)`
]

#show: appendix

= Appendix

---

Please pay attention to the current slide number.
```

--------------------------------

### item-by-item with Waypoint Start

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/waypoints.md

Use the `start` parameter in `#item-by-item` to specify a waypoint label. Items will begin revealing from that waypoint's position.

```typst
#slide[
  #item-by-item(start: <list>)[
    - Alpha
    - Beta
    - Gamma
  ]
  #only(<done>)[All items revealed.]
]
```

--------------------------------

### Touying Theorem Example

Source: https://github.com/touying-typ/touying/blob/main/README.md

Provides an example illustrating a theorem within Touying, referencing a theorem label for cross-referencing.

```typst
#example[
  The numbers $2$, $3$, and $17$ are prime.
  @cor_largest_prime shows that this list is not exhaustive!
]
```

--------------------------------

### Basic Theorion Integration with Touying

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/theorion.md

This example demonstrates how to set up Touying to work with Theorion, including importing necessary packages, configuring themes, and defining theorems, definitions, and proofs. It shows how to set heading numbering and freeze counters for animations.

```typst
#import "@preview/touying:0.7.3": *
#import themes.university: *
#import "@preview/numbly:0.1.0": numbly
#import "@preview/theorion:0.6.0": *
#import cosmos.clouds: *
#show: show-theorion

#show: university-theme.with(
  aspect-ratio: "16-9",
  config-common(frozen-counters: (theorem-counter,)),  // freeze theorem counter for animation
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

= Theorems

== Prime numbers

#definition[
A natural number is called a #highlight[_prime number_] if it is greater
than 1 and cannot be written as the product of two smaller natural numbers.
]
#example[
The numbers $2$, $3$, and $17$ are prime.
@cor_largest_prime shows that this list is not exhaustive!
]

#pause

#theorem(title: "Euclid")[
  There are infinitely many primes.
]

#pagebreak(weak: true)

#proof[
  Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration
  of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,
  it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since
  $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a
  contradiction.
]

#corollary[ 
  There is no largest prime number.
] <cor_largest_prime>
#corollary[ 
  There are infinitely many composite numbers.
]

#theorem[
  There are arbitrarily long stretches of composite numbers.
]

#proof[
  For any $n > 2$, consider $
    n! + 2, quad n! + 3, quad ..., quad n! + n
  ]

```

--------------------------------

### Full Touying Example with University Theme

Source: https://github.com/touying-typ/touying/blob/main/README.md

Demonstrates a comprehensive Touying presentation using the university theme, including animations, speaker notes, and theorem environments. Requires importing multiple preview packages.

```typst
#import "@preview/touying:0.7.3": *
#import themes.university: *
#import "@preview/cetz:0.5.0"
#import "@preview/fletcher:0.5.8" as fletcher: node, edge
#import "@preview/numbly:0.1.0": numbly
#import "@preview/theorion:0.6.0": *
#import cosmos.clouds: *
#show: show-theorion

// cetz and fletcher bindings for touying
#let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true))
#let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)

#show: university-theme.with(
  aspect-ratio: "16-9",
  // align: horizon,
  // config-common(handout: true),
  config-common(frozen-counters: (theorem-counter,)),  // freeze theorem counter for animation
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    logo: emoji.school,
  ),
)

#set heading(numbering: numbly("{1}.", default: "1.1"))

#title-slide()

== Outline <touying:hidden>

#components.adaptive-columns(outline(title: none, indent: 1em))

= Animation

== Simple Animation

We can use `#pause` to #pause display something later.

#pause

Just like this.

#meanwhile

Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.

#speaker-note[
  + This is a speaker note.
  + You won't see it unless you use `config-common(show-notes-on-second-screen: right)`
]


== Complex Animation

At subslide #touying-fn-wrapper((self: none) => str(self.subslide)), we can

use #uncover("2-")[`#uncover` function] for reserving space,

use #only("2-")[`#only` function] for not reserving space,

#alternatives[call `#only` multiple times 
][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.


== Callback Style Animation

#slide(
  repeat: 3,
  self => [
    #let (uncover, only, alternatives) = utils.methods(self)

    At subslide #self.subslide, we can

    use #uncover("2-")[`#uncover` function] for reserving space,

    use #only("2-")[`#only` function] for not reserving space,

    #alternatives[call `#only` multiple times 
][use `#alternatives` function #sym.checkmark] for choosing one of the alternatives.
  ],
)


== Math Equation Animation

Equation with `pause`:

$ 
  f(x) &= pause x^2 + 2x + 1 
  &= pause (x + 1)^2 
$

#meanwhile

Here, #pause we have the expression of $f(x)$.

#pause

By factorizing, we can obtain this result.


== CeTZ Animation

CeTZ Animation in Touying:

#cetz-canvas({
  import cetz.draw: *

  rect((0, 0), (5, 5))

  (pause,)

  rect((0, 0), (1, 1))
  rect((1, 1), (2, 2))
  rect((2, 2), (3, 3))

  (pause,)

  line((0, 0), (2.5, 2.5), name: "line")
})


== Fletcher Animation

Fletcher Animation in Touying:

#fletcher-diagram(
  node-stroke: .1em,
  node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),
  spacing: 4em,
  edge((-1, 0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),
  node((0, 0), `reading`, radius: 2em),
  edge((0, 0), (0, 0), `read()`, "--|>", bend: 130deg),
  pause,
  edge(`read()`, "-|>"),
  node((1, 0), `eof`, radius: 2em),
  pause,
  edge(`close()`, "-|>"),
  node((2, 0), `closed`, radius: 2em, extrude: (-2.5, 0)),
  edge((0, 0), (2, 0), `close()`, "-|>", bend: -40deg),
)


= Theorems

== Prime numbers

#definition[
  A natural number is called a #highlight[_prime number_] if it is greater
  than 1 and cannot be written as the product of two smaller natural numbers.
]
#example[
  The numbers $2$, $3$, and $17$ are prime.
  @cor_largest_prime shows that this list is not exhaustive!
]

#theorem(title: "Euclid")[
  There are infinitely many primes.
]
#pagebreak(weak: true)
#proof[
  Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration
  of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,
  it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since
  $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a
  contradiction.
]

#corollary[
  There is no largest prime number.
] <cor_largest_prime>
#corollary[
  There are infinitely many composite numbers.
]

#theorem[
  There are arbitrarily long stretches of composite numbers.
]

#proof[
  For any $n > 2$, consider $
    n! + 2, quad n! + 3, quad ..., quad n! + n
  ]


= Others

== Multiple columns

#cols[
  First column.
][
  Second column.
]

== Multiple columns with equal height blocks

#cols(columns: (1fr, 1fr), gutter: 1em)[
  #emph-block[
    First column with equal height: #lorem(10)
    #lazy-v(1fr)
  ]
][
  #emph-block[
    Second column with equal height: : #lorem(15)
    #lazy-v(1fr)
  ]
]


== Multiple Pages

#lorem(200)


#show: appendix

= Appendix

== Appendix

```

--------------------------------

### Simple Style Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/code-styles.md

Demonstrates basic content input under titles for simple page separation and animation effects using #pause.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(aspect-ratio: "16-9")

= Title

== First Slide

Hello, Touying!

#pause

Hello, Typst!
```

--------------------------------

### Complex Example with Waypoints and Alternatives

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/waypoints.md

Demonstrates reusing waypoints to refer to a range of subslides and integrating with `#alternatives` for conditional content.

```typst
#slide(composer: (1fr, 1fr))[
  #item-by-item(start: <steps>)[
    - Step one
    - Step two
    - Step three
  ]
  #pause
  Some remark.
  #uncover(<done>)[All done!]
][
  #alternatives(at: (<steps>, <done>))[
    _Working through the steps..._
  ][
    _Complete!_
  ]
]
```

--------------------------------

### Set Preamble for Package Integration

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/settings.md

Use the `preamble` option within `config-common` to run setup code on every slide, useful for integrating packages like `codly`.

```typst
#show: simple-theme.with(
  config-common(preamble: {
    codly(languages: codly-languages)
  }),
)
```

--------------------------------

### Structuring Multiple Sections in Touying

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/multi-file.md

Organize content into multiple sections by placing files in a `sections` directory and including them in `main.typ`. This example shows how to include `sections/content.typ`.

```typst
// main.typ
#import "/globals.typ": *

#show: university-theme.with(
  aspect-ratio: "16-9",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
    logo: emoji.school,
  ),
)

#include "sections/content.typ"
// #include "sections/another-section.typ"
```

--------------------------------

### Touying Theorem Definition and Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/start.md

Defines and illustrates a prime number using Touying's theorem environment, including a definition, an example, and a theorem with a proof.

```touying
= Theorems

== Prime numbers

#definition[
  A natural number is called a #highlight[_prime number_] if it is greater
  than 1 and cannot be written as the product of two smaller natural numbers.
]
#example[
  The numbers $2$, $3$, and $17$ are prime.
  @cor_largest_prime shows that this list is not exhaustive!
]

#theorem(title: "Euclid")[
  There are infinitely many primes.
]
#pagebreak(weak: true)
#proof[
  Suppose to the contrary that $p_1, p_2, dots, p_n$ is a finite enumeration
  of all primes. Set $P = p_1 p_2 dots p_n$. Since $P + 1$ is not in our list,
  it cannot be prime. Thus, some prime factor $p_j$ divides $P + 1$. Since
  $p_j$ also divides $P$, it must divide the difference $(P + 1) - P = 1$, a
  contradiction.
]

#corollary[
  There is no largest prime number.
] <cor_largest_prime>
#corollary[
  There are infinitely many composite numbers.
]

#theorem[
  There are arbitrarily long stretches of composite numbers.
]

#proof[
  For any $n > 2$, consider $
    n! + 2, quad n! + 3, quad ..., quad n! + n
  ]

```

--------------------------------

### Using Touying with pinit Package

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Integrate Touying with the `pinit` package by importing both and using `#pin` and `#pinit-highlight` within slides. For animated reveals, use a callback-style slide with `#pause`.

```example
#import "@preview/touying:0.7.3": *
#import "@preview/pinit:0.2.2": *
#import themes.simple: *

#show: simple-theme.with(aspect-ratio: "16-9")

#slide[
  A #pin(1)key term#pin(2) to highlight.

  #pinit-highlight(1, 2)
]
```

--------------------------------

### Accessing Global and Slide Configuration

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Use `touying-get-config` to retrieve configuration information during context time. Be aware that local slide configurations may override global ones.

```example
#import "@preview/touying:0.7.3": *
#import themes.simple: *
#show: simple-theme.with(
  config-info(author: "Beautiful Name")
)
#slide(config:config-colors(primary: rgb("ABCDEF")))[
  #touying-get-config().info.author
  
  #touying-get-config().colors.primary
]
```

--------------------------------

### Run Touying Tests

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Touying uses the tytanic test framework. Install it with `cargo binstall tytanic` and run tests using `tt run`. Tests are organized in the `tests/` directory by category.

```bash
cargo binstall tytanic
```

```bash
tt run
```

--------------------------------

### Show Citations as Footnotes

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Configure Touying to display citations as footnotes by passing a `bibliography` to `config-common(show-bibliography-as-footnote: ...)`. This example cites a book using the `@knuth` key.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#let bib = bytes(
  "@book{knuth, 
    title={The Art of Computer Programming},
    author={Donald E. Knuth},
    year={1968},
    publisher={Addison-Wesley},
  }",
)

#show: simple-theme.with(
  aspect-ratio: "16-9",
  config-common(show-bibliography-as-footnote: bibliography(bib)),
)

= Citations

== Footnote Example

This is a famous book. @knuth
```

--------------------------------

### Progress Bar Implementation

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/progress/counters.md

Provides a Typst code example for creating a progress bar using `utils.touying-progress`, which accepts a ratio to determine the bar's width.

```typst
#utils.touying-progress(ratio => {
  // ratio is a float between 0.0 and 1.0
  box(width: ratio * 100%, height: 4pt, fill: primary)
})
```

--------------------------------

### Block Style Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/code-styles.md

Illustrates using the block style with `#slide[...]` for more powerful functions and clearer structure, enabling complex animations.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(aspect-ratio: "16-9")

= Title

== First Slide

#slide[
  Hello, Touying!

  #pause

  Hello, Typst!
]
```

--------------------------------

### Initialize Dewdrop Theme

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/dewdrop.md

Initializes the Dewdrop theme with specified aspect ratio, footer content, navigation mode, and configuration information. This is the primary setup for using the theme.

```typst
#import "@preview/touying:0.7.3": *
#import themes.dewdrop: *

#import "@preview/numbly:0.1.0": numbly

#show: dewdrop-theme.with(
  aspect-ratio: "16-9",
  footer: self => self.info.institution,
  navigation: "mini-slides",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
  ),
)

#title-slide()

#outline-slide()
```

--------------------------------

### CLI Export with Custom Options

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/touying-exporter.md

Compile a Touying presentation with specific options, such as output file name, root directory, font paths, start page, and number of pages.

```sh
touying compile example.typ --output presentation.html --root . --font-paths /path/to/fonts --start-page 5 --count 10 --ppi 300 --format pptx --sys-inputs '{"key":"value"}'
```

--------------------------------

### Fletcher Animation with Touying (Callback Style)

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/fletcher.md

Demonstrates Fletcher diagram animation using Touying's callback-style reducer. Requires importing Touying, Simple theme, and Fletcher.

```example
#import "@preview/touying:0.7.3": *
#import "@preview/fletcher:0.5.8" as fletcher: diagram, edge, node
#show: themes.simple.simple-theme.with(aspect-ratio: "16-9")

#let diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide)

#slide(repeat: 6, self => {
  let (uncover, only, alternatives) = utils.methods(self)
  let uncover = uncover.with(cover-fn: fletcher.hide)
  diagram(
    node((0, 0), name: <A>)[$A$],
    pause,
    edge("->"),
    node((1, 0), name: <B>)[$B$],
    pause,
    edge("->"),
    node((2, 0), name: <C>)[$C$],
    uncover("4,6", edge(<A>, "~", <B>, bend: 40deg, stroke: red)),
    only("5,6", edge(<B>, "~", <C>, bend: 40deg, stroke: green)),
    only("6", edge(<C>, "~", <A>, bend: 40deg, stroke: blue)),
  )
})

```

--------------------------------

### Workflow: Switching Between Presentation and Handout Modes

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/handout.md

This example illustrates a common workflow where `handout` is set to `false` during live presentations and switched to `true` when exporting a PDF for audience sharing.

```typst
// During presentation
#show: my-theme.with(config-common(handout: false))

// When building the handout PDF
#show: my-theme.with(config-common(handout: true))
```

--------------------------------

### Typst Default Page Model Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/layout.md

Illustrates Typst's default page model with headers, footers, and content placement. Uses rect for containers and alignment for positioning.

```typst
#let container = rect.with(height: 100%, width: 100%, inset: 0pt)
#let innerbox = rect.with(stroke: (dash: "dashed"))

#set text(size: 30pt)
#set page(
  paper: "presentation-16-9",
  header: container[#innerbox[Header]],
  header-ascent: 30%,
  footer: container[#innerbox[Footer]],
  footer-descent: 30%,
)

#place(top + right)[Margin→]
#container[
  #container[
    #innerbox[Content]
  ]
]
```

--------------------------------

### Simple CeTZ and Fletcher Animation with Touying

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/cetz.md

Demonstrates how to integrate Touying's animation capabilities with CeTZ and Fletcher diagrams. This setup requires importing Touying, CeTZ, Fletcher, and a theme, then defining canvas reducers.

```Cetz
#import "@preview/touying:0.7.3": *
#import themes.metropolis: *
#import "@preview/cetz:0.5.0"
#import "@preview/fletcher:0.5.8" as fletcher: node, edge

// cetz and fletcher bindings for touying
#let cetz-canvas = touying-reduce.with(cetz) // new syntax for packages that expose their name
#let fletcher-diagram = touying-reduce.with(fletcher)

#show: metropolis-theme.with(aspect-ratio: "16-9")

// cetz animation
#slide[
  Cetz in Touying:

  #cetz-canvas({
    import cetz.draw: *
    
    rect((0,0), (5,5))

    (pause,)

    rect((0,0), (1,1))
    rect((1,1), (2,2))
    rect((2,2), (3,3))

    (pause,)

    line((0,0), (2.5, 2.5), name: "line")
  })
]

// fletcher animation
#slide[
  Fletcher in Touying:

  #fletcher-diagram(
    node-stroke: .1em,
    node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%),
    spacing: 4em,
    edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center),
    node((0,0), `reading`, radius: 2em),
    edge((0,0), (0,0), `read()`, "--|>", bend: 130deg),
    pause,
    edge(`read()`, "-|>"),
    node((1,0), `eof`, radius: 2em),
    pause,
    edge(`close()`, "-|>"),
    node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)),
    edge((0,0), (2,0), `close()`, "-|", bend: -40deg),
  )
]
```

--------------------------------

### Configure Preamble and Subslide Preamble

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Use `config-common(preamble: ...)` to insert content before every slide and `subslide-preamble` for specific subslide content. This example shows text appearing before all slides and a special prelude for subslide 2.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(
  aspect-ratio: "16-9",
  config-common(
    preamble: text(gray)[This appears before every slide],
    subslide-preamble: (2: [Special prelude for subslide 2]),
  ),
)

= Section

== Slide

Content here.

#pause

More content.
```

--------------------------------

### Configure Speaker Notes on Second Screen

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/pympress.md

This snippet demonstrates how to import Pympress and configure the university theme to display speaker notes on the right-hand side of a dual-screen setup. It utilizes `config-common` to enable this feature.

```typst
#import "@preview/touying:0.7.3": *
#import themes.university: *

#show: university-theme.with(
  aspect-ratio: "16-9",
  config-common(show-notes-on-second-screen: right),
)

= Animation

== Simple Animation

We can use `#pause` to #pause display something later.

#pause

Just like this.

#meanwhile

Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously.

#speaker-note[
  + This is a speaker note.
  + You won't see it unless you use `config-common(show-notes-on-second-screen: right)`
]
```

--------------------------------

### Main Entry Point for Touying Project

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/multi-file.md

The `main.typ` file serves as the project's entry point. It applies show rules, imports global configurations, and includes content files using `#include`.

```typst
// main.typ
#import "/globals.typ": *

#show: university-theme.with(
  aspect-ratio: "16-9",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
    logo: emoji.school,
  ),
)

#include "content.typ"
```

--------------------------------

### Codly Initialization with Touying

Source: https://github.com/touying-typ/touying/blob/main/docs/en/integration/codly.md

Set up Codly for syntax highlighting and language icons within Touying. The `codly-init.with()` preamble ensures state is restored per slide. Requires importing Touying, a theme, Codly, and Codly languages.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *
#import "@preview/codly:1.3.0": *
#import "@preview/codly-languages:0.1.10": *

#show: codly-init.with()

#show: simple-theme.with(
  aspect-ratio: "16-9",
  config-common(preamble: {
    codly(languages: codly-languages)
  }),
)

== First Slide

#raw(lang: "rust", block: true,
`pub fn main() {
  println!("Hello, world!");
}`.text)
```

--------------------------------

### Apply Bamboo Theme with Custom Info and Slides

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/build-your-own-theme.md

This snippet demonstrates how to apply the custom 'bamboo-theme' to a Touying presentation. It configures aspect ratio, footer content, and general slide information, and includes examples of a title slide, a section divider, and a focus slide.

```typ
#import "@preview/touying:0.7.3": *
#import "bamboo.typ": *

#show: bamboo-theme.with(
  aspect-ratio: "16-9",
  footer: self => self.info.institution,
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
    contact: [contact@mail.com],
  ),
)

#title-slide()

= First Section

== First Slide

A slide with a title and an *important* information.

#focus-slide[
  Focus on it!
]
```

--------------------------------

### Explicit Waypoint Start Values

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/waypoints.md

Set explicit start values for waypoints using subslide indexes or other waypoint labels.

```typst
#slide(composer: (1fr, 1fr))[
  #item-by-item(start: <steps>)[
    - Step one
    - Step two
    - Step three
  ]
  #pause
  Some remark.
  #uncover(<done>, start: 4)[All done, even before the remark!]
][
  #waypoint(<parallel>, start: <done>)
  Explaining stuff.
  #pause
  More explanation.
]
```

--------------------------------

### Touying CeTZ Animation Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/start.md

Integrates CeTZ for creating animated graphics within Touying presentations. This example shows basic shapes and lines appearing sequentially.

```touying
== CeTZ Animation

CeTZ Animation in Touying:

#cetz-canvas({
  import cetz.draw: *

  rect((0, 0), (5, 5))

  (pause,)

  rect((0, 0), (1, 1))
  rect((1, 1), (2, 2))
  rect((2, 2), (3, 3))

  (pause,)

  line((0, 0), (2.5, 2.5), name: "line")
})
```

--------------------------------

### Creating Subslides with #pause

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/dynamic/simple.md

Use the #pause marker to separate content into distinct subslides. Multiple #pause markers can create multiple subslides. This example demonstrates inline and separate-line usage.

```example
#import "@preview/touying:0.7.3": *
#import themes.simple: *
#show: simple-theme
#slide[
  First #pause Second

  #pause

  Third
]
```

--------------------------------

### Initialize Simple Theme

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/simple.md

Initializes the Simple theme with custom aspect ratio and footer content. Ensure the Touying and simple theme modules are imported.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(
  aspect-ratio: "16-9",
  footer: [Simple slides],
)
```

--------------------------------

### Build Project

Source: https://github.com/touying-typ/touying/blob/main/docs/en/external/gistd.md

Build the project using pnpm.

```bash
pnpm build
```

--------------------------------

### Get Current Slide Number

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/progress/counters.md

Retrieves the current slide number using `utils.slide-counter.get()`.

```typst
// Get the current slide number
#context utils.slide-counter.get()
```

--------------------------------

### Displaying Current Section Name

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Use `utils.display-current-heading` or `utils.display-current-short-heading` to show the current section title in headers or footers.

```example
#import "@preview/touying:0.7.3": *
#import themes.default: *

#show: default-theme.with(
  aspect-ratio: "16-9",
  config-page(
    header: context text(gray)[
      #utils.display-current-heading(level: 1)
    ],
  ),
)

= My Section

== Slide

The header shows the current section name.
```

--------------------------------

### Hidden Outline Slide Example

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/sections.md

Creates an outline slide that is hidden from the final PDF output using the `<touying:hidden>` label.

```typst
#import "@preview/touying:0.7.3": *
#import themes.simple: *
#import "@preview/numbly:0.1.0": numbly

#set heading(numbering: numbly("{1}.", default: "1.1"))

#show: simple-theme.with(aspect-ratio: "16-9")

== Outline <touying:hidden>

#components.adaptive-columns(outline(title: none, indent: 1em))

= First Section

== Slide One

Content.
```

--------------------------------

### Initialize Aqua Theme

Source: https://github.com/touying-typ/touying/blob/main/docs/en/themes/aqua.md

Initializes the Aqua theme with specified aspect ratio and presentation information. Use this at the beginning of your presentation file.

```typst
#import "@preview/touying:0.7.3": *
#import themes.aqua: *

#show: aqua-theme.with(
  aspect-ratio: "16-9",
  config-info(
    title: [Title],
    subtitle: [Subtitle],
    author: [Authors],
    date: datetime.today(),
    institution: [Institution],
  )
)

#title-slide()

#outline-slide()
```

--------------------------------

### Creating Multi-File Presentations in Touying

Source: https://github.com/touying-typ/touying/blob/main/docs/en/faq.md

Structure your presentation across multiple files by importing the main Touying package in your entry file and using the `include` function for other sections.

```typst
// main.typ
#import "@preview/touying:0.7.3": *
#import themes.simple: *

#show: simple-theme.with(aspect-ratio: "16-9")

#include "intro.typ"
#include "methods.typ"
#include "results.typ"
```

--------------------------------

### Content for a Specific Section

Source: https://github.com/touying-typ/touying/blob/main/docs/en/tutorials/multi-file.md

Example of a content file (`sections/content.typ`) within a multi-section structure. It imports global settings and defines its own section and slides.

```typst
// sections/content.typ
#import "/globals.typ": *

= The Section

== Slide Title

Hello, Touying!

#focus-slide[
  Focus on me.
]
```

--------------------------------

### Touying CeTZ Animation

Source: https://github.com/touying-typ/touying/blob/main/README.md

Shows how to integrate CeTZ animations within Touying presentations. This example draws rectangles and lines with pauses for animation.

```typst
#cetz-canvas({
  import cetz.draw: *

  rect((0, 0), (5, 5))

  (pause,)

  rect((0, 0), (1, 1))
  rect((1, 1), (2, 2))
  rect((2, 2), (3, 3))

  (pause,)

  line((0, 0), (2.5, 2.5), name: "line")
})
```