Vai al contenuto principale
LibraTool logoLibraTool

Editor Markdown gratis

Scrivi e visualizza Markdown in tempo reale. Supporta intestazioni, grassetto, corsivo, blocchi di codice, tabelle ed elenchi.

Funziona offline una volta caricato
96 parole · 616 car.
Markdown
Anteprima
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Benvenuto nell'editor Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Scrivi <strong>Markdown</strong> a sinistra, visualizza l'anteprima in tempo reale a destra.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Caratteristiche</h3> <ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Grassetto</strong>, <em>corsivo</em> e <del>barrato</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Codice inline</code> e blocchi di codice delimitati</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Link</a></li><li class="my-0.5">Elenchi, citazioni, tabelle e altro</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Esempio di codice</h3> <pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; }</code></pre> <blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown è stato creato da John Gruber nel 2004 per rendere più facile la scrittura per il web.</blockquote> <table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Caratteristica</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Supportato</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Intestazioni</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Elenchi</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tabelle</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Codice</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Riferimento rapido Markdown
# Heading 1H1
**bold**Grassetto
*italic*Corsivo
`code`Codice inline
- itemElenco puntato
1. itemElenco numerato
> quoteCitazione
[text](url)Collegamento
![alt](url)Immagine
---Divisore

Usi comuni

  • Scrivi Documentazione API in MarkdownRedigi descrizioni di endpoint, esempi di richiesta/risposta e tabelle di parametri in Markdown.
  • Prendi Appunti in MarkdownScrivi appunti strutturati in Markdown che possono essere incollati in Notion, Obsidian, Bear o qualsiasi app Markdown.
  • Scrivi un README su GitHub in MarkdownBozza e anteprima del README del tuo repository GitHub con il rendering live di Markdown.
  • Scrivi Documentazione TecnicaScrivi e visualizza in anteprima documenti API, wiki e guide tecniche in Markdown prima della pubblicazione.
  • Scrivi Post di Blog in MarkdownBozza post di blog in Markdown per Ghost, Jekyll, Hugo, Hashnode e altre piattaforme di pubblicazione basate su Markdown.

Come funziona

L'anteprima viene resa da un parser Markdown scritto a mano integrato direttamente nello strumento — nessun marked, nessun remark, nessuna libreria esterna. Tokenizza la sorgente riga per riga nel browser, convertendo la sintassi in HTML che viene poi passato attraverso un sanitizzatore prima della visualizzazione.

  1. 1
    Tokenizzazione riga per riga
    La funzione personalizzata renderMarkdown divide la tua sorgente sugli a-capo e li attraversa in un singolo passaggio, facendo corrispondere blocchi di codice delimitati, intestazioni (H1–H6), citazioni, elenchi ordinati e non ordinati, tabelle GFM (con allineamento colonne), righe orizzontali, e paragrafi in ordine di priorità.
  2. 2
    Espansione della sintassi inline
    Ogni riga o cella raccolta viene poi elaborata da inlineMarkdown, una catena di sostituzioni regex che gestisce grassetto (** e __), corsivo (* e _), grassetto-corsivo (***), barrato (~~), codice inline (), immagini (![alt](url)), e link ([testo](url)) — le immagini vengono risolte prima dei link così il prefisso ! non viene consumato erroneamente.
  3. 3
    Sanitizzazione e blocco delle risorse remote
    L'HTML grezzo prodotto dal renderer viene passato attraverso un sanitizzatore (sanitize-html) per rimuovere tag e attributi non sicuri come <script>, gestori onerror, e href javascript:. Un secondo passaggio (neutralizeRemote) sostituisce i valori src delle immagini remote con segnaposto per impostazione predefinita, prevenendo che l'anteprima chiami silenziosamente server esterni prima che tu acconsenta.
  4. 4
    Esporta come .md o .html autonomo
    Copiare o scaricare Markdown scrive il testo sorgente grezzo. Scaricare HTML avvolge l'output sanitizzato in un documento autonomo con il proprio foglio di stile inline — le classi Tailwind funzionano solo all'interno del sito, così l'esportazione include regole CSS semplici invece, rendendo il file leggibile ovunque.

Strumenti correlati

📝

Convertitore HTML in Markdown

Converti HTML in Markdown pulito. Gestisce intestazioni, elenchi, link, immagini, blocchi di codice, tabelle e citazioni. Perfetto per spostare contenuti dai CMS.

Prova
🔄

Convertitore Markdown in HTML

Converti Markdown in HTML pulito con anteprima live. Usa la visualizzazione sorgente per copiare HTML pronto per blog, CMS o template email.

Prova
📊

Editor Diagrammi Mermaid

Scrivi diagrammi di flusso, sequenza, Gantt e altro in sintassi Mermaid con anteprima live. Esporta come SVG o PNG. Funziona interamente nel tuo browser.

Prova

Domande frequenti