Markdown: Guida Completa

Markdown: Guida Completa 2018

Markdown è un linguaggio di markup leggero, creato nel 2004 (e lasciato lì) da un tizio chiamato John Gruber.

Data l’età e l’apparente abbandono, sembra inspiegabile come molti siti supportino Markdown; esempi rilevanti sono:

  • GitHub;
  • BitBucket;
  • Reddit;
  • Stack Exchange;
  • Facebook (parzialmente).

Più alcuni software importanti come Slack e WhatsApp, che usano qualche piccola cosa che gli assomiglia vagamente.

In realtà non è così inspiegabile, dato che questi siti/servizi utilizzano varianti di Markdown, principalmente a causa di:

  • Mancanza di uno standard chiaro di Markup;
  • Falle in giro da correggere;
  • Funzioni significative mancanti.

Per questo è corretto dire che in questo articolo non parleremo di Markdown puro, ma di GitHub Flavored Markdown (per gli amici GFM).


Prima di entrare nel vivo, voglio dare al volo una definizione che ci serve per capire quali sono i vantaggi di un linguaggio del genere.

Cos’è un Linguaggio di Markup Leggero?

Il nome suggerisce e non suggerisce. Mi spiego meglio.

Un linguaggio di markup è, in sostanza, un set di regole per aggiungere struttura ad un documento, in un modo che sia chiaramente distinguibile dal testo vero e proprio.

Possiamo dire che un linguaggio di markup leggero è più umano rispetto a semplice markup, nel senso che:

  • È facilmente leggibile in formato grezzo;
  • La sintassi è semplice e non fastidiosa;
  • Leggibile e scrivibile con qualsiasi editor di testo;
  • Convertibile in HTML senza tanta fatica.

Se guardiamo un qualsiasi pezzo di codice Markdown, ci accorgiamo di quanto queste caratteristiche siano azzeccate.

Perfetto. Direi che possiamo andare avanti.

Guida Markdown

Ti dico subito come è strutturata questa guida. Questo argomento è abbastanza semplice e tecnico, non si presta a divagazioni varie e robe teoriche, quindi può essere tranquillamente espresso in modo rapido e asciutto.

Quello che troverai ora sarà una serie di sezioni in cui vedremo come fare cosa. In alcuni punti lascio aperte delle questioni per incoraggiare prove da parte tua.

Ritorni a capo

In Markdown un ritorno a capo è dato lasciando una riga vuota.

Questo è il primo paragrafo.
Questa linea non è un ritorno a capo. 

Questo, invece, è un altro paragrafo; quindi il ritorno c'è

Intestazioni

Con intestazioni mi riferisco a quelli che in HTML sarebbero i vari tag H, quindi H1-H7.

In Markdown creiamo le intestazioni aggiungendo il carattere #.

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

In alternativa, per gli H1 e H2 possiamo usare quest’altro formato:

H1
===

H2
---

Enfasi

Possiamo formattare il testo usando i soli caratteri {*, _, ~}.

*Corsivo* e sempre _corsivo_.
**Grassetto** e sempre __grassetto__.
**Grassetto e pure _corsivo_**.
Infine ~sbarrato~

Liste

Scrivere liste con Markdown è tanto intuitivo quanto potente.

Liste non ordinate (ul)

- Elemento 1
- Elemento 2
* Notato la seperazione?
* Altro elemento
+ Notato l'altra separazione?

Liste ordinate (ol)

1. Uno
2. Due
3. Tre
4. Quattro
8. <-- la numerazione è cambiata?

Possiamo anche avere liste miste. Prova a ficcare una lista non ordinata in una ordinata (o viceversa) e osserva che succede.

Link

Il modo di creare link in Markdown ricorda un po’ quello usato da MediaWiki.

[Link](https://www.google.it/)

[Link con titolo](https://www.google.it/ "Google")

[Riferimento][chiave del riferimento]

Ora metto un [altro riferimento]

[chiave del riferimento]: http://qualcosa
[altro riferimento]: http://altro-qualcosa

Qui possiamo aggiungere qualche parola:

  • Possiamo usare numeri come chiave di riferimento;
  • URL da soli, o circondati da <> vengono automaticamente tradotti in link.

Immagini

Simile ai link, con l’aggiunta del punto esclamativo.

![alt-text](url/immagine.png "Titolo")

Possiamo usare i riferimenti anche per le immagini.

Tabelle

Molto semplice, basta anche qui usare qualche carattere.

Prodotto|Q.tà
--------|----
Legno|10
Staffa|20
Vite|10
Stop|10

Citazioni

Basta usare il carattere >.

>Questa è una citazione

Linea orizzontale (hr)

A volte può essere utile dare una separazione netta al testo. Con Markdown possiamo usare:

Separatore 1
---

Separatore 2
***

Separatore 3
___

Basta avere almeno tre caratteri.

Checklist

Guarda che carino 🙂

- [x] Fatto
- [ ] Non fatto

Codice e Syntax Highlighting

Con Markdown possiamo distinguere codice inline e a blocchi. Otteniamo il syntax highlighting scrivendo il nome del linguaggio all’inizio del blocco.

Delimitiamo codice inline con il carattere `, e blocchi con ```.

Questo è un `codice inline`.

```
void doThings(SyntaxHighlighting sh) {
    sh.getInstance()
        .setEnabled(false)
        .setReason("No language specified");
}
```

```java
void doThings(SyntaxHighlighting sh) {
    sh.getInstance()
        .setEnabled(true)
        .setReason("Java specified!");
}
```

Emoji

C’è chi le ama e chi le odia.

:smile:, :laughing:, :wink:, ...

Qui trovi un elenco di emoji e chi le supporta.

Ignorare la formattazione Markdown

Il backslash è il nostro carattere di escape.

Non voglio \*formattare\* il testo.

Conclusioni

Concludiamo vedendo alcuni editor che offrono funzioni specifiche per questi file con estensione *.md o *.markdown:

  • StackEdit: cloud editor con interfaccia web, con supporto per import/export e conversione;
  • Dillinger: altro cloud editor con simili funzioni del precedente;
  • Typora: editor minimalista WISIWIG;
  • Boostnote: definito come app di note open source per sviluppatori.

Tutti questi editor supportano anche funzioni di Markdown Extra, come espressioni matematiche stile LaTeX, diagrammi di flusso e UML, tipografia smart, note a fondo, sommario.

In alternativa, esistono svariati plugin per editor generali come Atom, Visual Studio Code, Sublime Text, etc.

Perfetto, grazie per la lettura. Se ti va, sentiti libero di condividere l’articolo :).

Davide

Fondatore ed Autore at FortyZone
Diplomato nel 2015 in Informatica. Studio Informatica alla Sapienza di Roma. Ho diversi interessi e passioni, tra cui musica, cinema, sviluppo software e web, SEO e digital marketing. Ah, suono il basso.