Sintassi estesa

introduzione

La sintassi originale di Markdown, pubblicata da John Gruber, aggiungeva diversi elementi essenziali per la modifica dei documenti, ma alcuni utenti non erano soddisfatti.

La sintassi estesa cerca di risolvere questa insoddisfazione aggiungendo nuovi elementi attraverso nuovi contrassegni.

Tabelle, blocchi di codice, generazione automatica di links e persino note a piè di pagina sono esempi di estensione della sintassi di base di Markdown.

Questi elementi possono essere attivati ​​installando un plugin per il tuo processore Markdown o anche usando una piccola variazione della sintassi del linguaggio.

NOTA: è del tutto possibile che la tua applicazione Markdown abbia già il supporto per gli elementi presentati in questo articolo, quindi vale la pena testarli ciascuno mentre si segue il tutorial.

Sapori di Markdown

Markdown ha alcuni gusti diversi, ovvero variazioni della sintassi di base del linguaggio.

Queste variazioni, oltre a supportare la sintassi di base, aggiungono elementi che arricchiscono la modifica del documento.

Le applicazioni compatibili con Markdown useranno spesso una delle lingue mostrate di seguito:

CommonMark

GitHub-flavored Markdown (GFM)

Markdown Extra

R Markdown

MultiMarkdown

Creazione di tabelle in Markdown

Una tabella in Markdown può essere utilizzata per presentare i confronti dei dati da parte dell'utente.

Per creare una tabella in Markdown usiamo trattini - e barre verticali | per separare righe e colonne.

La prima riga della tabella è dove creiamo l'intestazione, separando quella riga con tre o più trattini --- in modo che il processore Markdown comprenda la formattazione.

La separazione delle colonne viene eseguita utilizzando la barra verticale |, chiamata anche pipe dai programmatori.

Di seguito è riportata una tabella di esempio:

| Titolo  | Titolo   |
| ------- | -------- |
| Testo   | Testo    |
| Testo   | Testo    |

Le barre verticali | utilizzati alle estremità del tavolo sono per scopi puramente cosmetici, ovvero è possibile creare un tavolo senza le barre laterali.

Esempio:

Titolo  | Titolo
------- | --------
Testo   | Testo
Testo   | Testo

L'output reso in HTML:

La larghezza della cella, all'interno di una tabella Markdown, può variare.

Esempio:

| Titolo | Titolo |
| --- | ----------- |
| Testo | Testo |
| Testo     | Testo |

Generazione automatica di tabelle in Markdown

Markdown è qui per semplificare la modifica dei documenti e la creazione di tabelle può diventare un po 'più noiosa.

L'uso di barre e trattini verticali potrebbe non piacere ad alcuni utenti, quindi è interessante che siamo in grado di automatizzare il processo di formattazione delle tabelle in Markdown.

Passaggio 1 - Apri il nostro editor Markdown facendo clic qui.

Passaggio 2 - Fare clic sull'icona di generazione automatica della tabella per aprire il pannello delle opzioni.

Passaggio 3 - Nel pannello delle opzioni:

1. Immettere il numero di righe nella tabella.
2. Imposta il numero di colonne nella tabella.
3. Scegli la posizione di allineamento del testo all'interno delle colonne.
4. Fare clic per confermare e generare la struttura della tabella.

Passaggio 4 - Inserisci i valori per ogni cella.

Allineamento

Markdown ti consente di allineare il contenuto di una colonna della tabella a sinistra, a destra o al centro.

Per allineare il contenuto a sinistra in una tabella Markdown, inserire i due punti : prima dei trattini --- che separano la riga di intestazione.

Esempio:

| Frutta  | Verdure | Verdure |
| :---    | :----    | :---    |
| anacardi    | Crescione   | Carota |
| Mela    | Broccoli | Pisello |

Risultato in HTML:

NOTA: l'utilizzo dei due punti per allineare il testo a sinistra è facoltativo, poiché il contenuto della tabella è già allineato in quella posizione per impostazione predefinita.

Per allineare il testo a destra all'interno della tabella Markdown, inserire i due punti : dopo i trattini --- che separano la riga di intestazione.

Esempio:

| Frutta  | Verdure | Verdure |
|    ---: |    ----: |    ---: |
| anacardi    | Crescione   | Carota |
| Mela    | Broccoli | Pisello |

Risultato in HTML:

Per allineare il contenuto della colonna al centro in una tabella Markdown, aggiungi i due punti : prima e dopo i trattini che separano la riga di intestazione.

Esempio:

| Frutta  | Verdure | Verdure |
|  :---:  |  :----:  |  :---:  |
| anacardi    | Crescione   | Carota |
| Mela    | Broccoli | Pisello |

Risultato in HTML:

È possibile unire la formattazione dell'allineamento, poiché influisce solo sul contenuto all'interno della colonna.

Esempio:

| Frutta  | Verdure | Verdure |
| :---    |  :----:  |    ---: |
| anacardi    | Crescione   | Carota |
| Mela    | Broccoli | Pisello |

Risultato in HTML:

Vale la pena notare che l'allineamento dei trattini --- della riga che separa i titoli della tabella è irrilevante per il processore Markdown, ciò che verrà veramente preso in considerazione è la posizione dei due punti :.

Nell'esempio seguente i trattini --- sono posizionati a sinistra della colonna e l'allineamento funziona in modo uniforme.

| Frutta  | Verdure | Verdure |
| :---    | :----:   | ---:    |
| anacardi    | Crescione   | Carota |
| Mela    | Broccoli | Pisello |

Risultato in HTML:

NOTA: Anche il contenuto dell'intestazione della tabella verrà allineato in base alla posizione dei due punti.

Formattazione del testo nelle tabelle

Puoi inserire alcuni elementi di base di Markdown in una tabella.

Alcune formattazioni consentite sono la creazione di links, l'enfatizzazione del contenuto in grassetto o corsivo e l'evidenziazione del testo come codice, ma è accettato solo il codice online, cioè quando viene creato con l'apertura e la chiusura delle virgolette [a1] "".

Titoli, blocchi di codice, blockquotes, elenchi, linee orizzontali, immagini e tags HTML non funzionano.

NOTA: Puoi anche trovare applicazioni che accettano l'inserimento degli elementi sopra menzionati all'interno di una tabella, ma questo comprometterà la portabilità del tuo documento, poiché altri programmi non lo supportano.

Fuga dalle barre verticali sui tavoli

Hai già imparato che per separare le colonne della tabella usiamo la barra verticale |.

Ora, se intendi mostrare lo stesso carattere come contenuto all'interno di una cella, devi utilizzare la codifica HTML: |.

Ao converter o seu documento para um outro formato, o código | se transformará em uma barra vertical |.

Blocco di codice recintato

Un blocco di codice circondato consente di creare rappresentazioni di codice senza dover rientrare la riga in quattro spazi o una tabulazione, inoltre, consente anche di definire quale linguaggio di programmazione rappresenta il blocco, con questo è possibile applicare la sintassi appropriata evidenziando.

Per creare un blocco di codice recintato in Markdown, inserire tre virgolette ` ``prima del contenuto e tre virgolette `` ` dopo il contenuto.

Esempio:

```
{
  "Nome": "Robert",
  "cognome": "Salles",
  "età": 25
}
```

L'output renderizzato ha questo aspetto:

{
  "Nome": "Robert",
  "cognome": "Salles",
  "età": 25
}

NOTA: Alcuni processori Markdown consentono di utilizzare le tessere ~~~ al posto delle virgolette posteriori per formare il blocco di codice.

Vedi anche: Come sfuggire alle dorsali all'interno di un blocco di codice.

Evidenziazione della sintassi

Molte librerie JavaScript vengono utilizzate per evidenziare blocchi di codice, ad esempio: Prism.js & highlight.js.

Prendono uno specifico tag HTML, di solito tag pre o tag codice e applicano l'evidenziazione in base alla sintassi del linguaggio di programmazione del blocco di codice.

La sintassi del linguaggio è solitamente definita dal parametro tag class, ad esempio:

<code class="lang-markdown"></code>

Utilizzando la classe lang-plaintext>lang-markdown, il framework saprà che il contenuto tra il "codice" tags dovrebbe essere evidenziato in base al linguaggio Markdown.

NOTA: L'applicazione dell'evidenziatore può essere effettuata anche automaticamente, alcuni strumenti hanno la capacità di rilevare i linguaggi di programmazione in modo automatizzato, senza la necessità di definirli nel parametro class.

Nella creazione del blocco di codice utilizzando Markdown è possibile specificare il linguaggio di programmazione subito dopo l'apertura delle prime tre virgolette ` ``.

Esempio:

```json
{
  "Nome": "Robert",
  "cognome": "Salles",
  "età": 25
}
```

Come nella prima riga del blocco, subito dopo le tre dorsali di apertura, è stato specificato json il codice verrà evidenziato di conseguenza:

{
  "Nome": "Robert",
  "cognome": "Salles",
  "età": 25
}

NOTA: il codice verrà evidenziato solo se si utilizza una libreria JavaScript che esegue questo tipo di attività, HTML da solo non evidenzia il codice.

Note a piè di pagina

Una nota a piè di pagina in Markdown consente all'utente di creare un riferimento ad alcuni concetti menzionati nel documento.

In genere, queste note a piè di pagina sono posizionate alla fine del documento, ma in Markdown puoi definirle ovunque nel testo.

Quando si crea una nota a piè di pagina, verrà inserito un numero in apice sotto forma di link nel punto in cui è stato creato, quando l'utente fa clic su questo link verrà portato direttamente nel luogo che contiene il riferimento della nota.

La sintassi per creare la nota a piè di pagina è divisa in due parti.

La prima parte rappresenta il numero contenente lo link e viene creata utilizzando parentesi quadre, un accento circonflesso e un identificatore, ad esempio: [^1].

L'identificatore può contenere numeri e lettere, ma non accetta spazi o tabulazioni.

La seconda parte copre il contenuto del riferimento stesso, per crearlo usa parentesi quadre, un accento circonflesso seguito dallo stesso identificatore (che hai creato in precedenza), due punti, uno spazio vuoto e il testo, esempio: [^1]: La mia nota a piè di pagina.

Ecco una semplice nota a piè di pagina[^1]. Ecco una nota a piè di pagina più elaborata[^bignote].

[^1]: Questa è la prima nota a piè di pagina.

[^bignote]: Eccone uno con diversi paragrafi e codice.

    Rientra i paragrafi per includerli nella nota a piè di pagina.

    `{ il mio codice }`

    Aggiungi tutti i paragrafi che desideri.

La riderizzazione in HTML è simile a questa:

Ecco una semplice nota a piè di pagina¹. Ecco una nota a piè di pagina più elaborata².

NOTA: il contenuto del piè di pagina può essere posizionato ovunque nel documento tranne che all'interno di altri elementi Markdown come tabelle, elenchi e blocchi di codice.

NOTA: le note a piè di pagina saranno sempre numerate in sequenza, indipendentemente dagli identificatori che hai creato, una sequenza di note [^ 35], [^ yyyy] e [^ 102_444], sarà rappresentata come 1, 2 e 3.

Aggiunta di ID o Class agli elementi Markdown

Quando creiamo tags in HTML, possiamo assegnare loro un'identificazione univoca e un'identificazione generica tramite i parametri id e class.

Esempio:

<h2 id="special-title"></h2> & <p class="bg-blue"></p>

Con id possiamo ottenere un riferimento specifico per un particolare elemento, normalmente il id dell'elemento è unico all'interno del tag HTML.

Il parametro class è generico e può essere assegnato a più elementi.

La funzione di id o class è di permetterti di riconoscere facilmente questi elementi tramite JavaScript o CSS, usando questo id o questo class possiamo manipolare le proprietà come colore, dimensione, posizionamento, ecc.

Per aggiungere un id o un class a un elemento in Markdown parentesi graffe aperte { subito dopo il contenuto dell'elemento, inserisci un cancelletto # per indicare un id o . per indicare un class, quindi l'identificatore stesso e, infine, chiudere le parentesi graffe }.

Esempi:

### Il mio titolo {#identifier}

Il mio paragrafo{.my-class}

Lo HTML ha questo aspetto:

<h3 id="identifier">Il mio titolo</h3>

<p class="my-class">Il mio paragrafo</p>

NOTA: Notare che non tutte le applicazioni Markdown supportano l'inserimento dei parametri id o class, è sempre importante consultare la documentazione del programma.

Links per ids su Markdown

Con la stessa sintassi standard per la creazione di links [] (), possiamo collegare un riferimento diretto a un id nel documento stesso.

All'interno delle parentesi dove mettiamo URL, inserisci il id dell'elemento preceduto dal cancelletto #.

Se id è in un altro documento, la formattazione è simile, tuttavia, prima dell'identificazione, inserisci la pagina URL.

Esempio:

[ID intestazione](https://markdown.net.br/sintaxe-estendida#markdown-title-id)

Elenco delle definizioni

Un elenco di definizioni in HTML è rappresentato da tags dl e dt. Questo elenco rappresenta i termini e le loro spiegazioni in modo concettuale.

Per creare un elenco di definizioni con Markdown, digitare il termine su una riga, premere il tasto Enter, due punti, uno spazio vuoto e la definizione del termine.

Esempio:

Primo termine
: Questa è la definizione del primo termine.

Secondo termine
: Questa è una definizione del secondo termine.
: Questa è un'altra definizione del secondo termine.

Lo HTML ha questo aspetto:

<dl>
  <dt>Primo termine</dt>
  <dd>Questa è la definizione del primo termine.</dd>
  <dt>Secondo termine</dt>
  <dd>Questa è una definizione del secondo termine. </dd>
  <dd>Questa è un'altra definizione del secondo termine.</dd>
</dl>

È il risultato:

Primo termine

Questa è la definizione del primo termine.

Secondo termine

Questa è una definizione del secondo termine.

Questa è un'altra definizione del secondo termine.

Barrato in Markdown

Il barrato viene utilizzato per correggere un errore in modo comparativo, di solito seguito da una correzione sulla stessa riga.

Il barrato non è altro che un formato che inserisce una linea orizzontale al centro di un contenuto.

Per colpire un contenuto in Markdown usa due tessere ~~ prima e dopo il testo da formattare.

Markdown è: ~~difficile~~ facile da imparare.

E il risultato è questo:

Markdown è: difficile facile da imparare.

Elenchi di attività in Markdown

Un elenco di attività in Markdown consente all'utente di creare una sequenza di elementi con caselle di controllo alla loro sinistra utilizzando parentesi quadre [].

Dato che stiamo lavorando con una lista, è necessario far iniziare la riga dell'elemento con un trattino -.

Per contrassegnare un'attività come completata, inserire una x all'interno delle parentesi [x].

- [x] Lorem ipsum dolor sit amet
- [ ] Lorem consectetur adipisicing elit
- [ ] Lorem ut labore et dfolore

L'output renderizzato ha questo aspetto:

Inserimento di Emojis nel documento Markdown

Sì, puoi inserire il famoso emoticons direttamente nel formato Markdown del tuo documento.

Esistono due modi più comunemente usati per l'attività, copiare e incollare l'emoji nel contenuto o inserire i codici emoji.

Capiremo meglio come funzionano le due procedure, ma prima, clicca qui per aprire il nostro editor Markdown e testare Emojis in tempo reale.

Copiare e incollare Emojis in Markdown

Step 1 - Apri questa pagina Emojipedia che contiene un emoticon sorridente e fai clic sul pulsante Copy.

Step 2 - Torna al nostro editor Markdown, fai clic sul pannello di sinistra e premi CTRL + V per incollare.

NOTA: Puoi esplorare Emojipedia per trovare le tue emoji preferite, la procedura di copia e incolla è la stessa per tutte.

Se la tua applicazione Markdown è compatibile, vedrai la rappresentazione di emoticon direttamente nel testo.

Quando si converte il documento Markdown in HTML o anche in PDF, gli emoji vengono comunque rappresentati correttamente.

NOTA: se il documento HTML non riproduce gli emoji come dovrebbe, codifica le pagine in UTF-8.

Utilizzo dei codici di accesso Emoji

Un codice emoji si forma identificando il emoticon circondato da due punti.

Sono andato in campeggio! :tent: Tornerò presto.

È così divertente! :joy:

L'output renderizzato ha questo aspetto:

Sono andato in campeggio! ⛺ Tornerò presto.

È così divertente! 😂

Alla scoperta del codice di accesso Emojis

Se non conosci il codice di accesso emoji, usa il nostro editor Markdown per scoprirlo.

Step 1 - Clicca qui per aprire Markeditor.

Passaggio 2 - Fare clic sul pulsante di inserimento Emojis sulla barra degli strumenti.

Passaggio 3 - Nella finestra di selezione di Emoji:

1. Scegli la fonte da cui desideri ottenere il file Emojis.
2. Fare clic sul Emoji che verrà inserito nel documento (è possibile fare clic su diversi Emojis nella stessa finestra).
3. Premere il pulsante di conferma per inserire il codice di accesso per le immagini nel testo.

Nel pannello di sinistra è possibile visualizzare i codici per Emojis e nel pannello di destra il rendering.

NOTA: Le immagini di emoticons possono variare notevolmente da applicazione a applicazione, in questo elenco trovi gli emoji compatibili con Markdown usati da GitHub, puoi testarli nella tua applicazione per scoprire se ci sono sono compatibilità.

Link automatico da URL in Markdown

Alcuni processori Markdown trasformano URL in links quando trovano un indirizzo compreso tra i segni minore di < e maggiore di >.

Esempio:

<https://markdown.net.br>

Em outras ocasiões, embutir o endereço entre <> é dispensável, ou seja, basta inserir a URL no próprio documento que o aplicativo fará a conversão automaticamente.

Esempio:

https://markdown.net.br

L'output renderizzato ha questo aspetto:

https://markdown.net.br

Disabilitazione del collegamento automatico di URL

Se si desidera solo rappresentare un URL in un documento e impedire all'applicazione di convertirlo automaticamente in un link, racchiudere l'indirizzo tra virgolette ` `.

`https://markdown.net.br`

L'output renderizzato ha questo aspetto:

https://markdown.net.br

NOTA: vale la pena ricordare che l'uso di virgolette per racchiudere il contenuto lo trasforma in codice.