Visualizzatore Markdown

Scrivi a sinistra, guarda l’HTML renderizzato a destra. Il visualizzatore parla Markdown in stile GitHub: tabelle, elenchi di attività, blocchi di codice racchiusi con evidenziazione della sintassi, barrato, URL autolinkati e HTML inline. Utile per redigere un README prima di effettuare un commit, controllare come apparirà un commento in una PR, o semplicemente per imparare la sintassi Markdown osservando ogni pressione di tasto.

Come usare il visualizzatore

  1. 1

    Scrivi Markdown

    Il pannello sinistro accetta Markdown grezzo. Ogni modifica aggiorna istantaneamente il pannello destro.

  2. 2

    Guarda l'anteprima HTML

    Il pannello destro mostra l'output renderizzato stilizzato come GitHub.

  3. 3

    Attiva/disattiva modalità

    Visualizzazione affiancata, solo anteprima o solo sorgente per una scrittura senza distrazioni.

  4. 4

    Copia l'HTML

    Copia l'HTML renderizzato se hai bisogno di incollarlo in un client email o CMS.

Cosa supporta questo visualizzatore

  • CommonMark: intestazioni, paragrafi, enfasi, elenchi, citazioni, blocchi di codice, link, immagini, regole orizzontali.
  • Estensioni GFM: tabelle con allineamento delle colonne, elenchi di attività (- [ ] e - [x]), barrato con ~~, URL autolinkati e blocchi di codice racchiusi con suggerimenti di linguaggio.
  • Evidenziazione della sintassi: oltre 100 linguaggi tramite highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, ecc.
  • HTML grezzo: l’HTML inline viene passato (sanitizzato per sicurezza).
  • Matematica (opzionale): $...$ inline e $$...$$ blocco se abiliti l’estensione matematica.

Non supportato

  • Collegamenti wiki in stile Obsidian personalizzati ([[Pagina]]), sono solo per Obsidian.
  • Divs racchiusi di Pandoc (:::), solo per Pandoc.
  • Include lato server o tag di template {% ... %}.

Usi tipici

  • Redigi un README al di fuori dell’IDE e incolla la versione finale.
  • Controlla la formattazione dei commenti PR prima di pubblicare, la casella dei commenti di GitHub non visualizza correttamente i blocchi di codice.
  • Converti appunti in HTML quando hai bisogno di incollare contenuti stilizzati in email o in un CMS che accetta HTML grezzo.
  • Insegna Markdown, la visualizzazione affiancata rende la sintassi ovvia.

Prestazioni

Il rendering utilizza un parser Markdown-it con il plugin GFM, funzionando interamente nel browser. Documenti di alcune centinaia di KB vengono renderizzati in millisecondi; quelli molto grandi (un intero libro in un singolo file) potrebbero rallentare mentre digiti, dividili in capitoli se ciò accade.

Esportazione

  • Copia HTML ti fornisce il <div> con il contenuto renderizzato, incluse le classi stilizzate.
  • Scarica .md salva la sorgente.
  • Stampa in PDF dal dialogo di stampa del tuo browser produce una copia PDF stilizzata della visualizzazione renderizzata.

Domande frequenti

GitHub applica il proprio CSS sopra il GFM. L’output HTML dovrebbe corrispondere; lo stile (font, spaziatura) è loro. Per una parità esatta, usa l’interruttore del tema “renderizzato su GitHub”.

Sì, se abiliti l’estensione matematica, inline $...$ e blocco $$...$$ vengono renderizzati con KaTeX. È disattivato per impostazione predefinita per mantenere basso il peso della pagina.

È sanitizzato, i tag sicuri come <div>, <span>, <table>, <img> passano; <script> e gestori di eventi inline vengono rimossi.

Centinaia di KB funzionano senza problemi. Per file molto grandi, disattiva il rendering live e rendi su richiesta.

Il rendering è completamente lato client. Il contenuto non viene inviato da nessuna parte. Se aggiorni la pagina, i draft vengono persi a meno che il browser non preservi lo stato del modulo.

Strumenti correlati

Strumento disponibile in altre lingue