View markdown source on GitHub

Creating Slides

Contributors

Questions

Objectives

last_modification Last modification: Jul 26, 2021

Slides

Speaker Notes


Content

Speaker Notes


Formatting: Basic

.pull-left[ Slide Title

A list

and numbered list

  1. Item
  2. Item

Some text with a link and an image:

Description of the image ]

.pull-right[

### Slide Title

A list

- Item 1
- Item 2

and numbered list

1. Item
2. Item

Some text with a [link](https://example.org/) and an image:

![Description of the image](/training-material/assets/images/GTN-60px.png)
---

]

Slides begin with a title ### ... and should end with a ---

Speaker Notes


Formatting: Alignment

.left[Left-aligned text] .center[Centered text] .right[Right-aligned text] .left[Left-aligned image] .center[Centered image] .right[Right-aligned image]

.left[Left-aligned text]
.center[Centered text]
.right[Right-aligned text]
.left[![Left-aligned image](/training-material/assets/images/GTN-60px.png)]
.center[![Centered image](/training-material/assets/images/GTN-60px.png)]
.right[![Right-aligned image](/training-material/assets/images/GTN-60px.png)]

Speaker Notes


Formatting: Incremental Text

  1. Item

Speaker Notes

  1. Appears

Speaker Notes

Just separate every item with two dashes (--)

1. Item

--

2. Appears

Speaker Notes


Formatting: Images

.pull-left[ Demo:

10%

.image-10[ GTN Logo (tiny) ]

50%

.image-50[ GTN Logo (slightly larger) ]

] .pull-right[ Source:

10%
.image-10[
  ![GTN Logo](/training-material/assets/images/GTN-60px.png)
]

50%
.image-50[
  ![GTN Logo](/training-material/assets/images/GTN-60px.png)
]

]

There are other CSS classes available for other sizes

Speaker Notes


Formatting: Tables

.pull-left[ Demo:

column1 | column2 | column3 — | — | — aaaaaaaaaa | bbbb | cccc dddd | eeeeeeeeeeee | ffff gggg | hhhh | iiiiiiiiii ]

.pull-right[ Source:

column1    | column2      | column3
---        | ---          | ---
aaaaaaaaaa | bbbb         | cccc
dddd       | eeeeeeeeeeee | ffff
gggg       | hhhh         | iiiiiiiiii

]

By default, tables are left-aligned with text left-aligned.

Speaker Notes


Formatting: Tables with Aligned Text

Different alignments for the individual columns can be controlled with the : character

.pull-left[ Demo:

Tables Are Cool
left-aligned centered right-aligned
row2 row2 row2

]

.pull-right[ Source:

| Tables       | Are      | Cool          |
|:-------------|:--------:|--------------:|
| left-aligned | centered | right-aligned |
| row2         | row2     | row2          |

]

Speaker Notes


Formatting: Footnotes

Content with footnotes

Source:

.footnote[Normal footnote with plenty of text]

Demo:

.footnote[Normal footnote with plenty of text]

Speaker Notes


Formatting: Two Columns

This is achived with the .pull-left and .pull-right classes.

.pull-left[
Some text, as many texts as we want...

or even table

column1 | column2 | column3
--- | --- | ---
row1 | r1c2 | r1c3
row2 | r2c2 | r2c3
row3 | r3c2 | r3c3
]

.pull-right[ ![GTN Logo](/training-material/assets/images/GTN-60px.png) ]

Will be rendered as:

Speaker Notes


Formatting: Two Columns

.pull-left[ Some text, as many text as we want…..

or even table

column1 | column2 | column3 — | — | — row1 | r1c2 | r1c3 row2 | r2c2 | r2c3 row3 | r3c2 | r3c3 ]

.pull-right[ GTN Logo ]

Speaker Notes


Presenter Notes

Allows you to:

Image showing presenter mode

Speaker Notes


Presenter Notes: Formatting

.left[
### My Slide

Some text!

???

Things written below the Speaker Notes are only shown in the presenter view. Press p to bring this up

---

]

Speaker Notes


Shortcut Keys

Speaker Notes


Videos

.pull-left[

.pull-right[ .image-100[Screenshot of GTN video player showing a set of slides with a play icon and a transcript] ]

Speaker Notes


Key Points

Thank you!

This material is the result of a collaborative work. Thanks to the Galaxy Training Network and all the contributors! Galaxy Training Network This material is licensed under the Creative Commons Attribution 4.0 International License.