Anteprima Markdown con tabelle, attività e immagini
Scrivere una tabella in Markdown a mano porta quasi sempre a una barra verticale di troppo. Questa anteprima Markdown mostra il risultato mentre digiti: a sinistra il sorgente, a destra la pagina già resa. Serve per controllare un README, un changelog o il commento a un ticket prima di incollarlo altrove. Un contatore sopra i pannelli indica parole e caratteri del testo.
Come si scrive una tabella
La prima riga è l’intestazione. Sotto va una riga separatrice di trattini. Qui i due punti decidono l’allineamento: :-- a sinistra, :-: al centro, --: a destra. Le barre esterne sono facoltative. Per inserire una barra dentro una cella scrivi \|. Nelle celle funzionano grassetto, corsivo, codice e link.
Una riga con poche celle viene completata con celle vuote. Le celle oltre l’intestazione vengono scartate. Prima della tabella non serve una riga vuota, può iniziare subito sotto una riga di testo. Una cella però contiene una sola riga di testo in linea. Un elenco o un secondo paragrafo non entrano, e un <br> digitato appare come testo. Una tabella larga scorre in orizzontale dentro l’anteprima.
Sintassi che l’anteprima disegna
La pagina usa la libreria marked in modalità GitHub. Rende titoli dal livello 1 al 6, grassetto, corsivo, ~~barrato~~, codice in linea, blocchi di codice recintati, citazioni, elenchi numerati e puntati, elenchi annidati, elenchi di attività, linee orizzontali, link, immagini e tabelle. Un indirizzo nudo come https://example.com diventa un link senza parentesi. Le caselle degli elenchi di attività non si possono spuntare.
Un a capo nel sorgente resta un a capo nel risultato, mentre una riga vuota apre un nuovo paragrafo. L’etichetta del linguaggio dopo la recinzione, per esempio js, è accettata, ma il codice non ha colori.
Lavorare con i pannelli e il divisore
- Scrivi o incolla Markdown nel pannello "Sorgente Markdown". Il pannello "Anteprima live" si aggiorna a ogni tasto.
- Trascina il divisore tra i pannelli con mouse, dito o penna. Un doppio clic lo riporta a 50/50. Con la tastiera, dai il focus al divisore e premi freccia sinistra o destra (2 per cento), Maiusc con freccia (10 per cento), Home, Fine o Invio (ripristino).
- "Vista ingrandita" riempie lo schermo e conserva la larghezza scelta.
- "Copia HTML" copia il corpo HTML già ripulito. "Salva come HTML" scarica
document.htmlcon un breve foglio di stile che include le tabelle.
La larghezza resta tra il 15 e l’85 per cento e il browser la ricorda su questo dispositivo nell’archivio locale. Sotto i 860 px i pannelli si impilano e il divisore scompare.
HTML grezzo, link e immagini esterne
L’HTML scritto nel sorgente appare come testo e non viene mai eseguito. I link mantengono solo questi destinazioni: http, https, mailto, #àncora e percorsi relativi. Ogni altro link perde la destinazione.
Le immagini esterne non vengono caricate nell’anteprima, perché il browser contatterebbe il sito che le ospita. Al loro posto compare un segnaposto con il testo alternativo. L’interruttore "Carica immagini esterne" le mostra. Le immagini incorporate come data:image/png;base64, (anche JPEG, GIF, WebP e AVIF) si vedono sempre. L’HTML copiato e quello salvato conservano ogni tag immagine con il suo indirizzo.
Cosa manca e dove va il testo
Mancano colori di sintassi, note a piè di pagina, formule, codici emoji come :smile: e front matter. Un blocco tra due righe --- appare come una linea e un titolo. I due pannelli non scorrono insieme.
Le librerie marked e dompurify si caricano all’apertura della pagina. Se il caricamento fallisce, l’anteprima mostra un messaggio. Poi il browser converte il Markdown e non invia nulla; lo puoi verificare nel pannello di rete. Gli appunti vengono usati solo con "Copia HTML", e il file nasce solo con "Salva come HTML".
Domande frequenti (FAQ)
| --- | --- |.