Markdown → HTML

Markdown convertito in HTML pulito e semantico. Gratis, senza upload. max 1 GB · Fino a 1 GB · Elaborato localmente, mai inviato a un server.

Il Markdown serve a scrivere, l’HTML serve a pubblicare, e da uno all’altro bisogna pur passare. La richiesta nasce quasi sempre da un’esigenza precisa: incollare un articolo in un sistema di pubblicazione che accetta solo HTML, produrre una pagina di documentazione leggibile senza installare un generatore di siti, o controllare che aspetto avrà un file di presentazione prima di metterlo online.

Lo strumento prende il testo digitato nel campo o importato da un file .md, lo affida alla libreria marked e mostra la resa subito sotto. Le uscite proposte sono due: una pagina HTML completa e autosufficiente da scaricare, oppure il solo frammento, copiato negli appunti e pronto da incollare in un modello già esistente.

Un punto va conosciuto prima di cominciare. L’HTML prodotto passa da un filtro, tanto per l’anteprima quanto per il download. Se il tuo Markdown contiene tag HTML scritti a mano, una parte verrà conservata e un’altra tolta. L’elenco esatto compare più sotto, insieme alla variante di Markdown riconosciuta e alle sintassi diffuse che non ne fanno parte.

Come si usa

  1. Digitare o importare il Markdown Scrivi direttamente nel campo, incolla il tuo testo, oppure usa il pulsante di importazione per caricare un file .md o .markdown, il cui contenuto sostituisce quello del campo.
  2. Convertire in HTML Il pulsante scarica marked al primo utilizzo e mostra la resa sotto il campo. Il testo resta modificabile: correggi e riconverti tutte le volte che serve.
  3. Controllare l’anteprima Titoli, elenchi, tabelle e blocchi di codice compaiono esattamente come verranno prodotti. Un titolo rimasto testo semplice segnala un cancelletto non seguito da uno spazio.
  4. Scaricare la pagina completa Il file document.html è autosufficiente: dichiarazione di tipo, codifica UTF-8, attributo di lingua, tag per la visualizzazione su mobile e foglio di stile incorporato. Non richiede nessun file esterno.
  5. Oppure copiare il solo frammento Il secondo pulsante mette negli appunti il contenuto senza intestazione e senza formattazione, cioè la forma che si aspetta la maggior parte dei sistemi di pubblicazione.

La variante di Markdown riconosciuta

marked applica per impostazione predefinita la variante nota come GitHub Flavored Markdown. Oltre alla sintassi di base, cioè titoli, grassetto, corsivo, elenchi annidati, citazioni, collegamenti, immagini e linee orizzontali, hai a disposizione le tabelle con allineamento per colonna, il testo barrato fra doppie tilde, le caselle di spunta degli elenchi di attività e i blocchi di codice delimitati da tre apici inversi. Un indirizzo scritto in chiaro diventa un collegamento. Il linguaggio indicato dopo gli apici inversi finisce come classe sul tag del codice, senza però nessuna colorazione della sintassi.

Tre comportamenti colgono di sorpresa con regolarità. Un a capo singolo non spezza il paragrafo: due righe consecutive vengono unite, a meno che la prima non finisca con due spazi. I titoli vengono prodotti senza identificativo di ancoraggio, per cui un indice scritto a mano non trova nessuno dei suoi bersagli. E infine le note a piè di pagina, gli elenchi di definizioni e i blocchi di metadati in testa al file non sono gestiti; questi ultimi escono come una linea orizzontale seguita da un titolo di secondo livello.

L’HTML che scrivi dentro il tuo Markdown

La sintassi Markdown permette di inserire tag HTML in mezzo al testo, e marked li lascia passare così come sono. Subito dopo interviene un filtro, prima dell’anteprima come prima del download, che toglie sempre gli stessi elementi: script, cornici incorporate, oggetti incorporati, moduli, blocchi noscript e tag di intestazione del documento. Vengono eliminati gli attributi di evento, così come i collegamenti il cui indirizzo comincia per javascript:, data: o vbscript:, con l’unica eccezione delle immagini codificate in base64.

Tutto il resto viene conservato: una tabella scritta a mano, un blocco a scomparsa, gli apici, le abbreviazioni, i contenitori con le loro classi e le tue immagini attraversano la conversione senza danni. Un video incorporato tramite una cornice, invece, sparirà: pubblica l’HTML senza di lui e aggiungi l’incorporamento dopo, dal tuo sistema di pubblicazione.

La pagina scaricata e quello che resta da fare

Il file che ottieni basta a se stesso: porta con sé la propria formattazione, non chiede né caratteri né script esterni e si apre anche senza connessione. La presentazione è sobria: colonna di 760 pixel centrata nella pagina, testo in Georgia, titoli in Helvetica, blocchi di codice su fondo grigio chiaro, tabelle con filetti sottili, immagini riportate alla larghezza del testo.

Restano a tuo carico tre ritocchi. Il titolo del documento vale Document e il file si chiama sempre document.html: aprilo in un editor per cambiare il tag del titolo e per rinominarlo. L’attributo di lingua sull’elemento html è impostato su fr, quindi va portato a it prima della pubblicazione, sia per gli screen reader sia per i motori di ricerca. Le immagini, infine, conservano il percorso che hai scritto: un percorso relativo presuppone che la cartella corrispondente viaggi insieme alla pagina, mentre un indirizzo completo funziona così com’è.

Articolo di blog, documentazione, e quello che lo strumento non fa

Per un articolo di blog usa il pulsante che copia il frammento: la maggior parte dei sistemi di pubblicazione si aspetta il solo contenuto e ci applica il proprio modello, mentre incollarci dentro una pagina completa produrrebbe un documento annidato dentro un altro. Per una nota da consegnare o da archiviare, invece, la pagina completa è la scelta migliore.

Per un sito di documentazione vero e proprio, con la navigazione fra le pagine e un indice generato in automatico, lo strumento adatto resta un generatore di siti statici: qui ogni file si converte per conto suo e niente collega le pagine fra loro. Il testo che digiti non lascia la pagina, e l’unica cosa prelevata è la libreria marked, che il sito serve dai propri file; la cronologia locale registra che una conversione è avvenuta e il numero di parole del testo di partenza.

Domande frequenti

Perché i miei a capo spariscono?

marked segue la regola originale del Markdown, secondo cui un a capo singolo non spezza il paragrafo. Termina la riga con due spazi per forzare l’interruzione, oppure lascia una riga vuota fra le due.

Perché il mio blocco di codice non è colorato?

Il linguaggio indicato dopo gli apici inversi diventa una classe sul tag del codice, ma non viene applicata nessuna colorazione. Aggiungi una libreria di colorazione della sintassi nella pagina finale se il colore ti serve.

Perché il mio video incorporato è sparito?

Le cornici incorporate rientrano fra gli elementi tolti dal filtro, insieme agli script, agli oggetti incorporati e ai moduli. Pubblica l’HTML senza il video, poi aggiungi l’incorporamento dal tuo strumento di pubblicazione.

Perché i collegamenti del mio indice non portano da nessuna parte?

I titoli vengono prodotti senza identificativo di ancoraggio. Metti tu stesso un’ancora in HTML prima di ogni titolo, oppure lascia che sia il tuo sistema di pubblicazione a generare gli identificativi al momento della visualizzazione.

Il mio blocco di metadati finisce dentro la pagina, è normale?

Sì. Un blocco di metadati in testa al file non viene riconosciuto come tale: il tratto che lo apre diventa una linea orizzontale e la riga successiva un titolo di secondo livello. Togli quel blocco prima di convertire.

Posso lavorare su più file .md di seguito?

Ogni importazione sostituisce il contenuto del campo, quindi le conversioni si fanno una alla volta. Dato che il campo resta modificabile, puoi anche incollarci dentro più documenti uno dopo l’altro.

C’è un’anteprima del risultato o devo convertire alla cieca?

C’è, ma non si aggiorna da sola mentre digiti: premi Converti in HTML e la resa compare subito sotto il campo di scrittura, che resta modificabile per correggere e riconvertire tutte le volte che serve. L’anteprima attraversa lo stesso filtro applicato al download, quindi quello che vedi è quello che finisce nel file: se una cornice incorporata sparisce a schermo, sparisce anche nell’HTML scaricato. L’unica differenza da mettere in conto è la colorazione della sintassi nei blocchi di codice, che non c’è né nell’uno né nell’altro.

Posso convertire un file .md senza installare nulla sul computer?

Sì: importa il file .md con il pulsante apposito e premi Converti in HTML, senza generatore di siti, senza Node e senza estensioni da aggiungere. In uscita hai due possibilità, una pagina HTML completa e autosufficiente da scaricare, che si apre anche senza connessione, oppure il solo frammento copiato negli appunti per un modello già esistente. Tieni presente che la pagina scaricata si chiama sempre document.html e porta un titolo generico: rinominala e cambia il tag del titolo in un editor prima di pubblicarla.

Il testo che incollo viene inviato da qualche parte?

No, il Markdown non lascia la pagina: la conversione la esegue la libreria marked, che il sito serve dai propri file, e nessun contenuto viene trasmesso. Non c’è account né limite di caratteri, e nella cronologia locale resta soltanto la traccia che una conversione è avvenuta, con il numero di parole del testo di partenza.

Strumenti simili

Scopri altri strumenti

Categorie