Quando leggiamo testi, che siano in Internet, in una rivista o in un libro stampato, ci aspet­tia­mo un certo formato. Le parole par­ti­co­lar­men­te im­por­tan­ti sono in grassetto; un titolo può essere distinto dal resto del testo a colpo d'occhio e un elenco ordinato rende il testo scritto più chiaro. Dando per scontata questa for­mat­ta­zio­ne, quando scriviamo un testo al PC ci riusciamo senza problemi: mo­di­fi­chia­mo la di­men­sio­ne dei caratteri, inseriamo trattini e parole in grassetto. Ogni programma di ela­bo­ra­zio­ne di testi offre agli utenti una varietà di modi per rendere attraente la loro scrittura.

Ma ciò non è affatto scontato. In linea di principio, il software ci mostra il testo così come lo abbiamo impostato secondo la nostra volontà. Il codice sorgente effettivo, compresi gli elementi di markup (marcatura) non sono affatto visibili in Word & co. Ma anche se lo fossero, non si potrebbe fare molto: per le persone dif­fi­cil­men­te il codice è leggibile.

Linguaggi come HTML o LaTeX possono essere scritti con qualsiasi editor di testo, ma non sono facili da decifrare. Il lin­guag­gio di markup sem­pli­fi­ca­to markdown si presenta di­ver­sa­men­te. Esso cerca di trarre il meglio dai due mondi: risultare com­pren­si­bi­le tanto per i di­spo­si­ti­vi, quanto per le persone. markdown utilizza elementi intuitivi per for­mat­ta­re il testo. Un testo marcato con questo lin­guag­gio risulta, dunque, re­la­ti­va­men­te semplice da leggere.

Registra il tuo dominio
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

A quale scopo si utilizza markdown?

Proprio come HTML o LaTex, markdown è un lin­guag­gio di markup. Rispetto a questi, markdown dovrebbe risultare de­ci­sa­men­te più semplice da leggere. Ogni elemento di marcatura non deve essere astratto, ma vicino al si­gni­fi­ca­to reale. Per spiegare tale principio, basta fare un esempio: se in HTML si desidera evi­den­zia­re una parola in grassetto, si utilizza il tag '<b>' o '<strong>'.

<p>Questa <b>parola</b> è in grassetto e questa <strong>anche</strong>.</p>

D’altra parte, se scrivete un documento in LaTeX, uti­liz­za­te (in modalità testo continuo) l’elemento \textbf.

Questa \textbf{parola} è in grassetto.

Entrambi sono in qualche modo facili da leggere, ma un po' più difficili da scrivere, so­prat­tut­to se si pensa a testi più complessi. Markdown sem­pli­fi­ca tutto questo, con­tras­se­gnan­do con un semplice asterisco i passaggi in grassetto.

Questa **parola** è in grassetto.

Questa soluzione è più facile da leggere, perché l'a­ste­ri­sco rende l’area in grassetto im­me­dia­ta­men­te ri­co­no­sci­bi­le e, inoltre, i quattro caratteri sono molto più veloci da digitare rispetto ai tag. Anche senza for­mat­ta­zio­ne (come nel testo normale) un lettore può in­di­vi­dua­re fa­cil­men­te le in­ten­zio­ni dell’autore, anche se non conosce la sintassi di markdown.

Per questo, markdown è par­ti­co­lar­men­te in­te­res­san­te per quegli utenti che non di­spon­go­no di alcun back­ground in­for­ma­ti­co o co­no­scen­ze di web design, ma che comunque scrivono re­go­lar­men­te testi destinati a Internet: ad esempio blogger che lavorano con un Content Ma­na­ge­ment System (CMS). Tuttavia, anche le persone più affini alla tec­no­lo­gia usano markdown per la scrittura di testi semplici. Ad esempio, alcuni pro­gram­ma­to­ri usano questo lin­guag­gio per scrivere do­cu­men­ta­zio­ne di ac­com­pa­gna­men­to (ad esempio file readme) che in un primo momento non viene for­mat­ta­ta. Che l'utente apra il testo con markdown o lo legga allo stato grezzo non fa molta dif­fe­ren­za in termini di leg­gi­bi­li­tà.

Per i CMS più noti come WordPress o Joomla, esistono plug-in che li rendono in grado di gestire markdown. Anche molti wiki, forum (come ad esempio reddit) o il ge­ne­ra­to­re di siti Jekyll trattano questo lin­guag­gio di markup sem­pli­fi­ca­to.

Fatto

I linguaggi di markup non sono linguaggi di pro­gram­ma­zio­ne. I primi servono soltanto a de­ter­mi­na­re in quale modo va strut­tu­ra­to un testo. I linguaggi di pro­gram­ma­zio­ne, invece, sono ca­rat­te­riz­za­ti da loop e variabili e sono la base per la scrittura di software.

Markdown non vuole so­sti­tuir­si a HTML, in quanto limitato nelle capacità di pro­get­ta­zio­ne. Gli svi­lup­pa­to­ri vedono markdown piuttosto come un’in­te­gra­zio­ne. È possibile inserire elementi HTML in un documento markdown e ampliare così lo spettro di questo lin­guag­gio re­la­ti­va­men­te semplice. Di fatto, markdown ha lo scopo di sem­pli­fi­ca­re la scrittura (so­prat­tut­to su Internet). Quando i documenti markdown vengono con­ver­ti­ti dal parser, vengono creati, ad esempio, file HTML per con­sen­ti­re la vi­sua­liz­za­zio­ne nei browser.

N.B.

Il nome "markdown" è un gioco di parole. In inglese, i linguaggi di markup si chiamano "markup languages”. Il nome chiarisce che si tratta di un lin­guag­gio “in miniatura”: markdown.

Tutorial su markdown: la sintassi corretta per i vostri documenti

Pro­po­nen­do­si come lin­guag­gio di markup molto semplice, markdown ha una sintassi pressoché intuitiva. Ad ogni modo, è ne­ces­sa­rio conoscere gli elementi di markup prima di poterli uti­liz­za­re. Qui di seguito trovate elencate le funzioni prin­ci­pa­li.

Grassetto e corsivo

I grassetti e i corsivi sono par­ti­co­lar­men­te facili da creare con markdown. Infatti, basta uti­liz­za­re le stelline, i co­sid­det­ti aste­ri­schi. Per scrivere in corsivo, inserite un asterisco prima e dopo la parola o le parole. Per i grassetti, uti­liz­za­te due aste­ri­schi e se si desidera creare un'area di testo sia in grassetto che in corsivo uti­liz­za­te tre aste­ri­schi. In al­ter­na­ti­va potete uti­liz­za­re gli un­der­sco­re.

*Testo corsivo*
_Testo corsivo_
**Testo in grassetto**
__Testo in grassetto__
***Testo in corsivo e grassetto***
___Testo in corsivo e grassetto___

Barrare

Per vi­sua­liz­za­re un testo barrato, uti­liz­za­te la tilde due volte di fila, fate seguire il testo cor­ri­spon­den­te e inserite nuo­va­men­te due tilde.

~~Questo testo è barrato.~~ Ma questo no.
Fatto

Con markdown non potete sot­to­li­nea­re il testo. In HTML questo è possibile con il '<u>' tag , ma ge­ne­ral­men­te non è rac­co­man­da­to. Conviene evitare con­fu­sio­ne, dal momento che i col­le­ga­men­ti iper­te­stua­li nel web sono vi­sua­liz­za­ti come testo sot­to­li­nea­to.

In­te­sta­zio­ni

Per creare un’in­te­sta­zio­ne con markdown, nor­mal­men­te si utilizza un can­cel­let­to. Questo va inserito prima del testo, separato da uno spazio. Per creare in­te­sta­zio­ni di livello ge­rar­chi­co inferiore, e quindi scritte in di­men­sio­ni più piccole, si uti­liz­za­no ulteriori can­cel­let­ti. In questo modo è possibile creare in­te­sta­zio­ni fino al sesto livello come in HTML.

# Intestazione 1
## Intestazione 2
### Intestazione 3
#### Intestazione 4
##### Intestazione 5
###### Intestazione 6
N.B.

Alcuni utenti uti­liz­za­no i can­cel­let­ti anche dopo le in­te­sta­zio­ni. Questo può rendere il testo più leggibile, ma è tec­ni­ca­men­te superfluo. Nella for­mat­ta­zio­ne questi caratteri vengono sem­pli­ce­men­te ignorati.

In al­ter­na­ti­va, per con­tras­se­gna­re le in­te­sta­zio­ni è possibile uti­liz­za­re segni di equi­va­len­za e trattini. Questi vanno collocati nella linea al di sotto dell’in­te­sta­zio­ne. Con questa soluzione è possibile creare solo due diverse di­men­sio­ni di in­te­sta­zio­ne. Un carattere per in­te­sta­zio­ne è per­fet­ta­men­te suf­fi­cien­te, anche se spesso si vedono più caratteri, uno accanto all'altro. Ciò ha ragioni puramente visive, poiché in questo modo sembra che il testo sia sot­to­li­nea­to una o due volte.

Intestazione 1
=
Intestazione 2
-

Paragrafi

Il lin­guag­gio di markdown utilizza in­ter­ru­zio­ni di linea per separare i paragrafi. Per creare un blocco di testo com­ple­ta­men­te nuovo (tag

), è suf­fi­cien­te inserire una linea vuota. Qui è im­por­tan­te sapere che per markdown è suf­fi­cien­te che la linea sia vi­si­va­men­te vuota. Se ci sono caratteri di spazi bianchi come ta­bu­la­zio­ni o spazi vuoti, il parser li ignora e in­ter­pre­ta la linea come vuota. Se si desidera creare un’in­ter­ru­zio­ne di linea con il tag
, basta ag­giun­ge­re alla fine della linea due spazi.

Citazioni

Per con­tras­se­gna­re una de­ter­mi­na­ta area di testo come citazione, con markdown è possibile creare un co­sid­det­to elemento bloc­k­quo­te. Per questo si utilizza il carattere di segno maggiore (>). È possibile con­tras­se­gna­re ogni riga con questo segno o po­si­zio­nar­ne solo uno al­l'i­ni­zio del paragrafo e terminare l'area rientrata con una riga vuota. Nell’elemento bloc­k­quo­te sono possibili altri elementi di for­mat­ta­zio­ne.

>Questa è un’**area rientrata**.
>L’area prosegue anche qui.
>Questa è un‘altra **area rientrata**.
Anche quest’area continua nella riga successiva.
Questa riga invece non è più rientrata.

Elenchi

Per creare un elenco casuale con markdown si utilizza il segno più, il trattino o l’asterisco. Tutte le tre soluzioni portano allo stesso risultato.

- Punto 1 della lista
- Punto 2 della lista
- Punto 3 della lista

Un elenco numerato, invece, si crea con un numero seguito da un punto.

1. Punto 1 della lista
2. Punto 2 della lista
3. Punto 3 della lista
Consiglio

È in­te­res­san­te notare che per markdown il numero effettivo è ir­ri­le­van­te. Che si scriva tre volte uno o si inizi con il numero tre, il lin­guag­gio inizierà sempre l'elenco con il numero corretto.

Markdown offre anche la pos­si­bi­li­tà di creare checklist. Queste appaiono in una casella che si attiva sem­pli­ce­men­te con un comando. Durante la creazione dell’elenco è anche possibile inserire delle spunte. A tal fine, uti­liz­za­te le parentesi quadre e una X.

N.B.

È im­por­tan­te ricordare di lasciare uno spazio tra le parentesi quadre quando si lasciano caselle vuote. Al­tri­men­ti markdown non ri­co­no­sce­rà il testo come elenco.

Codice

Per con­tras­se­gna­re un'area di testo come codice, markdown utilizza il co­sid­det­to backtick, noto anche come gravis o accento grave, da non con­fon­de­re con la vir­go­let­ta singola. La marcatura prevede un accento all’inizio e uno alla fine dell’area di testo cor­ri­spon­den­te. In questo modo, il codice sorgente o i comandi software possono essere integrati di­ret­ta­men­te nel testo corrente.

Questo è `code`.
N.B.

At­ten­zio­ne a non creare ac­ci­den­tal­men­te un accento grave durante la scrittura del codice: à. Ciò si verifica au­to­ma­ti­ca­men­te se si scrive il carattere davanti a una vocale. Evitate questo in­con­ve­nien­te premendo la barra spa­zia­tri­ce dopo il backtick e poi scrivendo la vocale.

Se il backtick stesso appare nel vostro esempio di codice, potete anche usare il carattere due volte al­l'i­ni­zio della sezione di codice. In questo modo markdown non valuta il semplice backtick come segnale.

``Questo è tutto `code`.``

Per con­tras­se­gna­re un intero blocco come codice sorgente, è possibile uti­liz­za­re una ta­bu­la­zio­ne o quattro spazi per ogni riga. Per far rientrare ul­te­rior­men­te le linee se­le­zio­na­te, è suf­fi­cien­te ag­giun­ge­re altre ta­bu­la­zio­ni o spazi.

Qui c’è ancora testo normale.
    Questa è la prima riga del blocco di codice.
    La seconda riga è ancora rientrata.
    Questa è un’ulteriore riga del blocco di codice.
Qui ricomincia il testo normale.

Se si pre­fe­ri­sco­no uti­liz­za­re caratteri per de­li­mi­ta­re i blocchi di codice, è anche possibile con­tras­se­gna­re l'area cor­ri­spon­den­te con tre backtick al­l'i­ni­zio e alla fine. Qui è anche possibile, come anche in altri editor di markdown, inserire evi­den­zia­zio­ni con diversi colori au­to­ma­ti­ca­men­te. Dopo i tre backtick in­tro­dut­ti­vi, spe­ci­fi­ca­te il lin­guag­gio in cui è stato scritto il suc­ces­si­vo codice sorgente.

```html
<html>
<head>
</head>
</html>
```

Immagini e col­le­ga­men­ti iper­te­stua­li

Con markdown potete anche integrare immagini e col­le­ga­men­ti iper­te­stua­li nel testo. Entrambi si creano con una com­bi­na­zio­ne di parentesi quadre e rotonde. È possibile creare un col­le­ga­men­to inserendo il testo di an­co­rag­gio, ovvero le parole o le frasi visibili nel testo, tra parentesi quadre e ag­giun­gen­do di­ret­ta­men­te l'URL tra parentesi tonde. Volendo, è possibile ag­giun­ge­re un titolo opzionale al col­le­ga­men­to iper­te­stua­le, che l'utente vede quando punta il cursore del mouse: il testo è racchiuso tra parentesi tonde, separato dall'URL da uno spazio e messo tra vir­go­let­te doppie.

Qui segue un [Link](https://example.com/ "Titolo del link opzionale").

Quando si inserisce un URL o un indirizzo e-mail nel testo, la maggior parte degli editor di markdown crea au­to­ma­ti­ca­men­te un col­le­ga­men­to iper­te­stua­le clic­ca­bi­le. Per ottenere questo, uti­liz­za­te il segno di minore e maggiore. D'altra parte, per evitare la modifica au­to­ma­ti­ca, con­tras­se­gna­te l'URL come codice e uti­liz­za­te nuo­va­men­te i backtick.

<https://example.com>
`https://example.com`

Come i col­le­ga­men­ti iper­te­stua­li, anche le immagini possono essere inserite nel documento markdown. In questo caso si inizia con un punto escla­ma­ti­vo. Poi si usano di nuovo le parentesi quadre, in cui si trova il testo al­ter­na­ti­vo al­l'im­ma­gi­ne, e parentesi tonde con l'URL del­l'im­ma­gi­ne. Questo viene vi­sua­liz­za­to di­ret­ta­men­te nel testo.

![Ecco un’immagine di esempio](https://example.com/immagine.jpg)
Consiglio

Na­tu­ral­men­te è anche possibile collegare pagine HTML o immagini sul proprio server. Se il documento in questione si trova sullo stesso server, sono suf­fi­cien­ti i percorsi relativi.

Inoltre, è possibile combinare immagini e col­le­ga­men­ti iper­te­stua­li. Se si desidera inserire un link a un’immagine, annidate le due funzioni insieme. L'im­ma­gi­ne diventa qui l’anchor text e quindi appare tra parentesi quadre.

[![Ecco un’immagine di esempio](https://example.com/immagine.jpg)](https://example.com)

Tabelle

Con la barra verticale (|) è possibile con­tras­se­gna­re le tabelle in markdown. Ogni cella è separata da una barra verticale (pipe). Per creare in­te­sta­zio­ni che si di­stin­guo­no vi­si­va­men­te dal resto del contenuto, vengono uti­liz­za­ti i trattini per indicare le celle cor­ri­spon­den­ti.

|Cella 1|Cella 2|
|--------|--------|
|  A  |  B  |
|  C  |  D  |

In linea di principio, non è im­por­tan­te che le barre verticali siano una sotto l’altra. Ciò aumenta la leg­gi­bi­li­tà solo se viene vi­sua­liz­za­ta la versione grezza del documento markdown. Lo stesso vale per le barre verticali che si trovano ai lati. Anche queste sono ir­ri­le­van­ti per la com­pi­la­zio­ne.

Note a piè di pagina

Markdown offre la pos­si­bi­li­tà di inserire note a piè di pagina. Nel testo corrente si scrive un numero di commento e lo si riporta alla fine della pagina nella nota a piè di pagina; una riga cor­ri­spon­den­te viene creata au­to­ma­ti­ca­men­te. Il numero della nota è for­mat­ta­to come col­le­ga­men­to iper­te­stua­le, in modo che si possa cliccare su di esso per passare di­ret­ta­men­te alla nota cor­ri­spon­den­te. Per poter uti­liz­za­re questa funzione au­to­ma­ti­ca, impostate prima il numero della nota dopo la parola de­si­de­ra­ta: tra parentesi quadre si scrive prima un accento cir­con­fles­so e a seguire il numero.

Il numero che si utilizza (sono possibili anche altri ri­fe­ri­men­ti) è ir­ri­le­van­te. Come per gli elenchi, markdown esegue il calcolo au­to­ma­ti­ca­men­te. Invece, è im­por­tan­te riportare cor­ret­ta­men­te il termine se­le­zio­na­to. Per fare questo, inserite nuo­va­men­te la stessa cifra in una nuova riga con accento cir­con­fles­so tra parentesi, ag­giun­ge­te due punti e poi scrivete la nota. Questa può anche essere for­mat­ta­ta in modo completo e può essere estesa su più righe.

Nel corpo del testo [^1] potete facilmente inserire [^2] note a piè di pagina.
[^1]: qui c’è il testo delle note a piè di pagina.
[^2]: Anche le **note a piè di pagina** possono essere *formattate*.
E queste includono anche diverse linee.
Consiglio

La posizione della nota nel testo non è rilevante. Markdown la vi­sua­liz­ze­rà sempre alla fine del documento. Per terminare la nota e con­ti­nua­re con il testo corrente, inserire una riga vuota.

& e

Poiché markdown è stret­ta­men­te legato a HTML, i simboli “e com­mer­cia­le”, maggiore e minore ri­chie­do­no una par­ti­co­la­re at­ten­zio­ne. Questi caratteri sono usati in HTML per aprire e chiudere i tag (<>) o per lavorare con le entità (&). Se dovete usare questi caratteri nel loro si­gni­fi­ca­to originale in HTML, dovete ma­sche­rar­li: &, < e >. In markdown, invece, non c'è motivo per non uti­liz­za­re i caratteri "così come sono". Ma poiché gli utenti hanno la pos­si­bi­li­tà di uti­liz­za­re insieme markdown e HTML, la questione si fa più complessa. Non siete voi a dover risolvere questa dif­fi­col­tà: il parser capisce quando si tratta di caratteri semplici e quando di codice HTML.

A & B
α
1 < 2
<p>

Ma­sche­ra­men­to tramite backslash

Oltre ai caratteri specifici di HTML, markdown utilizza anche alcuni simboli per il markup. Tali simboli provocano una reazione del parser durante la for­mat­ta­zio­ne. A tale scopo possono essere uti­liz­za­ti i seguenti caratteri:

  • Asterisco: *
  • Trattino: -
  • Un­der­sco­re: _
  • Parentesi tonde: ()
  • Parentesi quadre: []
  • Parentesi graffe: {}
  • Punto: .
  • Punto escla­ma­ti­vo: !
  • Can­cel­let­to: #
  • Accento grave: `
  • Backslash: \

Per usare questi caratteri nel loro si­gni­fi­ca­to reale, basta mettere un backslash davanti a loro. Non di­men­ti­ca­te che il backslash deve essere scritto prima di ogni carattere; ad esempio davanti a una parentesi di apertura e di chiusura.

Questo è un \*esempio con asterischi\*.
Consiglio

Vi pia­ce­reb­be provare a uti­liz­za­re markdown? Nel nostro articolo sugli editor di markdown sco­pri­re­te il programma più indicato per il vostro sistema.

Vai al menu prin­ci­pa­le