Anteprima Markdown

Cos'è Markdown?

Markdown è un linguaggio di markup leggero creato da John Gruber nel 2004. Utilizza simboli di formattazione in testo semplice come asterischi, cancelletti e trattini per indicare la struttura: intestazioni, grassetto, corsivo, elenchi, link e blocchi di codice. Un'anteprima Markdown renderizza quel testo semplice in HTML formattato, così puoi vedere esattamente come apparirà il documento finale prima della pubblicazione. La specifica originale di Markdown è descritta nella documentazione Daring Fireball di Gruber, e il formato è stato poi formalizzato come CommonMark.

Markdown è diventato il formato di scrittura predefinito per la documentazione degli sviluppatori, i file README, i generatori di siti statici (Jekyll, Hugo, Astro), i wiki e le knowledge base. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit e Notion supportano tutti Markdown in modo nativo. Poiché il sorgente è testo semplice, i file Markdown si gestiscono facilmente con Git per il controllo versione, possono essere confrontati tra branch e uniti senza conflitti nelle sezioni non sovrapposte di un file.

Uno strumento di anteprima Markdown analizza il tuo input e lo converte in HTML in tempo reale. Questo ti permette di individuare errori di formattazione, link interrotti e annidamenti imprevisti prima di eseguire il commit di un file o pubblicare una pagina. Questa anteprima funziona interamente nel browser senza round-trip al server, così puoi lavorare su documentazione privata o sensibile senza trasmettere contenuti sulla rete.

Perché Usare un'Anteprima Markdown Online?

Scrivere Markdown in un editor semplice senza anteprima significa indovinare l'output. Un'anteprima in tempo reale chiude istantaneamente questo ciclo di feedback.

Casi d'Uso dell'Anteprima Markdown

Riferimento alla Sintassi Markdown

La tabella seguente mappa la sintassi Markdown più comune al suo risultato renderizzato e all'elemento HTML corrispondente. Copre la base CommonMark che praticamente ogni parser Markdown supporta.

Confronto dei Flavour Markdown

Diverse piattaforme estendono la specifica Markdown originale con funzionalità aggiuntive. Sapere quale flavour stai prendendo di mira ti aiuta a evitare sintassi che fallisce silenziosamente in un altro renderer.

Esempi di Codice: Renderizzare Markdown Programmaticamente

Quando devi renderizzare Markdown all'interno di un'applicazione invece di uno strumento browser, usa una di queste librerie. Ogni esempio converte una stringa Markdown in una stringa HTML.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Domande Frequenti