presentations/markdown/slides/01-markdown.md

### Markdown

- Created in 2004
- Markup language
    - Create formatted text from plaintext
- Easy to read and write
- Converts directly to HTML
- Originally designed for USENET and email
- Not very standardized

Notes:
Ambuguity in the original Markdown spec

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
# Header 1

## Header 2

###### Header 6
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

# Header 1

## Header 2

###### Header 6

</div>

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
*Italics text*

**Bold text**

***Bold and italics***
***
_Other italics text_

__Underlined__

___Underlined and italics___
***
[Example link](https://lug.mines.edu/attend)
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

*Italics text*

**Bold text**

***Bold and italics***
***
_Other italics text_

__Underlined__

___Underlined and italics___
***
[Example link](https://lug.mines.edu/attend)

</div>

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
Unordered/Bullet list:
- Thing 1
- Thing 2
- Thing 3

Ordered list:
1. Thing
2. Thing
3. Thing
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

Unordered/Bullet list:
- Thing 1
- Thing 2
- Thing 3

Ordered list:
1. Thing
2. Thing
3. Thing

</div>

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

    `printf("Hello world!\n");`

    ***

    ```c
    #include "stdio.h"

    int main(void) {
        printf("Hello world!\n");
        return 0;
    }
    ```

</div>
<div> <!-- Right pane -->
<!-- Title -->

`printf("Hello world!\n");`

***

```c
#include "stdio.h"

int main(void) {
    printf("Hello world!\n");
    return 0;
}
```

</div>


[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec,
fringilla in, laoreet vitae, risus.

> Quote **with** Markdown

> Nested quote
> > Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec,
fringilla in, laoreet vitae, risus.
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

<div style="font-size: 12pt">

> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec,
fringilla in, laoreet vitae, risus.

> Quote **with** Markdown

> Nested quote
> > Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec,
fringilla in, laoreet vitae, risus.

</div>

</div>

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
![Alt Text](media/example-image.webp)
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

<!-- ZOMG THE FINAL OUTPUT DOES NOT MATCH THE SOURCE!!!!!!!!!!!!!!!!!!!! -->
![Alt Text](media/example-image.webp) <!-- .element: style="width: 80%;" -->

</div>

[comment]: # (|||) <!--------------------------------------------------------->

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
<div> <!-- Left pane -->
<!-- Title -->

```markdown
This is **Markdown** formatted text!

- Thing1

<div
style="font-size: 16pt;
color: #ff0000">

- Thing*2*

</div>

- Thing3
```

</div>
<div> <!-- Right pane -->
<!-- Title -->

This is **Markdown** formatted text!

- Thing1

<div
style="font-size: 16pt;
color: #ff0000">

- Thing*2*

</div>

- Thing3

</div>

[comment]: # (!!!) <!--------------------------------------------------------->