Slides Template

--- title: Slides Template tags: slides, template slideOptions: spotlight: enabled: false transition: 'slide' --- # Slides Template Untertitel [Anja Lorenz](https://twitter.com/anjalorenz) <img src="https://bldg-alt-entf.de/wp-content/uploads/2018/05/cczero88x31.png" width="80px" style="background-color:transparent;border-style:none"> [toc] --- # Optionen für Hintergrundbilder ----  ## Farbiger Hintergrund `` ----  ## einfache Grafik (hier SVG) `` (Sammlung schöner Hintergründe am Ende des Dokuments) ----  ## Grafik mehrfach & halbtransparent `` ----  ## Einmalige Grafikhintergründe (bspw. Gifs) `` ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Video Backgrounds (aus Github beim Testen nicht aufrufbar) `` </div> ----  ## Webseite einbetten `` --- # Textspielereien ---- ## Textgrößen <span style="font-size:0.5em">Size: 0.5em</span> <span style="font-size:3em">Size: 3em</span> ---- <span style="font-size:8.5em"><br></span> ## Work-Arround: Textanordnung ---- ## Slide-interne Links [etwa so](#/1/3) ---- ## Schrittweises einblenden `` <span>1 </span> <span>2 </span> <span>3 </span> ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Farbiger Hintergrund für Schrift </div> ---- ## Markierter Text ==Markierter Text== ---- ## Tabellen | Item | Value | Quantity | | ---- | ----- | -------- | | Apples | $1 | 7 | | Lemonade | $2 | 18 | | Bread | $3 | 2 | ---- ## Zitate > “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” ---- ## Formeln $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ ---- ## Noten ```abc X:1 T:Alle meine Entchen M:2/4 L:1/8 C: Volkslied. Verfasser unbekannt K:C C D E F | G2 G2 [|: A A A A | G4 :|] w: Al-le mei-ne Ent-chen schwim-men auf dem See F F F F | E2 E2 | G G G G | C4 |] w: Köpf-chen in das Was-ser, Schwänz-chen in die Höh. ``` [Anleitung](https://demo.codimd.org/eIGP7MhGTaKBcH0W0fb4gA) und [Video](https://www.youtube.com/watch?v=aa0rD0_3QlY&feature=youtu.be) dazu --- # Medien ---- ## Grafikgrößen anpassen ![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =100x) ![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =200x) ---- ## Floating Grafiken <span style="float: right;">![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =200x200)</span> ---- ## PNGs mit transperentem Hintergrund <img src="https://i.imgur.com/Phy9Qzb.png" width="240" style="background-color:transparent;border-style:none"><br> ---- ## Youtube einbetten {%youtube di_qGgTZzQo %} ---- ## H5P-Inhalte einbetten <iframe src="https://einstiegh5p.de/h5p/embed/2389" width="615" height="307" frameborder="0" allowfullscreen="allowfullscreen"></iframe> --- # Übergangsanimationen anpassen ----  ## Transition Style: none `` ----  ## Transition Style: fade `` ----  ## Transition Style: slide `` ----  ## Transition Style: convex `` ----  ## Transition Style: concave `` ----  ## Transition Style: zoom `` ---- ## weitere Anpassungen bei Übergängen: * unterschiedliche Übergänge bei einer Slide: in/out `` * Geschwindigkeit des Übergangs anpassen: default/fast/slow `` --- # Optionen beim Präsentieren **Leertaste:** alle Slides der Reihe nach **Pfeiltasten:** Links/rechts und unten/oben **Escape:** Übersicht über alle Slides ein-/ausschalten **B:** Hintergrund schwärzen ---- ## Spotlight Wenn es im Header eingestellt ist, kann man eine Art virtuellen Pointer integrieren `slideOptions.spotlight.enabled: true` ```yaml --- slideOptions: spotlight: enabled: true --- ``` ---- ### Demo ![spotlight](https://i.imgur.com/dXhHcCP.gif) --- ## Slides Timer Enable with `slideOptions.allottedMinutes = {? minutes}` in YAML frontmatter ```yaml --- slideOptions: allottedMinutes: 5 --- ``` --- # Schöne Hintergründe ----  ## MetaNOOK `` ----  ## Tafel `` ----  ## Tafel dunkelblau `` ----  ## Tafel grün `` ----  ## Tafel lila `` ----  ## Tafel rot `` ----  ## Weltall `` ----  ## Weltall blau `` ----  ## Weltall blaulila `` ----  ## Weltall hellblau `` ----  ## Weltall grün `` --- # Ende --- ## ♻ Lizenz :::info <img src="https://bldg-alt-entf.de/wp-content/uploads/2018/05/cczero88x31.png" width="80px" style="background-color:transparent;border-style:none"> Die Inhalte dieses Dokuments stehen unter [CC0](https://creativecommons.org/publicdomain/zero/1.0/). :::--- title: Slides Template tags: slides, template slideOptions: spotlight: enabled: false transition: 'slide' --- # Slides Template Untertitel [Anja Lorenz](https://twitter.com/anjalorenz) <img src="https://bldg-alt-entf.de/wp-content/uploads/2018/05/cczero88x31.png" width="80px" style="background-color:transparent;border-style:none"> [toc] --- # Optionen für Hintergrundbilder ----  ## Farbiger Hintergrund `` ----  ## einfache Grafik (hier SVG) `` (Sammlung schöner Hintergründe am Ende des Dokuments) ----  ## Grafik mehrfach & halbtransparent `` ----  ## Einmalige Grafikhintergründe (bspw. Gifs) `` ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Video Backgrounds (aus Github beim Testen nicht aufrufbar) `` </div> ----  ## Webseite einbetten `` --- # Textspielereien ---- ## Textgrößen <span style="font-size:0.5em">Size: 0.5em</span> <span style="font-size:3em">Size: 3em</span> ---- <span style="font-size:8.5em"><br></span> ## Work-Arround: Textanordnung ---- ## Slide-interne Links [etwa so](#/1/3) ---- ## Schrittweises einblenden `` <span>1 </span> <span>2 </span> <span>3 </span> ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Farbiger Hintergrund für Schrift </div> ---- ## Markierter Text ==Markierter Text== ---- ## Tabellen | Item | Value | Quantity | | ---- | ----- | -------- | | Apples | $1 | 7 | | Lemonade | $2 | 18 | | Bread | $3 | 2 | ---- ## Zitate > “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” ---- ## Formeln $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ ---- ## Noten ```abc X:1 T:Alle meine Entchen M:2/4 L:1/8 C: Volkslied. Verfasser unbekannt K:C C D E F | G2 G2 [|: A A A A | G4 :|] w: Al-le mei-ne Ent-chen schwim-men auf dem See F F F F | E2 E2 | G G G G | C4 |] w: Köpf-chen in das Was-ser, Schwänz-chen in die Höh. ``` [Anleitung](https://demo.codimd.org/eIGP7MhGTaKBcH0W0fb4gA) und [Video](https://www.youtube.com/watch?v=aa0rD0_3QlY&feature=youtu.be) dazu --- # Medien ---- ## Grafikgrößen anpassen ![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =100x) ![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =200x) ---- ## Floating Grafiken <span style="float: right;">![](https://bldg-alt-entf.de/wp-content/uploads/2018/05/Logo_color_3000px.png =200x200)</span> ---- ## PNGs mit transperentem Hintergrund <img src="https://i.imgur.com/Phy9Qzb.png" width="240" style="background-color:transparent;border-style:none"><br> ---- ## Youtube einbetten {%youtube di_qGgTZzQo %} ---- ## H5P-Inhalte einbetten <iframe src="https://einstiegh5p.de/h5p/embed/2389" width="615" height="307" frameborder="0" allowfullscreen="allowfullscreen"></iframe> --- # Übergangsanimationen anpassen ----  ## Transition Style: none `` ----  ## Transition Style: fade `` ----  ## Transition Style: slide `` ----  ## Transition Style: convex `` ----  ## Transition Style: concave `` ----  ## Transition Style: zoom `` ---- ## weitere Anpassungen bei Übergängen: * unterschiedliche Übergänge bei einer Slide: in/out `` * Geschwindigkeit des Übergangs anpassen: default/fast/slow `` --- # Optionen beim Präsentieren **Leertaste:** alle Slides der Reihe nach **Pfeiltasten:** Links/rechts und unten/oben **Escape:** Übersicht über alle Slides ein-/ausschalten **B:** Hintergrund schwärzen ---- ## Spotlight Wenn es im Header eingestellt ist, kann man eine Art virtuellen Pointer integrieren `slideOptions.spotlight.enabled: true` ```yaml --- slideOptions: spotlight: enabled: true --- ``` ---- ### Demo ![spotlight](https://i.imgur.com/dXhHcCP.gif) --- ## Slides Timer Enable with `slideOptions.allottedMinutes = {? minutes}` in YAML frontmatter ```yaml --- slideOptions: allottedMinutes: 5 --- ``` --- # Schöne Hintergründe ----  ## MetaNOOK `` ----  ## Tafel `` ----  ## Tafel dunkelblau `` ----  ## Tafel grün `` ----  ## Tafel lila `` ----  ## Tafel rot `` ----  ## Weltall `` ----  ## Weltall blau `` ----  ## Weltall blaulila `` ----  ## Weltall hellblau `` ----  ## Weltall grün `` --- # Ende --- ## ♻ Lizenz :::info <img src="https://bldg-alt-entf.de/wp-content/uploads/2018/05/cczero88x31.png" width="80px" style="background-color:transparent;border-style:none"> Die Inhalte dieses Dokuments stehen unter [CC0](https://creativecommons.org/publicdomain/zero/1.0/). :::

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.