Markdown

name: portada
layout: true
class: portada-slide, middle, right
---
# Markdown
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# Markdown
- Presentation language
- Very simple.
  - It is translated to .blue[HTML], the most popular presentation markup language.

.center[[Markdown-it demo](https://markdown-it.github.io/)]

---
# Markdown uses
- Technical documentation (ex: README in Git repositories (GitHub, GitLab or BitBucket))
- Its popularity is increasing at the moment.
- This slides are made with Markdown using [Remark](https://github.com/gnab/remark)

---
# Titles
```
# H1
## H2
### H3
#### H4
##### H5
###### H6
```

# H1
## H2
### H3
#### H4
##### H5
###### H6

---
# Text

```
Text is written directly in the document.

New lines in the document
are not preserved.

New lines are specified with a blank line.
```
Text is written directly in the document.

New lines in the document
are not preserved.

New lines are specified with a blank line.

---
# Text format
```
An italic text is written between *asterisks* or _underscores_.

A bold text is written between double __asterisks__ or __underscores__.

Formats can be combined with __asterisks and *underscores*__.

Strikethrough: ~~Strikethrough text~~
```

An italic text is written between *asterisks* or _underscores_.

A bold text is written between double __asterisks__ or __underscores__.

Podem anidar els emfasis amb **asteriscs i _underscores_**.

Strikethrough: ~~Strikethrough text~~

---
# Ordered lists
The actual number doesn't matter
```
1. Items
1. Of an ordered list
  1. Subitems are indented with 2 spaces
  1. Subitem2
1. Numbers doesn't matter

```
1. Items
1. Of an ordered list
  1. Subitems are indented with 2 spaces
  1. Subitem2
1. Numbers doesn't matter

---
# Unordered lists
Unordered lists can be created with `+`, `-` or `*`.

```
- Items
- In a unordered list
  - Subitems are indented with 2 spaces
  * Subitem2
  + Subitem3

```
- Items
- In a unordered list
  - Subitems are indented with 2 spaces
  * Subitem1
  + Subitem3

---
# Links
This text is a [link to these slides](https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html)

We can specify a [link with a title](https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html "Markdown is fun"). (Hover the cursor over the link)

The url will be parsed automatically: https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html

```yaml
This text is a [link to these slides](https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html)

We can specify a [link with a title](https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html "Markdown is fun"). (Hover the cursor over the link)

The url will be parsed automatically: https://joapuiib.github.io/itb/ASIX-LLMQ/UD1/05_markdown.html
```

---
# Images (I)

Images are specified the same way that URLs, but with `!` at the beginning.

Sigle line image:

![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png)

Image with a reference:

![Logo Markdown][logo]

[logo]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png

---
# Images (II)

```yaml
Images are specified the same way that URLs, but with `!` at the beginning.

Sigle line image:

![Logo Markdown](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png)

Image with a reference:

![Logo Markdown][logo]

[logo]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png
```

---
# Code
Text or code snippeds can be added inside `inverted accent` blocks. The type can be specified for syntax highlighting.

<pre>
```json
{
  "colors": ["groc", "verd", "vermell"]
}
```
</pre>

```json
{
  "colors": ["groc", "verd", "vermell"]
}
```

---
# Code (II)

<pre>
```java
public class MyClass{
	public void doSomething(){
		System.out.println("Hello World");
	}
}
```
</pre>

```java
public class MyClass{
	public void doSomething(){
		System.out.println("Hello World");
	}
}
```
---
class: background-dark
# Exercises
Write a Markdown document with the following content and format (Don't bother yet with the style):

<div style="
  transform: scale(0.4);
  transform-origin: top left;
  margin-left: 2rem;
  border: 2px var(--blue);
  border-style: solid;
  padding: 2rem ;
  border-radius: 2rem;
">
<h1 style="
  width: 100%;
  border-bottom-style: none;
  margin-bottom: 1rem;
">Monty Python's Life of Brian</h1>
<img src="https://upload.wikimedia.org/wikipedia/en/1/18/Lifeofbrianfilmposter.jpg">
<h2>Release date:</h2>
<p>17 Agoust 1979</p>
<h2>Argument</h2>
<p>Born on the original Christmas in the stable next door to Jesus Christ, 
Brian of Nazareth spends his life being mistaken for a messiah.</p>
<h2>Actors</h2>
<ul>
<li>Graham Chapman</li>
<li>John Cleese</li>
<li>Terry Gilliam</li>
<li>Eric Idle</li>
</ul>
<h2>Urls</h2>
<a href="https://www.imdb.com/title/tt0079470/">IMDB</a>

---
# Bibliography
- https://dillinger.io/
- https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
- https://markdown-it.github.io/
- https://code.visualstudio.com/docs/languages/markdown