Personalizzare lo Stile delle Slide con Pandoc e Reveal.js
Le presentazioni generate con Pandoc e reveal.js hanno uno stile moderno e
professionale, basato sul tema predefinito di reveal.js. Negli articoli
Creare Slides in Markdown Usando Pandoc e Reveal.js su
Linux
e Creare Slides in Markdown Usando Pandoc, Reveal.js e
Docker
abbiamo mostrato come generare presentazioni utilizzando Markdown e
configurando opportunamente il proprio ambiente di lavoro.
Questo articolo vuole mostrarti alcune opzioni di personalizzazione offerte
da reveal.js, che puoi sfruttare per adattare lo stile delle tue
presentazioni alle tue esigenze.
Personalizzare stile predefinito
reveal.js ha uno stile predefinito che si contraddistingue per:
- Titoli grandi: I titoli delle presentazioni sono resi con un carattere grande e ben visibile.
- Layout pulito: Le presentazioni hanno un design minimalista e pulito, con molto spazio bianco per una facile leggibilità.
- Transizioni fluide: Le presentazioni cambiano con transizioni fluide e accattivanti.
- Supporto per multimedia: le presentazioni possono includere immagini, video, codice e altro contenuto multimediale.
Hai la possibilità di mantenere tutte queste peculiarità con uno stile diverso sia nei font che nelle colorazioni. Puoi personalizzare lo stile delle tue presentazioni in diversi modi.
Temi Predefiniti di reveal.js
reveal.js include vari temi predefiniti che puoi applicare utilizzando
l'opzione -V theme=THEME_NAME in Pandoc.
Ecco alcuni temi disponibili:
blackwhiteleaguebeigeskynightserifsimplesolarized
Ad esempio, per utilizzare il tema night:
pandoc -t revealjs -s -o slides.html slides.md -V revealjs-url=PATH_TO_REVEALJS -V theme=night
CSS Personalizzato
Un'altra alternativa per personalizzare l'aspetto delle tue presentazioni è
tramite l'utilizzo di CSS personalizzati.
Puoi creare un file CSS personalizzato ed applicarlo alle tue presentazioni.
Supponiamo di creare il seguente file, denominato custom.css.
.reveal .slides {
background-color: #f0f0f0;
color: #333;
}
.reveal .slides h1 {
color: #ff5722;
}
Per applicare le regole CSS descritte, usa l'opzione -V css=custom.css, come segue:
pandoc -t revealjs -s -o slides.html slides.md -V revealjs-url=PATH_TO_REVEALJS -V css=custom.css
Esempio Completo con Tema e CSS Personalizzato
Facciamo un esempio completo di generazione di una presentazione che utilizzi
il tema night e aggiunga qualche stile personalizzato.
Creazione file presentazione slides.md
Per prima cosa, crea il file di presentazione slides.md.
# Titolo della Presentazione
## Slide 1
Contenuto della prima slide.
---
## Slide 2
Contenuto della seconda slide.
---
## Slide 3
Contenuto della terza slide.
Creazione CSS personalizzato
In secondo luogo, crea il custom.css con le personalizzazioni da apportare.
.reveal .slides {
background-color: #202020;
color: #ccc;
}
.reveal .slides h1 {
color: #ff5722;
}
Generazione della presentazione
Come ultima attività, crea la presentazione slides.html che abbia come stile
night ed applichi le regole CSS contenute in custom.css.
Per eseguire la conversione, lancia il seguente comando:
pandoc -t revealjs -s -o slides.html slides.md -V revealjs-url=PATH_TO_REVEAL -V theme=night -V css=custom.css
Visualizzazione della presentazione
Per vedere la presentazione prodotto, apri il file generato slides.html con
un qualsiasi browser.
Conclusione
Utilizzando Pandoc e reveal.js, puoi generare presentazini moderne e
personalizzabili direttamente da Markdown. Con la capacità di applicare temi e
CSS personalizzati, hai il controllo completo sull'aspetto delle tue
presentazioni, garantendo che siano professionali e visivamente accattivanti.
