Markdown: guida al semplice linguaggio di markup

Quando leggiamo testi, che siano in Internet, in una rivista o in un libro stampato, ci aspettiamo un certo formato. Le parole particolarmente importanti 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 formattazione, quando scriviamo un testo al PC ci riusciamo senza problemi: modifichiamo la dimensione dei caratteri, inseriamo trattini e parole in grassetto. Ogni programma di elaborazione 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 difficilmente il codice è leggibile.

Linguaggi come HTML o LaTeX possono essere scritti con qualsiasi editor di testo, ma non sono facili da decifrare. Il linguaggio di markup semplificato markdown si presenta diversamente. Esso cerca di trarre il meglio dai due mondi: risultare comprensibile tanto per i dispositivi, quanto per le persone. markdown utilizza elementi intuitivi per formattare il testo. Un testo marcato con questo linguaggio risulta, dunque, relativamente semplice da leggere.

A quale scopo si utilizza markdown?

Proprio come HTML o LaTex, markdown è un linguaggio di markup. Rispetto a questi, markdown dovrebbe risultare decisamente più semplice da leggere. Ogni elemento di marcatura non deve essere astratto, ma vicino al significato reale. Per spiegare tale principio, basta fare un esempio: se in HTML si desidera evidenziare una parola in grassetto, si utilizza il tag '<b>' o '<strong>'.

 

<p>Questa <b>parola</b> &#xE8; in grassetto e questa <strong>anche</strong>.</p>

D’altra parte, se scrivete un documento in LaTeX, utilizzate (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, soprattutto se si pensa a testi più complessi. Markdown semplifica tutto questo, contrassegnando con un semplice asterisco i passaggi in grassetto.

Questa **parola** è in grassetto.

Questa soluzione è più facile da leggere, perché l'asterisco rende l’area in grassetto immediatamente riconoscibile e, inoltre, i quattro caratteri sono molto più veloci da digitare rispetto ai tag. Anche senza formattazione (come nel testo normale) un lettore può individuare facilmente le intenzioni dell’autore, anche se non conosce la sintassi di markdown.

Per questo, markdown è particolarmente interessante per quegli utenti che non dispongono di alcun background informatico o conoscenze di web design, ma che comunque scrivono regolarmente testi destinati a Internet: ad esempio blogger che lavorano con un Content Management System (CMS). Tuttavia, anche le persone più affini alla tecnologia usano markdown per la scrittura di testi semplici. Ad esempio, alcuni programmatori usano questo linguaggio per scrivere documentazione di accompagnamento (ad esempio file readme) che in un primo momento non viene formattata. Che l'utente apra il testo con markdown o lo legga allo stato grezzo non fa molta differenza in termini di leggibilità.

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 generatore di siti Jekyll trattano questo linguaggio di markup semplificato.

Fatto

I linguaggi di markup non sono linguaggi di programmazione. I primi servono soltanto a determinare in quale modo va strutturato un testo. I linguaggi di programmazione, invece, sono caratterizzati da loop e variabili e sono la base per la scrittura di software.

Markdown non vuole sostituirsi a HTML, in quanto limitato nelle capacità di progettazione. Gli sviluppatori vedono markdown piuttosto come un’integrazione. È possibile inserire elementi HTML in un documento markdown e ampliare così lo spettro di questo linguaggio relativamente semplice. Di fatto, markdown ha lo scopo di semplificare la scrittura (soprattutto su Internet). Quando i documenti markdown vengono convertiti dal parser, vengono creati, ad esempio, file HTML per consentire la visualizzazione 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 linguaggio “in miniatura”: markdown.

Tutorial su markdown: la sintassi corretta per i vostri documenti

Proponendosi come linguaggio di markup molto semplice, markdown ha una sintassi pressoché intuitiva. Ad ogni modo, è necessario conoscere gli elementi di markup prima di poterli utilizzare. Qui di seguito trovate elencate le funzioni principali.

Grassetto e corsivo

I grassetti e i corsivi sono particolarmente facili da creare con markdown. Infatti, basta utilizzare le stelline, i cosiddetti asterischi. Per scrivere in corsivo, inserite un asterisco prima e dopo la parola o le parole. Per i grassetti, utilizzate due asterischi e se si desidera creare un'area di testo sia in grassetto che in corsivo utilizzate tre asterischi. In alternativa potete utilizzare gli underscore.

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

Barrare

Per visualizzare un testo barrato, utilizzate la tilde due volte di fila, fate seguire il testo corrispondente e inserite nuovamente due tilde.

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

Con markdown non potete sottolineare il testo. In HTML questo è possibile con il '<u>' tag , ma generalmente non è raccomandato. Conviene evitare confusione, dal momento che i collegamenti ipertestuali nel web sono visualizzati come testo sottolineato.

Intestazioni

Per creare un’intestazione con markdown, normalmente si utilizza un cancelletto. Questo va inserito prima del testo, separato da uno spazio. Per creare intestazioni di livello gerarchico inferiore, e quindi scritte in dimensioni più piccole, si utilizzano ulteriori cancelletti. In questo modo è possibile creare intestazioni fino al sesto livello come in HTML.

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

Alcuni utenti utilizzano i cancelletti anche dopo le intestazioni. Questo può rendere il testo più leggibile, ma è tecnicamente superfluo. Nella formattazione questi caratteri vengono semplicemente ignorati.

In alternativa, per contrassegnare le intestazioni è possibile utilizzare segni di equivalenza e trattini. Questi vanno collocati nella linea al di sotto dell’intestazione. Con questa soluzione è possibile creare solo due diverse dimensioni di intestazione. Un carattere per intestazione è perfettamente sufficiente, 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 sottolineato una o due volte.

Intestazione 1
=
Intestazione 2
-

Paragrafi

Il linguaggio di markdown utilizza interruzioni di linea per separare i paragrafi. Per creare un blocco di testo completamente nuovo (tag

), è sufficiente inserire una linea vuota. Qui è importante sapere che per markdown è sufficiente che la linea sia visivamente vuota. Se ci sono caratteri di spazi bianchi come tabulazioni o spazi vuoti, il parser li ignora e interpreta la linea come vuota. Se si desidera creare un’interruzione di linea con il tag
, basta aggiungere alla fine della linea due spazi.

Citazioni

Per contrassegnare una determinata area di testo come citazione, con markdown è possibile creare un cosiddetto elemento blockquote. Per questo si utilizza il carattere di segno maggiore (>). È possibile contrassegnare ogni riga con questo segno o posizionarne solo uno all'inizio del paragrafo e terminare l'area rientrata con una riga vuota. Nell’elemento blockquote sono possibili altri elementi di formattazione.

>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

È interessante notare che per markdown il numero effettivo è irrilevante. Che si scriva tre volte uno o si inizi con il numero tre, il linguaggio inizierà sempre l'elenco con il numero corretto.

Markdown offre anche la possibilità di creare checklist. Queste appaiono in una casella che si attiva semplicemente con un comando. Durante la creazione dell’elenco è anche possibile inserire delle spunte. A tal fine, utilizzate le parentesi quadre e una X.

N.B.

È importante ricordare di lasciare uno spazio tra le parentesi quadre quando si lasciano caselle vuote. Altrimenti markdown non riconoscerà il testo come elenco.

Codice

Per contrassegnare un'area di testo come codice, markdown utilizza il cosiddetto backtick, noto anche come gravis o accento grave, da non confondere con la virgoletta singola. La marcatura prevede un accento all’inizio e uno alla fine dell’area di testo corrispondente. In questo modo, il codice sorgente o i comandi software possono essere integrati direttamente nel testo corrente.

Questo è `code`.
N.B.

Attenzione a non creare accidentalmente un accento grave durante la scrittura del codice: à. Ciò si verifica automaticamente se si scrive il carattere davanti a una vocale. Evitate questo inconveniente premendo la barra spaziatrice 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 all'inizio della sezione di codice. In questo modo markdown non valuta il semplice backtick come segnale.

``Questo è tutto `code`.``

Per contrassegnare un intero blocco come codice sorgente, è possibile utilizzare una tabulazione o quattro spazi per ogni riga. Per far rientrare ulteriormente le linee selezionate, è sufficiente aggiungere altre tabulazioni 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 preferiscono utilizzare caratteri per delimitare i blocchi di codice, è anche possibile contrassegnare l'area corrispondente con tre backtick all'inizio e alla fine. Qui è anche possibile, come anche in altri editor di markdown, inserire evidenziazioni con diversi colori automaticamente. Dopo i tre backtick introduttivi, specificate il linguaggio in cui è stato scritto il successivo codice sorgente.

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

Immagini e collegamenti ipertestuali

Con markdown potete anche integrare immagini e collegamenti ipertestuali nel testo. Entrambi si creano con una combinazione di parentesi quadre e rotonde. È possibile creare un collegamento inserendo il testo di ancoraggio, ovvero le parole o le frasi visibili nel testo, tra parentesi quadre e aggiungendo direttamente l'URL tra parentesi tonde. Volendo, è possibile aggiungere un titolo opzionale al collegamento ipertestuale, 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 virgolette 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 automaticamente un collegamento ipertestuale cliccabile. Per ottenere questo, utilizzate il segno di minore e maggiore. D'altra parte, per evitare la modifica automatica, contrassegnate l'URL come codice e utilizzate nuovamente i backtick.

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

Come i collegamenti ipertestuali, anche le immagini possono essere inserite nel documento markdown. In questo caso si inizia con un punto esclamativo. Poi si usano di nuovo le parentesi quadre, in cui si trova il testo alternativo all'immagine, e parentesi tonde con l'URL dell'immagine. Questo viene visualizzato direttamente nel testo.

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

Naturalmente è anche possibile collegare pagine HTML o immagini sul proprio server. Se il documento in questione si trova sullo stesso server, sono sufficienti i percorsi relativi.

Inoltre, è possibile combinare immagini e collegamenti ipertestuali. Se si desidera inserire un link a un’immagine, annidate le due funzioni insieme. L'immagine 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 contrassegnare le tabelle in markdown. Ogni cella è separata da una barra verticale (pipe). Per creare intestazioni che si distinguono visivamente dal resto del contenuto, vengono utilizzati i trattini per indicare le celle corrispondenti.

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

In linea di principio, non è importante che le barre verticali siano una sotto l’altra. Ciò aumenta la leggibilità solo se viene visualizzata la versione grezza del documento markdown. Lo stesso vale per le barre verticali che si trovano ai lati. Anche queste sono irrilevanti per la compilazione.

Note a piè di pagina

Markdown offre la possibilità 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 corrispondente viene creata automaticamente. Il numero della nota è formattato come collegamento ipertestuale, in modo che si possa cliccare su di esso per passare direttamente alla nota corrispondente. Per poter utilizzare questa funzione automatica, impostate prima il numero della nota dopo la parola desiderata: tra parentesi quadre si scrive prima un accento circonflesso e a seguire il numero.

Il numero che si utilizza (sono possibili anche altri riferimenti) è irrilevante. Come per gli elenchi, markdown esegue il calcolo automaticamente. Invece, è importante riportare correttamente il termine selezionato. Per fare questo, inserite nuovamente la stessa cifra in una nuova riga con accento circonflesso tra parentesi, aggiungete due punti e poi scrivete la nota. Questa può anche essere formattata 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 visualizzerà sempre alla fine del documento. Per terminare la nota e continuare con il testo corrente, inserire una riga vuota.

& e <>

Poiché markdown è strettamente legato a HTML, i simboli “e commerciale”, maggiore e minore richiedono una particolare attenzione. 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 significato originale in HTML, dovete mascherarli: &, < e >. In markdown, invece, non c'è motivo per non utilizzare i caratteri "così come sono". Ma poiché gli utenti hanno la possibilità di utilizzare insieme markdown e HTML, la questione si fa più complessa. Non siete voi a dover risolvere questa difficoltà: il parser capisce quando si tratta di caratteri semplici e quando di codice HTML.

A & B
&alpha;
1 < 2
<p>

Mascheramento 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 formattazione. A tale scopo possono essere utilizzati i seguenti caratteri:

  • Asterisco: *
  • Trattino: -
  • Underscore: _
  • Parentesi tonde: ()
  • Parentesi quadre: []
  • Parentesi graffe: {}
  • Punto: .
  • Punto esclamativo: !
  • Cancelletto: #
  • Accento grave: `
  • Backslash: \

Per usare questi caratteri nel loro significato reale, basta mettere un backslash davanti a loro. Non dimenticate 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 piacerebbe provare a utilizzare markdown? Nel nostro articolo sugli editor di markdown scoprirete il programma più indicato per il vostro sistema.


Un momento! Prima di lasciarci scopri
la nostra offerta per il rientro dalle ferie:
dominio .it a 1 € per il primo anno!

Primo anno a 1 € IVA escl.,
poi 10 €/anno IVA escl.

Inserisci il dominio desiderato nella barra di ricerca per verificarne la disponibilità.