Che cos'è Markdown?

È un linguaggio attraverso il quale è possibile definire il layout di una pagina web. Un testo scritto utilizzando la sintassi di Markdown può essere convertito in HTML e in molti altri formati.

Il linguaggio Markdown mantiene pressoché inalterata la leggibilità del testo, rendendo il suo utilizzo semplice e immediato.

Ad esempio, questo testo scritto in Markdown:

# Titolo della pagina
## Descrizione della pagina
Il testo che segue *è in corsivo*, a differenza di questo **che è in grassetto**;
infine, questo testo ~~è barrato~~.

può essere trasformato in HTML e visualizzato come segue:

Titolo della pagina

Descrizione della pagina

Il testo che segue è in corsivo, a differenza di questo che è in grassetto; infine, questo testo è barrato.

Come è evidente, il testo scritto in Markdown è assolutamente leggibile, sebbene ci siano i caratteri che definiscono il layout.

Un file markdown è un file testuale con estensione 'md' e contiene sia il testo che la sua formattazione, applicata utilizzando simboli quali il cancelletto #, l'asterisco *, l'underscore _ oppure il maggiore >.

Quali sono gli strumenti per creare un file in Markdown?

Poiché un file markdown è in formato testuale, con qualsiasi editor di testo è possibile creare o modificare tale tipologia di file. Tuttavia, ci sono caratteristiche che rendono più facile la vita a chi deve scrivere, visualizzare o convertire un file markdown. Per questo, è preferibile utilizzare editor avanzati quali:

Notepad++ (https://notepad-plus-plus.org/)

Visual Studio Code (https://code.visualstudio.com/)

Quali sono le regole per definire il layout in Markdown?

Nell'esempio precedente, sono state utilizzate alcune regole che Markdown mette a disposizione per definire il layout di un testo.

Ad esempio, per il titolo è stato utilizzato il carattere "cancelletto" #, seguito da uno spazio e dal testo che definisce il titolo. Quando il testo viene convertito in HTML, il carattere # è sostituito dal tag <h1>, la cui chiusura verrà inserita al termine della riga.

In modo analogo, per il sottotitolo è stato utilizzato il doppio cancelletto ##, al quale corrisponde il tag <h2> in HTML. Come è facilmente intuibile, la sequenza di tre cancelletti corrisponde al tag <h3> e così via, fino a sei cancelletti che corrispondono al tag <h6>.

Nell'esempio sono state utilizzate altre regole per la formattazione del testo, come, ad esempio, quella per impostare il corsivo, tramite il carattere asterisco *. In questo modo, il testo compreso tra due caratteri * è convertito in HTML utilizzando i tag <i> ... </i>. In modo del tutto simile, per il grassetto si utilizza il doppio asterisco ** che, in HTML, diventa <b> ... </b>, mentre per avere il testo barrato si deve racchiudere tra due doppi carattere "tilde" ~~, che, in HTML, diventa <s> ... </s>.

Definizione di un paragrafo o un blocco di testo

Markdown utilizza una riga vuota per definire i paragrafi.

Markdown:

Questo testo, seppure scritto su righe
diverse, fa parte dello stesso paragrafo
mentre da questa riga inizia un
nuovo paragrafo

Risultato:

Quali sono le regole più importanti in Markdown?

In questa tabella sono riportate le regole più utilizzate per la formattazione di un testo con Markdown:

aaa

Altre regole definite in Markdown

Citazione

Si utilizza il carattere "maggiore" > e, a seguire, il testo:

Markdown:

> citazione

Risultato:

È possibile utilizzare più caratteri "maggiore" in sequenza per definire citazioni di livello superiore:

Markdown:

> citazione - primo livello
>> citazione - secondo livello
>>> citazione - terzo livello

Risultato:

Elenchi

Ogni voce che compone l'elenco è preceduta dal carattere "meno" -:

Markdown:

- Elemento num. 1
- Elemento num. 2
- Elemento num. 3

Risultato:

Elenchi numerati

Ogni voce che compone l'elenco è preceduta dai caratteri "1." 1.:

Markdown:

1. Elemento num. 1
1. Elemento num. 2
1. Elemento num. 3

Risultato:

Collegamenti

Il testo su cui cliccare è racchiuso tra parentesi quadre, mentre l'URL del link è, a seguire, tra parentesi tonde:

Markdown:

[Clicca qui](https://www.moschini.cloud)

Risultato:

È possibile utilizzare altre modalità per creare collegamenti. Ad esempio, anziché definire l'URL subito dopo il testo, si può utilizzare un'etichetta a cui fa riferimento l'URL:

Markdown:

[Clicca qui][URL da aprire]
[URL da aprire]: https://www.moschini.cloud

Risultato:

Si può anche utilizzare un numero come etichetta per l'URL:

Markdown:

[Clicca qui][1]
[1]: https://www.moschini.cloud

Risultato:

Codice sorgente

Per indicare un blocco di righe che rappresentano codice sorgente, si racchiude il codice tra due sequenze di tre caratteri "backtick" ```.

È possibile indicare anche il linguaggio per il quale si vuole applicare la formattazione:

Markdown:

```javascript
var add2 = function(number) {
return number + 2;
}
```

Risultato:

var add2 = function(number) {
	return number + 2;
}

Immagini

Per le immagini, ci sono due modalità:

Inline-style:

Markdown:

![alt text](https://cdn.pixabay.com/photo/2018/08/18/13/26/interface-3614766_960_720.png)

Risultato:

oppure Reference-style

Markdown:

![alt text][immagine]
[immagine]: https://cdn.pixabay.com/photo/2018/05/18/15/30/web-design-3411373_960_720.jpg

Risultato:

Tabelle

Per la definizione di tabelle, si utilizza il carattere "pipe" | per delimitare le colonne e una sequenza di - per separare l' intestazione dalle altre righe. Il contenuto delle celle può essere formattato secondo le regole stabilite.

Markdown:

| Colonna 1         | Colonna 2             |
| ----------------- | --------------------- |
| Prima riga        | Nessuna formattazione |
| *Seconda riga*    | *Corsivo*             |
| **Terza riga**    | **Grassetto**         |

Risultato:

Riga continua

Per separare una sezione della pagina da un'altra, si può inserire una riga continua. In HTML questo elemento si può definire con il tag <hr>.

In Markdown è sufficiente scrivere una di queste sequenze di caratteri:

• carattere "meno" ---
• carattere "asterisco" ***
• carattere "underscore" ___

La riga non deve contenere altri caratteri.

Markdown:

---

Risultato: