===== MARKDOWN =====

==== Overview ====

=== What is it? ===


  * Markup language
  * Human readable
  * Machine processable


  * Plaintext
  * Annotion for semantics
  * Highlighting for readability
  * Basis for many homepages, blogs, presentations, plaintext mailinglists, etc

===== Markdown Syntax =====

==== General rules ====

  * It is safe to use a lot of whitespace in markdown, since it won’t show up in the presentation.
  * A single list, block quote, etc should be seperated for readability from other content by an empty line. Most of the time it is optional, but sometimes it’s neccessary.

==== Basic Text ====

Write any text, most tools will ignore whitespace variations.

Add an empty line for paragraphs.

To keep line endings\\
add 2 spaces at the end of the previous line\\
this will stop the merging of lines\\
and even works with empty lines. This is still the 3rd paragraph.

<code>
Write any text, 
most tools will ignore whitespace variations.

Add an empty line for paragraphs.

To keep line endings  
add 2 spaces at the end of the previous line  
this will stop the merging of lines  
and even works with empty lines. This is still the 3rd paragraph.
</code>
==== Text Highlighting ====

  * To make some text //italic// use ''%%_Lorem Ipsum_%%''
  * To make some text **bold** use ''%%__Lorem Ipsum__%%''
  * To make some text **//bold and italic//** use ''%%___Lorem Ipsum___%%''
  * To <del>strike</del> through some text use ''%%~~Lorem Ipsum~~%%''

==== Quotes ====

A quote is any text enclosed in single backticks.

A Blockquote is a surrounded by lines with 3 backticks.

<code>
This line has a `quoted part`.

```
This is a block quote.

It ignores __syntax__ inside.
```
</code>
==== Headers ====

A Header is Text Prepended by 1 to 7 hash signs

<code>
# Largest header - For the main title slide

## Single page header for intermediate title slides

### Header for individual slide, like at the top of this slide

#### This can be used anywhere inside a slide for structure
##### And this
###### And this
####### Smallest header
</code>
==== Lists ====

A regular list is marked by prepending it with a dash.

A numbered list is marked by prepending it with a number and a dot.

<code>
1. The first line in a numbered list starts the series.
3. The second number is irrelevant, it will be the successor of the first one
10. And so on. This helps with quickly adding/removing list elements temporarily.
4. of course it is nice, if you correct the sequence after you're done.

- Lists can be nested.
    - But they need to nest 4 spaces deep.

> - Prepending a list with greater-than signs
> - will make it an incrementally apearing list
>     a. and it works for sublists as well
>     c. as you can see
</code>
  - The first line in a numbered list starts the series.
  - The second number is irrelevant, it will be the successor of the first one
  - And so on. This helps with quickly adding/removing list elements temporarily.
  - of course it is nice, if you correct the sequence after you’re done.

  * Lists can be nested.
    * But they need to nest 4 spaces deep.


  * Prepending a list with greater-than signs
  * will make it an incrementally apearing list
    - and it works for sublists as well
    - as you can see

==== Tables ====

  * Tables have fields, which are seperated by a pipe.
  * The header is seperated from the rest of the table by a line of dashes and pipes.

<code>
Header 1 | Header 2 | Header 3
---|---|---
Content 1-1 | Content 2-1 | Content 3-1
Content 1-2 | Content 2-2 | Content 3-2
</code>
^Header 1   ^Header 2   ^Header 3   ^
|Content 1-1|Content 2-1|Content 3-1|
|Content 1-2|Content 2-2|Content 3-2|

==== Links ====

{{https://vsc.ac.at/fileadmin/user_upload/vsc/images/vsc4/vsc-4_300x200.jpg|VSC 4 Image}} [[www.vsc.ac.at|Links]] have to parts:

  - the description
    * enclosed in square brackets
    * may be empty
  - the URL
    * following the description immediately
    * enclosed by regular brackets
  - the link to an image can be replaced by the image by prepending an exclamation mark.
    * Note that images are regular in-line elements
    * The source should have a reasonable size or constraints must be added (see next slide)

<code>
![VSC 4 Image](https://vsc.ac.at/fileadmin/user_upload/vsc/images/vsc4/vsc-4_300x200.jpg)
[Links](www.vsc.ac.at)
</code>
==== Classes and other properties ====

  * Most Blocks can have one or more classes which alter their presentation.
    * These are represented as ''%%.classname%%''.
  * Other properties are effectively any valid HTML property.
  * For even more customizability HTML elements may be used.
    * Will be used verbatim in the resulting document.
    * Must match start and end tags manually without breaking the slide hierarchy apart.
    * Useful with custom classes to remove elements from certain output formats.

<code>
```{.bash}
This will be highlighted with bash syntax
```

```{.python .numberLines startFrom=5}
This will be highlighted with python syntax.
It will also be numbered.
```

### Fullscreen slide (single picture one picture) {.bigPic}

![](pictures/Test.png)

### Alternative for Wiki only {.dokuwiki}

### Header for Slideshow only {.slidy}

![](pictures/Test.png){.incremental width=100px style="float: left;"}

![](pictures/Test.png){.incremental width=100px style="float: right;"}

<div .incremental .columns>
![](pictures/Test.png){width=100px style="float: left;"}
![](pictures/Test.png){width=100px style="float: right;"}
</div>
</code>