Presentazioni con Markdown

class: center, middle, blackbackground

# Presentazioni con Markdown
slides create con [remark.js](https://github.com/gnab/remark)

### Emanuele Baldino

[poul.org](https://www.poul.org)

![](immagini/logowhite.svg)

???

Notes for the _first_ slide!

---
class: middle, center, blackbackground
layout:true
---
# Di cosa parliamo oggi

Slides con __markdown__...
--
più o meno
---

# Foo.js Slides

Slides generate con JavaScript renderizzate tramite browser web

Markdown è uno degli strumenti usati (insieme a html e CSS)

---
# Perché Foo.js

Veloce

Portatile

Online
---
# Remark.js

*A simple, in-browser, markdown-driven slideshow tool.*

---
# "Installare" Remark

```bash
wget https://remarkjs.com/downloads/remark-latest.min.js
```
--

Nel repo [Github](https://github.com/gnab/remark) trovate dei template che potete utilizzare

---

# Composizione del file

.left[```html
<head>
...
</head>
<style>
CSS
</style>
<body>
<textarea id="source">
*Markdown
</textarea>
</body>
<script>
...
</script>
```]
---
# Markdown

Valgono le regole del markdown, con alcune aggiunte

---
# Dividere slides
```remark
# Titolo

Testo

---
# Titolo

Testo
```
---

# Animazioni

```remark
# Titolo

prima parte del testo

seconda parte del testo

---
```
---

# Formattazione
```remark
.left[testo a sinistra]
.right[testo a destra]
.middle[testo al centro]
```
---
# Note

```remark
Testo della slide

???

Note alla slide
```
???
Che belle le note
---

# Immagini e hyperlink

```remark
![nomeimmagine](urlimmagine)
```
per le immagini

```remark
[nome link](url)
```
per i link

---

# Codice
.right-column[<pre><code>
```javascript
function add(a, b)
  return a + b
end
```
</code></pre>]

.left-column[.left[```javascript
function add(a, b)
  return a + b
end
```]]

---
# Codice

A [questo](https://highlightjs.org/static/demo/) link trovate i vari stili

---

# Stile della slide

```remark
class: top, middle, bottom, left, center, right, [custom]
```
---

# Immagine Background
```remark
background-image: url (immagine)
```
alcune opzioni

```remark
background-position: center;
background-repeat: no-repeat;
background-size: contain;
```

---
# Layout

```remark
layout: true
```
salva le proprietà della slide corrente e le replica nelle slide successive

```remark
layout: false
```
disattiva le proprietà del layout

---

# Shortcut utili

### F fullscreen
### P presenter mode
### C clone

---
# A little bit of CSS

Guardiamo il file di questa presentazione
---

# Oltre Remark

Grazie ad altri script .js è possibile aggiungere alle slide [grafici](https://github.com/gnab/remark/wiki/Adding-graphs-via-Mermaid) e [formule matematiche](https://github.com/gnab/remark/wiki/LaTeX-Using-KaTeX), ma vanno oltre lo scopo di questa presentazione, vi rimando ai link per saperne di più

---

# Grazie dell'attenzione!

![](immagini/bysa.svg)

Queste slides sono licenziate Creative Commons Attribution-ShareAlike 4.0