|
|
|
TODO: Move content from Eric's Wiki repo |
|
|
\ No newline at end of file |
|
|
|
[[_TOC_]]
|
|
|
|
|
|
|
|
# Slide Format
|
|
|
|
|
|
|
|
## Headers
|
|
|
|
|
|
|
|
Decker uses [markdown headings](https://www.markdownguide.org/basic-syntax/) (level 1 to 3) to structure slides.
|
|
|
|
|
|
|
|
| MD Code | Level |Description | Example |
|
|
|
|
| --------| ------- |------------------------------------------------------- | --------------- |
|
|
|
|
| `#` | level 1 |Creates a new slide. Precedes the titel slide. | ```# Titel``` |
|
|
|
|
| `##` | level 2 |Creates a new paragrapph. Precedes the paragraph title. | ```## Titel``` |
|
|
|
|
| `###` | level 3 |Starts a new line. | ```### Titel``` |
|
|
|
|
|
|
|
|
**Example:**
|
|
|
|
```markdown
|
|
|
|
# Title
|
|
|
|
## Paragrapgh
|
|
|
|
### Line
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/f7765dd59a2405a48db490e52ed1e7c2/image.png" width=20% height=20%>
|
|
|
|
|
|
|
|
## Column Layout
|
|
|
|
|
|
|
|
Add columns to slides by adding `{.columns}` to the slide header, and by defining columns using level-2 headers (##) with the position of each column noted as `{.left}`, `{.center}`, `{.right}`, `{.top}` or `{.bottom}`.
|
|
|
|
|
|
|
|
For example:
|
|
|
|
```markdown
|
|
|
|
# Multicolumn Slides {.columns}
|
|
|
|
|
|
|
|
## Top Column {.top}
|
|
|
|
This spans across the top of all columns.
|
|
|
|
|
|
|
|
## Left Column{.left}
|
|
|
|
1
|
|
|
|
|
|
|
|
## Center Column {.center}
|
|
|
|
2
|
|
|
|
|
|
|
|
## right Column {.right}
|
|
|
|
3
|
|
|
|
|
|
|
|
## Bottom Column
|
|
|
|
This spans across the bottom of all columns
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/0cb7fd0fcdd09b4ab6370a7d9f493ec1/image.png" width=60% height=60%>
|
|
|
|
|
|
|
|
## Split
|
|
|
|
To split the layout of a slide into two columns at your point of choosing add the `{.split}` parameter to a level 2 [header](https://gitlab2.informatik.uni-wuerzburg.de/s334445/decker-struktur-wiki/-/wikis/Slide-Layout#headers).
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
# Haskell
|
|
|
|
|
|
|
|
##
|
|
|
|
This is what Haskell sounds and looks like.
|
|
|
|
|
|
|
|
## {.split .example}
|
|
|
|
Pronounciation: {.controls}
|
|
|
|
|
|
|
|
## {.example}
|
|
|
|
Haskell logo: {width=60%}
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/3e00de665de92340597b2ecc806e3ade/image.png" width=60% height=60%>
|
|
|
|
|
|
|
|
## Grid Layout
|
|
|
|
Use a grid layout in slides by adding `{.grid}` to the slide [header](), and by defining columns using level-2 headers (##) with the position of each column noted as `{.top-left}`,`{.top}`,`{.top-right}`,`{.left}`, `{.center}`,`{.right}`,`{.bottom-left}`,`{.bottom}`, or `{.bottom-right}`.
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
# Grid Layout {.grid}
|
|
|
|
|
|
|
|
## One {.top-left}
|
|
|
|
## Two {.top}
|
|
|
|
## Three {.top-right}
|
|
|
|
## Four {.left}
|
|
|
|
## Five {.center}
|
|
|
|
## Six {.right}
|
|
|
|
## Sieben {.bottom-left}
|
|
|
|
## Acht {.bottom}
|
|
|
|
## Neun {.bottom-right}
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/4129f7b6f8b493c93170ca417a7a89ac/image.png" width=70% height=70%>
|
|
|
|
|
|
|
|
## Vertical Slides
|
|
|
|
Add slides below the current slide by adding `{.sub}` to the slide header. Navigate to these slides using the `↓` key or by pressing the space-bar. The yaml option `vertical-slides` defaults to `true`.
|
|
|
|
|
|
|
|
<img src="uploads/e230963071b27fa9bf2be8d5ef2feaa2/image.png" width=60% height=60% >
|
|
|
|
|
|
|
|
If [vertical slides](https://gitlab2.informatik.uni-wuerzburg.de/decker/decker/-/wikis/WIP:-List-of-all-meta-options) are in use the <kbd>SPACE</kbd> should be used to navigate to the next slide.
|
|
|
|
|
|
|
|
## Custom Title Slide
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
```
|
|
|
|
affiliation: JMU Würzburg
|
|
|
|
author: Chair of Human-Computer Interaction
|
|
|
|
title: Title Header
|
|
|
|
subtitle: Customizable title slide
|
|
|
|
template:
|
|
|
|
title-page:
|
|
|
|
affiliation-logo: 'img/logo.png'
|
|
|
|
teaser-img: 'img/hci.png'
|
|
|
|
banner: 'img/unilogoc4gross.png'
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Background content
|
|
|
|
|
|
|
|
You can set images or color as your slide background.
|
|
|
|
|
|
|
|
The last image in a level 1 `#` [header]() is promoted to the slide background.
|
|
|
|
To color your background add `{style="background-color:COLOR"}`. COLOR is a standin for any other color you wish to use e.g. `green`.
|
|
|
|
|
|
|
|
**Example:**
|
|
|
|
|
|
|
|
```
|
|
|
|
# {size="cover"}
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/bf246de252d09e770362e04ed4809865/image.png" width=70% height=70%>
|
|
|
|
|
|
|
|
# Element Layout
|
|
|
|
|
|
|
|
## Fragments
|
|
|
|
Adding the `{.fragment}` parameter to [headers](https://gitlab2.informatik.uni-wuerzburg.de/s334445/decker-struktur-wiki/-/wikis/Slide-Layout#headers) allows for a divded slides into segments, which get revealed sequentially.
|
|
|
|
|
|
|
|
<img src="" width=80% height=80%>
|
|
|
|
|
|
|
|
## Lists
|
|
|
|
|
|
|
|
### Enumerated Lists
|
|
|
|
|
|
|
|
```
|
|
|
|
- Take out trash
|
|
|
|
- Vacuum
|
|
|
|
- Bedrooms
|
|
|
|
- Wash dishes
|
|
|
|
```
|
|
|
|
|
|
|
|
### Ordered Lists
|
|
|
|
|
|
|
|
```
|
|
|
|
1. bread
|
|
|
|
2. milk
|
|
|
|
3. sugar
|
|
|
|
4. flour
|
|
|
|
```
|
|
|
|
|
|
|
|
### Task Lists (WIP 🚧)
|
|
|
|
|
|
|
|
### Fragmented Lists
|
|
|
|
This list will sequentially reveal its items. Similar to a segment marked with *.fragment*, an item will be revealed on a left mouse button press.
|
|
|
|
|
|
|
|
```
|
|
|
|
> - Python
|
|
|
|
- JavaScript
|
|
|
|
- Java
|
|
|
|
- C#
|
|
|
|
- C++
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="" width=50% height=50%>
|
|
|
|
|
|
|
|
### Sequential Lists
|
|
|
|
Use the `(@)` symbol to automatically number items in a list. Numbered items do not need to be in a single list.
|
|
|
|
|
|
|
|
```
|
|
|
|
(@) *This method of listing items has many advantages, especially if you want to cite sources. Some of them are listed here.*
|
|
|
|
(@) *It is easy to use, expand and edit because it automatically keeps track of all your items and numbers them in order of appearance.*
|
|
|
|
Additionally:
|
|
|
|
(@) *It does’t care about line breaks or formatting and continues your list. So you can put additional information between your items.*
|
|
|
|
|
|
|
|
# New Slide
|
|
|
|
|
|
|
|
## sequential list continuation
|
|
|
|
|
|
|
|
(@) *It even continues your list throughout your whole presentation so every source has its corresponding number.*
|
|
|
|
(@) Cite All The Sources [digital image]. (2020). Retrieved from http:/cheezburger.com/6079429632
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/b1e36ff5df940534f8fff386d548d577/image.png" width=65% height=65%>
|
|
|
|
|
|
|
|
<img src="uploads/7c416b906441d02f680bdf0326e94bbf/image.png" width=65% height=65%>
|
|
|
|
|
|
|
|
## Tables
|
|
|
|
Decker uses the [markdown syntax for creating tables](https://www.markdownguide.org/extended-syntax/#tables).
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
``` {.markdown}
|
|
|
|
Assignment List
|
|
|
|
|
|
|
|
| Week | Topic | Reading | Book |
|
|
|
|
| ---: | :------------------------------ | :------: | ------- |
|
|
|
|
| 1 | Course Introduction | Chapt. 1 | Physics |
|
|
|
|
| 2 | Inertia, Equilibrium, Kinematics | Chapt. 2-3 | Physics |
|
|
|
|
| 3 | Vectors, Momentum, Energy | Chapt. 4-8 | Physics |
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/822cf1cc47a4afe25712c4de2112bec0/image.png" width=60% height=60%>
|
|
|
|
|
|
|
|
## Block Quotes
|
|
|
|
|
|
|
|
To quote a block of text, preceed each line with a `>` character:
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
> This is a block quote.
|
|
|
|
>
|
|
|
|
> > A block quote within a block quote.
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="uploads/380085700b2ce569165bd3fb077dc9f6/image.png" width=60% height=60%> |
|
|
\ No newline at end of file |
