in Ide & Tools, Informatica |

Marp – Cheatsheet

Nella scrittura di slide utilizzando Marp, ho isolato un pò di funzionalità che si rivelano sicurmente molto utili. Si può considerare una cheatsheet, utilizzabile al bisogno.

Direttive Globali (Frontmatter)

Le direttive globali vanno inserite all’inizio del documento, racchiuse tra ---. Influenzano l’intera presentazione.

---
marp: true
theme: default       # default, gaia, uncover
size: 16:9           # 16:9, 4:3
style: |
  section {
    font-family: 'Helvetica';
  }
---

Direttive Locali vs Globali

Le direttive contrassegnate con _ (es. _class) si applicano solo alla slide corrente. Senza l’underscore, si applicano a quella slide e a tutte le successive.

Gestione delle Slide

Comando / SintassiDescrizione
---Separatore di slide. Crea una nuova diapositiva.
<!-- _class: lead -->Centra il contenuto (utile per la copertina nei temi default e gaia).
<!-- _class: invert -->Inverte i colori dello sfondo e del testo per la slide corrente.
<!-- paginate: true -->Attiva i numeri di pagina da questa slide in poi (_paginate per una sola).
<!-- footer: "Mio Testo" -->Aggiunge un testo a piè di pagina.
<!-- header: "Mio Titolo" -->Aggiunge un’intestazione fissa in alto.
<!-- _backgroundColor: #f0f0f0 -->Cambia il colore di sfondo della singola slide.
<!-- _color: red -->Cambia il colore del testo della singola slide.

Animazioni e Contenuti Avanzati

1. Elenchi Animati (Frammentati)

Per fare apparire i punti di un elenco uno alla volta durante la presentazione, usa il prefisso * invece del classico pallino.

<!-- I punti appariranno uno alla volta al clic -->
* Primo concetto importante
* Secondo concetto chiave
* Terzo dettaglio

2. Immagini e Direttive Estese

Marp estende la sintassi Markdown per permetterti di ridimensionare e posizionare le immagini.

<!-- Ridimensionamento (Width / Height) -->
![width:200px](immagine.png)
![height:50%] (immagine.png)

<!-- Filtri CSS automatici -->
![blur:5px brightness:1.5](immagine.png)

<!-- Immagine di sfondo (copre l'intera slide) -->
![bg](sfondo.jpg)

<!-- Immagine di sfondo posizionata a destra/sinistra (Split Layout) -->
![bg right:40%](grafico.png)

3. Layout Multi-Colonna (Sfruttando il Background Split)

Se usi bg right o bg left, Marp divide automaticamente la slide in due parti: una per l’immagine e una per il testo Markdown.

---
### Layout a due colonne

Questo testo apparirà a sinistra.

![bg right:50%](immagine_a_destra.png)

Formattazione Standard Supportata

Blocchi di Codice (con Syntax Highlighting)

C#

public class Program
{
    public static void Main() => Console.WriteLine("Hello Marp!");
}

Note del Relatore (Presenter Notes)

Tutto ciò che inserisci nei commenti standard HTML (senza direttive) verrà visualizzato solo nella finestra del relatore durante la presentazione.

### Slide Visibile

<!-- 
NOTE PER ME: 
Ricordarsi di menzionare le performance di questo approccio.
-->

Consigli per l’uso in Obsidian

  • Assicurarsi che l’estensione Marp (o il plugin della community) riconosca la direttiva marp: true in cima al file per abilitare l’anteprima live.
  • Se si utilizzano stili CSS personalizzati complessi, puoi isolarli in un file .css esterno e richiamarlo nel frontmatter tramite theme: ./mio-tema.css.