SuperDevTools

Editor Markdown online con anteprima

Anteprima

Scorciatoie: Ctrl+B grassetto, Ctrl+I corsivo, Ctrl+K link (Cmd su Mac). Non viene inviato nulla: il testo resta nel tuo browser, con una bozza salvata su questo dispositivo.

Un editor Markdown online con anteprima immediata

Questo editor Markdown online mostra il testo a sinistra e il risultato a destra, aggiornato mentre scrivi. Sullo smartphone le due zone si impilano e due schede, «Scrivi» e «Anteprima», permettono di passare dall'una all'altra. Serve anche per convertire Markdown in HTML: il codice si copia con un clic o si scarica come pagina web completa.

Tutto avviene nel browser. Il testo non viene inviato da nessuna parte e una bozza resta salvata sul tuo dispositivo: se chiudi la scheda, ritrovi il documento alla visita successiva.

Che cos'è il Markdown?

Il Markdown è un modo di formattare il testo con i normali caratteri della tastiera. Un cancelletto davanti a una riga la trasforma in titolo, due asterischi attorno a una parola la mettono in grassetto. Il file resta leggibile così com'è e poi si converte in HTML per il web. L'estensione abituale è .md.

La sintassi essenziale

ScriviOttieni
# Titolo, ## SottotitoloTitoli di livello 1 e 2 (fino a sei cancelletti)
**grassetto**Testo in grassetto
*corsivo* o _corsivo_Testo in corsivo
[testo](https://esempio.it)Link
![didascalia](foto.jpg)Immagine
- voceElenco puntato
1. voceElenco numerato
> citazioneBlocco di citazione
`codice`Codice nella frase
``` sulla riga prima e su quella dopoBlocco di codice
--- da solo su una rigaLinea orizzontale
\*Un asterisco mostrato così com'è

Una riga vuota separa due paragrafi. Gli elenchi si annidano rientrando le voci di due o tre spazi.

Le estensioni più diffuse

  • Tabelle: colonne separate da | e una riga di trattini sotto l'intestazione. :--- allinea a sinistra, :---: centra, ---: allinea a destra, comodo per una colonna di importi come 85,40 €.
  • Caselle di spunta: - [ ] Latte dà una casella vuota, - [x] Pane una spuntata.
  • Testo barrato: ~~vecchio prezzo~~.
  • Link automatici: un indirizzo che inizia con https:// o www. diventa un link senza aggiungere altro.

Come si usa

  1. Scrivi o incolla il testo in «Testo Markdown», oppure clicca su «Apri un file .md». Puoi anche trascinare un file nella zona di testo.
  2. Formatta con la barra degli strumenti: grassetto, corsivo, titolo, link, elenco, codice, tabella e citazione. Scorciatoie: Ctrl+B, Ctrl+I e Ctrl+K (Cmd su Mac).
  3. Il pulsante «Indice» elenca i titoli; un clic porta alla sezione e «Inserisci nel testo» aggiunge un indice con i relativi collegamenti.
  4. Esporta con «Copia l'HTML», «Scarica .html» (una pagina completa con uno stile semplice) o «Scarica .md».

Sotto l'editor, un contatore mostra le parole e il tempo di lettura, calcolato su 230 parole al minuto: un articolo di 920 parole richiede 4 min di lettura, una tesina di 1.000 parole 5 min. Lo scorrimento sincronizzato porta l'anteprima all'altezza approssimativa del punto che stai modificando.

A cosa serve il Markdown

Si usa per la documentazione tecnica e per i file README che accompagnano un programma, per prendere appunti, scrivere messaggi nei forum e nelle app di messaggistica che lo supportano e preparare articoli di blog. Un verbale di riunione, gli appunti per la maturità o la lista delle cose da fare della settimana si scrivono in fretta senza staccare le mani dalla tastiera.

Convertire Markdown in HTML in sicurezza

La conversione segue CommonMark, la specifica di riferimento del Markdown, con le estensioni indicate sopra. L'HTML grezzo scritto nel testo non viene interpretato per impostazione predefinita: compare come testo. Spuntando «Mostra l'HTML grezzo (ripulito)», i tag più comuni vengono resi, ma un filtro elimina sempre gli script, gli attributi come onclick o onerror e i link javascript:. L'HTML che copi o scarichi è quello dell'anteprima, già ripulito.

Domande frequenti

Il mio testo viene inviato a un server?

No. La conversione avviene nel browser e la bozza resta sul tuo dispositivo. Se cancelli i dati del browser, la bozza sparisce: scarica il file .md per conservarla.

Perché non vedo il mio a capo?

Nel Markdown un semplice a capo viene unito al paragrafo. Lascia una riga vuota per un nuovo paragrafo, oppure termina la riga con due spazi per andare a capo.

Posso incollare l'HTML nel mio sito?

Sì. «Copia l'HTML» fornisce solo il contenuto, pronto per un modello o un editor di pagine. «Scarica .html» crea una pagina autonoma che si apre in qualsiasi browser.

Perché le mie immagini non compaiono?

Un'immagine con un percorso relativo, come foto.jpg, non esiste in questa pagina. Usa il suo indirizzo completo con https:// per vederla nell'anteprima.