Diapositive Markdown

Perché usare Markdown per le slide?

PowerPoint e Keynote sono eccellenti nel design delle slide e pessimi in quasi tutto il resto. Sono difficili da gestire con il controllo versione, difficili da confrontare con diff, difficili da modificare su un telefono, difficili da mantenere coerenti in un team e impossibili da cercare con grep. Markdown risolve il problema del «tutto il resto» senza cercare di competere sul design visivo, ed è più veloce da scrivere rispetto a qualsiasi strumento GUI per contenuti tecnici (esempi di codice, output di terminale, procedure da riga di comando, elenchi di punti elenco).

Il formato è testo semplice, quindi vive nativamente in git, si apre in qualsiasi editor, si modifica in qualsiasi strumento da VS Code a vim a un'app per note del telefono e sopravvive a 30 anni di cambi tecnologici. Il compromesso: si rinuncia al controllo del design pixel-perfect. Per riunioni generali di sviluppatori, talk di conferenze, deck di presentazione di README, materiale didattico e lightning talk, è un ottimo compromesso. Per pitch commerciali e deck di marketing, PowerPoint o Figma probabilmente vince ancora.

La convenzione ---

Tre trattini su una riga da soli sono la sintassi Markdown esistente per una riga orizzontale, definita in CommonMark e riutilizzata come separatore di slide in tutto l'ecosistema Markdown-slides: reveal.js, Marp, Slidev e la maggior parte degli strumenti minori la usano tutti. La convenzione è inequivocabile (una vera riga orizzontale funziona ancora all'interno di una singola slide; --- separa solo quando si trova su una riga da sola) ed è facile da digitare. Si scrive il deck come un unico documento Markdown continuo e lo strumento lo risegmenta visivamente.

L'ecosistema Markdown-Slides nel 2026

• reveal.js (Hakim El Hattab, dal 2011), la libreria di presentazione basata su browser pionieristica. Griglie di slide verticali e orizzontali, transizioni, note del relatore (sintassi Notes:), sorgente Markdown tramite l'attributo data-markdown. Il nome di riferimento; slides.com lo ospita come SaaS.
• Marp: il progetto Markdown-to-slides dedicato più popolare. Basato su CommonMark, include una CLI, un'estensione VS Code e Marp Core. Ottima esportazione PDF. Frontmatter per tema e rapporto d'aspetto.
• Slidev (Anthony Fu), più recente (2021), basato su Vue, moderno. Progettato per i talk degli sviluppatori: evidenziazione del codice integrata, incorporamento di codice nelle slide, vista presentatore, disegno sulle slide durante il talk.
• remark.js (Ole Petter Bang), minimale, incorporabile in un singolo file. Apprezzato per la sua neutralità.
• HackMD: variante con modifica collaborativa. Basato su browser, richiede un account, si sincronizza tra i dispositivi.

Questo strumento occupa una nicchia diversa: nessuna installazione, nessun account, nessun caricamento. Incollare, presentare, chiudere la scheda. È la scelta giusta quando si prepara un lightning talk da 5 minuti su un laptop in prestito, si finalizzano le slide su un volo o si bozza in una sala riunioni senza voler avviare Marp o accedere a slides.com.

Rapporti d'aspetto spiegati

I deck di slide moderni sono 16:9 per impostazione predefinita, ogni proiettore da conferenza costruito nell'ultimo decennio è una superficie 16:9 e 16:9 corrisponde a ogni schermo di laptop e TV moderna. Il viewport qui si renderizza in 16:9 per corrispondere. I deck più vecchi usano il 4:3 (il rapporto originale di un proiettore CRT); i laptop più vecchi a volte vengono forniti in 16:10. Il valore predefinito di PowerPoint è 16:9 dalla versione 2013; Google Slides predefinisce 16:9 alla creazione; anche il valore predefinito di Keynote è 16:9.

Casi d'uso comuni

• Riunioni generali di sviluppatori e demo day. Guidare un team attraverso una modifica al codice, una nuova architettura o una retrospettiva di un incidente.
• Talk di conferenze e meet-up. In particolare talk per un pubblico tecnico in cui il deck ha bisogno di esempi di codice che si confrontano in modo pulito nelle pull request.
• Presentazioni di README. Un'intro di 6 slide a una libreria, incorporata nella documentazione del progetto.
• Lightning talk. Talk da 5 minuti, ~5 slide, in cui il formalismo è il nemico.
• Materiale didattico. Modificare le slide in tempo reale mentre si insegna; gli studenti possono copiare il sorgente Markdown per i loro appunti.
• Formazione interna. Deck di onboarding versionati e sottoposti a code review insieme al codice che insegnano.
• Briefing pre-meeting. Pre-letture da 3 slide inviate come Markdown che il destinatario può visualizzare in anteprima nel proprio editor.

Principi di design delle slide che contano anche in Markdown

• Un'idea per slide. La regola classica. Se una slide contiene due pensieri, dividerla.
• Meno testo, più struttura. Se una slide si legge come un paragrafo, il relatore sta leggendo la slide. Ridurre a punti elenco e lasciare che il relatore integri la prosa.
• Font più grandi di quanto si pensi. Le slide Markdown usano per impostazione predefinita un testo principale intorno ai 24-32 px equivalenti. Qualsiasi cosa al di sotto di ~18 px è illeggibile dal fondo di una sala conferenze.
• Un H1 per slide. Più intestazioni di primo livello sulla stessa slide crea confusione visiva.
• Mantenere i blocchi di codice brevi. Sei righe è circa il massimo confortevole su una slide 16:9. Gli snippet più lunghi devono essere divisi o mostrati evidenziati in blocchi.
• Far guadagnare il proprio posto a ogni immagine. Le foto stock come decorazione sono riempitivo. I diagrammi, gli screenshot e le visualizzazioni di dati sono segnale.

Privacy

I deck di slide sono spesso riservati: pitch deck, strategie interne, dati finanziari, demo di prodotto pre-lancio. Questo strumento funziona interamente nel browser: il Markdown rimane nella textarea, il rendering avviene localmente e la presentazione a schermo intero legge dallo stesso stato in memoria. Nulla viene caricato, non è richiesto alcun account e la chiusura della scheda cancella tutto. Le alternative ospitate su server (slides.com, HackMD, GitPitch) richiedono fiducia nelle politiche di gestione dei dati dell'operatore; questo strumento elimina completamente la domanda.

Errori comuni

1. Incollare interi paragrafi su una slide. Se il pubblico li legge, non sta ascoltando il relatore. Dividere in punti elenco.
2. Livelli di intestazione incoerenti. Una slide intitolata con H1, la successiva con H2, ha un aspetto sciatto. Scegliere un livello per i titoli delle slide e rispettarlo.
3. Blocchi di codice troppo lunghi per il proiettore. Uno snippet da 30 righe è illeggibile dall'ultima fila. Mostrare solo le 5-10 righe rilevanti, con il resto sostituito da // ....
4. Assenza di note del relatore. Le slide sono l'aiuto mnemonico del pubblico, non del relatore. Le note del relatore (negli strumenti che le supportano) contengono i punti da esporre.
5. Dimenticare il rapporto d'aspetto del proiettore. Se si crea il deck su un laptop 16:10 e la sede usa un proiettore 4:3, il contenuto viene ritagliato.
6. Troppe transizioni tra slide. Le animazioni tra le slide sembrano eleganti in una demo e noiose durante un talk da 30 minuti. Impostare di default nessuna transizione o una semplice dissolvenza.
7. Usare un font elaborato che si rompe sulla macchina della sede. Attenersi ai font di sistema: sans-serif per il testo, monospace per il codice.

Altre domande frequenti

Posso esportare le slide come PDF?

Sì, entrare in modalità schermo intero, quindi usare la funzione Stampa del browser (Ctrl/Cmd + P) e scegliere Salva come PDF. La maggior parte dei browser stampa le slide renderizzate una per pagina PDF. Il risultato è un PDF di testo pulito (non un'immagine), quindi è piccolo e ricercabile.

Cosa succede con l'evidenziazione della sintassi del codice?

I blocchi di codice delimitati si renderizzano con monospace e un leggero sfondo scuro, il che li rende leggibili sul tema a schermo intero scuro. L'evidenziazione della sintassi per linguaggio (parole chiave Python in un colore, stringhe in un altro) richiede un framework di slide più elaborato come reveal.js o Slidev. Per un rapido lightning talk raramente viene notata la mancanza; per talk lunghi ricchi di codice, quegli strumenti sono più adatti.

Come incorporo un'immagine?

Sintassi immagine Markdown standard: ![alt text](https://your-image-url.png). L'immagine deve essere raggiungibile dal web pubblico (o dalla macchina locale tramite un URL file://, ma gli URL di file potrebbero essere bloccati da alcuni browser). Per le immagini sensibili, usare la sintassi di link Markdown verso un file locale servito da un piccolo server web locale durante il talk.

Funzionerà offline?

Una volta caricata la pagina, sì, il rendering Markdown e la navigazione delle slide funzionano localmente. Le immagini esterne non si caricheranno senza rete, quindi incorporare le immagini come data URI o ospitarle localmente se si presenterà offline.

Posso usare la tastiera durante il talk?

Sì, i tasti freccia / la barra spaziatrice avanzano, backspace torna indietro, Escape esce dalla modalità schermo intero, F attiva/disattiva la modalità schermo intero. La maggior parte dei telecomandi da presentazione (il presentatore wireless Logitech standard, ecc.) emulano gli stessi tasti freccia, quindi funzionano senza configurazione.

Viene inviato qualcosa a un server?

No. Il rendering Markdown, la segmentazione delle slide e la presentazione a schermo intero avvengono tutti nel browser. Il contenuto del deck non viene caricato, registrato o archiviato da nessuna parte lato server. La chiusura della scheda cancella il contenuto della textarea.