MDViewer

Esempi della sintassi Markdown

2026-07-27 2484 parole 12 min di lettura

Una pagina con tutta la sintassi Markdown e tutte le funzioni visive supportate da MDViewer: formule, tabelle, diagrammi, evidenziazione, riquadri, note e altro.

SintassiEsempiMermaidKaTeX

Questa pagina mostra tutto ciò che MDViewer può visualizzare. Usala come lista di controllo del rendering: ogni blocco seguente dovrebbe apparire formattato, non come markup grezzo.

Suggerimento

Scarica questo file, aprilo con il lettore nella pagina iniziale e otterrai esattamente lo stesso risultato.

1. Testo e formattazione in linea

Un paragrafo normale. Grassetto, corsivo, grassetto corsivo, barrato, inserimento sottolineato, evidenziato, codice in linea.

Pedice e apice: H2O, E = mc2, il 42o elemento.

Un collegamento in linea alla specifica CommonMark , un collegamento automatico https://developer.mozilla.org/ e un collegamento interno .

Le abbreviazioni mostrano la forma estesa al passaggio del mouse: HTML e CSS sono le fondamenta del front-end.

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

Emoji: 🚀 ✨ 📚 ✅ ⚠️

Forza un’interruzione di riga con due spazi finali:
questa riga appartiene allo stesso paragrafo di quella precedente.

Mostra il Markdown Nascondi il Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Un paragrafo normale. **Grassetto**, *corsivo*, ***grassetto corsivo***, ~~barrato~~, ++inserimento sottolineato++, ==evidenziato==, `codice in linea`.

Pedice e apice: H~2~O, E = mc^2^, il 42^o^ elemento.

Un collegamento in linea alla [specifica CommonMark](https://commonmark.org/), un collegamento automatico <https://developer.mozilla.org/> e un [collegamento interno](../quick-start/).

Le abbreviazioni mostrano la forma estesa al passaggio del mouse: HTML e CSS sono le fondamenta del front-end.

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

Emoji: :rocket: :sparkles: :books: :white_check_mark: :warning:

Forza un’interruzione di riga con due spazi finali:  
questa riga appartiene allo stesso paragrafo di quella precedente.

2. Livelli dei titoli

I titoli ricevono automaticamente un’ancora, l’indice a destra permette di raggiungerli e al passaggio del mouse compare un collegamento # alla fine del titolo.

Titolo di livello 3

Titolo di livello 4

Titolo di livello 5
Titolo di livello 6

3. Elenchi

Elenco puntato

  • Primo elemento
  • Secondo elemento
    • Livello annidato due
      • Livello annidato tre
  • Terzo elemento
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5

- Primo elemento
- Secondo elemento
  - Livello annidato due
    - Livello annidato tre
- Terzo elemento

Elenco numerato

  1. Prepara il contenuto
  2. Scrivilo in Markdown
    1. Crea una bozza del testo
    2. Controlla l’anteprima mentre procedi
  3. Pubblicalo
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5

1. Prepara il contenuto
2. Scrivilo in Markdown
   1. Crea una bozza del testo
   2. Controlla l’anteprima mentre procedi
3. Pubblicalo

Elenco attività

  • Elenchi attività GFM supportati
  • Gli elementi completati vengono barrati
  • Un elemento non completato
  • Annidamento supportato
    • Anche gli elementi secondari possono essere selezionati
    • Un elemento secondario non completato
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5
6

- [x] Elenchi attività GFM supportati
- [x] Gli elementi completati vengono barrati
- [ ] Un elemento non completato
- [ ] Annidamento supportato
  - [x] Anche gli elementi secondari possono essere selezionati
  - [ ] Un elemento secondario non completato

Elenco di definizioni

Mermaid
Una sintassi testuale per diagrammi, visualizzata come diagrammi di flusso, sequenze e altro.
Markdown
Un linguaggio di markup leggero che esprime la struttura del layout in testo semplice.
KaTeX
Una libreria di composizione matematica che visualizza molto rapidamente formule TeX nel browser.
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5
6
7
8

Mermaid
: Una sintassi testuale per diagrammi, visualizzata come diagrammi di flusso, sequenze e altro.

Markdown
: Un linguaggio di markup leggero che esprime la struttura del layout in testo semplice.

KaTeX
: Una libreria di composizione matematica che visualizza molto rapidamente formule TeX nel browser.

4. Citazioni e riquadri informativi

Una normale citazione a blocco. Le citazioni possono contenere formattazione in linea, codice e più paragrafi.

Questo è il secondo paragrafo della citazione.

Una citazione annidata.

Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5

> Una normale citazione a blocco. Le citazioni possono contenere **formattazione in linea**, `codice` e più paragrafi.
>
> Questo è il secondo paragrafo della citazione.
>
> > Una citazione annidata.

I riquadri in stile GitHub vengono visualizzati come schede colorate con icone:

Nota

Informazioni generali che aggiungono contesto senza influire sul flusso principale.

Suggerimento

Un suggerimento che fa risparmiare tempo. Per esempio: premi ? per vedere tutte le scorciatoie.

Importante

Informazioni essenziali per completare l’attività; ignorarle porta a un errore.

Avviso

Qualcosa che richiede subito la tua attenzione; ignorarlo può avere conseguenze.

Attenzione

Un’operazione rischiosa: assicurati di comprenderne il risultato prima di eseguirla.

Mostra il Markdown Nascondi il Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> [!NOTE]
> Informazioni generali che aggiungono contesto senza influire sul flusso principale.

> [!TIP]
> Un suggerimento che fa risparmiare tempo. Per esempio: premi <kbd>?</kbd> per vedere tutte le scorciatoie.

> [!IMPORTANT]
> Informazioni essenziali per completare l’attività; ignorarle porta a un errore.

> [!WARNING]
> Qualcosa che richiede subito la tua attenzione; ignorarlo può avere conseguenze.

> [!CAUTION]
> Un’operazione rischiosa: assicurati di comprenderne il risultato prima di eseguirla.

5. Codice

Codice in linea e blocchi delimitati

Il comando di installazione è npm install; il file di configurazione è package.json.

1
2
3
4
5

# Trova tutti i file Markdown nella cartella
find . -name "*.md" -not -path "./node_modules/*"

# Calcola il numero totale di parole
wc -w $(find . -name "*.md") | tail -1

Evidenziazione in diversi linguaggi 

1
2
3
4
5
6
7
8

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """Stima il tempo di lettura a 450 caratteri cinesi al minuto."""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "minuti")
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Ciao mondo Markdown"))
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
1
2
3
4
5
6
7
8

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]
1
2
3
4
5

  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

Nell’angolo in alto a destra di ogni blocco di codice trovi i pulsanti copia, numeri di riga e ritorno a capo; i blocchi con più di 24 righe vengono compressi automaticamente.

6. Tabelle

La sintassi di allineamento è supportata, le intestazioni ordinano con un clic e le tabelle larghe scorrono orizzontalmente.

Funzionalità Motore Dimensione Caricamento
Analisi Markdown markdown-it 505 KB Primo rendering
Evidenziazione della sintassi highlight.js Nel bundle principale Primo rendering
Formule matematiche KaTeX 261 KB Su richiesta
Diagrammi Mermaid 3,3 MB Su richiesta
Ricerca full-text Fuse.js Nel bundle principale Primo rendering
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5
6
7

| Funzionalità | Motore | Dimensione | Caricamento |
|:-------------|:------:|-----------:|:------------|
| Analisi Markdown | markdown-it | 505 KB | Primo rendering |
| Evidenziazione della sintassi | highlight.js | Nel bundle principale | Primo rendering |
| Formule matematiche | KaTeX | 261 KB | Su richiesta |
| Diagrammi | Mermaid | 3,3 MB | Su richiesta |
| Ricerca full-text | Fuse.js | Nel bundle principale | Primo rendering |

Gli allineamenti a sinistra, al centro e a destra derivano rispettivamente da :---, :---: e ---:.

Una tabella con contenuto avanzato

Sintassi Scritta come Risultato
Grassetto **testo** testo
Codice `codice` codice
Formula $a^2+b^2$ $a^2+b^2$
Collegamento [nome](url) nome
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5
6

| Sintassi | Scritta come | Risultato |
|----------|--------------|-----------|
| Grassetto | `**testo**` | **testo** |
| Codice | `` `codice` `` | `codice` |
| Formula | `$a^2+b^2$` | $a^2+b^2$ |
| Collegamento | `[nome](url)` | [nome](https://example.com) |

7. Matematica

Formule in linea

L’equivalenza massa–energia $E = mc^2$ e l’identità di Eulero $e^{i\pi} + 1 = 0$ possono entrambe comparire in una frase. Quando $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Mostra il Markdown Nascondi il Markdown 
1

L’equivalenza massa–energia $E = mc^2$ e l’identità di Eulero $e^{i\pi} + 1 = 0$ possono entrambe comparire in una frase. Quando $n \to \infty$, $\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$.

Formule a blocco

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

Matrici

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

Allineamento multilinea

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

Funzioni a tratti e integrali

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. Diagrammi (Mermaid)

I diagrammi cambiano colore automaticamente con il tema chiaro o scuro; passa il mouse per copiare il sorgente o scaricare l’SVG dall’angolo in alto a destra.

Diagramma di flusso

Diagramma di sequenza

Diagramma delle classi

Diagramma degli stati

Diagramma entità-relazione

Diagramma di Gantt

Grafico a torta

Percorso utente

Mappa mentale

Grafo Git

9. Sezioni comprimibili

Fai clic per espandere: perché il motore dei diagrammi viene caricato su richiesta?

Incluso nel bundle, Mermaid pesa circa 3,3 MB ed è la dipendenza più grande dell’intero progetto. Inserirlo nel bundle principale obbligherebbe ogni lettore a scaricarlo, anche per documenti senza alcun diagramma.

MDViewer divide quindi Mermaid e KaTeX in moduli ES separati e li recupera con un import() dinamico solo quando nella pagina compare effettivamente un blocco di codice mermaid o una formula. Per un documento di solo testo, il primo rendering richiede circa 505 KB.

Fai clic per espandere: quali formati di front matter sono supportati?

Tutti e tre. Il lettore li rileva e li mostra in una scheda comprimibile sotto il titolo del documento:

  • YAML: racchiuso tra ---, il più comune
  • TOML: racchiuso tra +++
  • JSON: racchiuso tra { }

Campi come title, description, date, author e tags vengono spostati nell’intestazione del documento e mostrati separatamente.

Mostra il Markdown Nascondi il Markdown 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<details>
<summary>Fai clic per espandere: perché il motore dei diagrammi viene caricato su richiesta?</summary>

Incluso nel bundle, Mermaid pesa circa 3,3 MB ed è la dipendenza più grande dell’intero progetto. Inserirlo nel bundle principale obbligherebbe ogni lettore a scaricarlo, anche per documenti senza alcun diagramma.

MDViewer divide quindi Mermaid e KaTeX in moduli ES separati e li recupera con un `import()` dinamico solo quando nella pagina compare effettivamente un blocco di codice `mermaid` o una formula. Per un documento di solo testo, il primo rendering richiede circa 505 KB.

</details>

<details>
<summary>Fai clic per espandere: quali formati di front matter sono supportati?</summary>

Tutti e tre. Il lettore li rileva e li mostra in una scheda comprimibile sotto il titolo del documento:

- **YAML**: racchiuso tra `---`, il più comune
- **TOML**: racchiuso tra `+++`
- **JSON**: racchiuso tra `{ }`

Campi come `title`, `description`, `date`, `author` e `tags` vengono spostati nell’intestazione del documento e mostrati separatamente.

</details>

10. Note a piè di pagina

Markdown è stato creato nel 20041 per scrivere testo formattato in file semplici. Oggi la maggior parte degli strumenti segue la specifica CommonMark2, con le estensioni in stile GitHub aggiunte sopra3.

  1. Progettato da John Gruber con Aaron Swartz, con l’obiettivo di ottenere testo leggibile naturalmente anche prima del rendering. ↩︎

  2. Una specifica precisa pubblicata nel 2014 che ha eliminato gran parte dell’ambiguità della descrizione originale. ↩︎

  3. Aggiunge tabelle, elenchi attività, barrato e collegamenti automatici: la sintassi che oggi la maggior parte delle persone si aspetta. ↩︎

Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5

Markdown è stato creato nel 2004[^origin] per scrivere testo formattato in file semplici. Oggi la maggior parte degli strumenti segue la specifica CommonMark[^spec], con le estensioni in stile GitHub aggiunte sopra[^gfm].

[^origin]: Progettato da John Gruber con Aaron Swartz, con l’obiettivo di ottenere testo leggibile naturalmente anche prima del rendering.
[^spec]: Una specifica precisa pubblicata nel 2014 che ha eliminato gran parte dell’ambiguità della descrizione originale.
[^gfm]: Aggiunge tabelle, elenchi attività, barrato e collegamenti automatici: la sintassi che oggi la maggior parte delle persone si aspetta.

11. Immagini

È possibile fare clic sulle immagini per ingrandirle, zoomare con la rotellina e spostarle trascinando. Un’immagine con un titolo viene mostrata con una didascalia centrata.

La vista di lettura a tre colonne di MDViewer
Tre colonne: albero dei file a sinistra, contenuto al centro, indice a destra

12. HTML grezzo

È possibile scrivere HTML direttamente in Markdown e visualizzarlo così com’è:

Componente badge Scritto come HTML grezzo Ctrl + K
Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5
6

<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">Componente badge</span>
  <span class="badge">Scritto come HTML grezzo</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. Escape e caratteri speciali

Escape con barra inversa: *non corsivo*, `non codice`, # non è un titolo.

Entità HTML: © — … → ≤ ≠

Punteggiatura e alfabeti misti: “virgolette”, «titoli di libri», lineette — e puntini di sospensione…

Mostra il Markdown Nascondi il Markdown 
1
2
3
4
5

Escape con barra inversa: \*non corsivo\*, \`non codice\`, \# non è un titolo.

Entità HTML: &copy; &mdash; &hellip; &rarr; &le; &ne;

Punteggiatura e alfabeti misti: “virgolette”, «titoli di libri», lineette — e puntini di sospensione…

Lista di controllo del rendering

Se ogni elemento seguente corrisponde a ciò che vedi, l’intera pipeline di rendering funziona:

  • I titoli hanno ancore e l’indice permette di raggiungerli ed evidenzia la posizione corrente
  • I blocchi di codice hanno colori, etichetta del linguaggio e pulsante di copia
  • Le tabelle hanno bordi e righe evidenziate al passaggio del mouse, e le intestazioni ordinano con un clic
  • Le formule in linea e a blocco appaiono in notazione matematica, non come LaTeX grezzo
  • Tutti e dieci i diagrammi Mermaid appaiono come grafica vettoriale
  • I riquadri informativi appaiono come schede colorate con icone
  • Le note a piè di pagina sono collegate in entrambe le direzioni
  • Le immagini si ingrandiscono con un clic
  • Il passaggio alla modalità scura cambia i colori dei diagrammi
Archiviazione locale essenziale

Conserva in questo browser impostazioni, bozze, elementi recenti e scelta del consenso per fornire le funzioni richieste.

Sempre attiva