Stili

Uno stile decide l’intero aspetto dell’anteprima: tipografia, colori, spaziature, stile del codice e dei riquadri. PeepMD include una serie di stili integrati, tra cui GitHub, quello predefinito con cui viene reso questo manuale, e puoi aggiungere i tuoi.

Cambiare stile

Fai clic o tocca il nome dello stile a destra della barra di stato, oppure nell’ornamento in basso a destra della finestra su Vision Pro. Sul Mac e su iPad un menu elenca tutti gli stili; scegline uno e l’anteprima cambia stile, con la posizione di scorrimento intatta. Su iPhone non c’è spazio per un menu, quindi il nome apre le Impostazioni sul pannello Tema. La scelta resta tra un avvio e l’altro e vale per ogni documento che apri.

Temi del codice

Uno stile porta i propri colori per i blocchi di codice. Un tema del codice li sostituisce: lo sfondo e il testo del blocco, e i colori di parole chiave, stringhe, numeri, nomi e commenti, sopra lo stile attivo. Ce ne sono otto integrati. GitHub, One, Solarized e Xcode seguono la modalità chiara e quella scura. Reading, Nord, Monokai e Dracula sono blocchi scuri su qualsiasi pagina.

Scegline uno in Codice in Impostazioni → Tema, il pannello Tema delle Impostazioni su iPad, iPhone e Vision Pro. Segui lo stile è l’impostazione predefinita: i colori dello stile stesso. Il tema accompagna il documento nelle esportazioni PDF e HTML e nell’e-mail.

Aggiungere i tuoi stili

Sul Mac, apri Impostazioni → Tema con ⌘,, con l’ingranaggio a sinistra della barra di stato o con Gestisci stili… nel menu della barra di stato. Gli stili integrati e quelli personalizzati stanno in due elenchi, uno sopra l’altro:

• Importa… copia file .css nella cartella degli stili, oppure trascina tu i file nella cartella (Apri cartella degli stili ti porta lì). Ogni file compare nell’elenco con il suo nome.
• Rimuovi sposta nel Cestino lo stile personalizzato selezionato. Gli stili integrati non si possono rimuovere, quindi il pulsante è attivo solo per l’elenco in basso.
• Fai clic su una riga in uno dei due elenchi per rendere attivo quello stile.

Su iPad e iPhone, tocca l’ingranaggio nella barra di stato mobile e scegli Tema; su Vision Pro è l’ingranaggio nell’ornamento sotto la finestra. Gli stili integrati e quelli personalizzati sono elencati sotto le rispettive intestazioni; toccane uno per usarlo, Importa stile… porta dentro un file .css da File, e uno scorrimento su uno stile personalizzato lo elimina.

Scrivere uno stile

Un foglio di stile è una sostituzione completa, non una correzione. Il documento reso è racchiuso in:

<article class="markdown-body">
  …il tuo documento…
</article>

quindi punta a .markdown-body come fa il foglio di stile di GitHub. Il punto di partenza pratico è una copia di uno stile integrato, sfoltita e rimodellata a piacere. Sul Mac si trovano dentro l’app stessa, in PeepMD.app/Contents/Resources/GitHub.css. Uno stile vede lo stesso HTML che produce ogni documento: le intestazioni hanno id di ancoraggio, i riquadri sono blocchi .markdown-alert, i segni critic hanno la classe .critic, i blocchi di codice hanno classi language-*.

Gli stili valgono per singolo dispositivo. Scriverne uno è un lavoro da Mac, e il file .css finito si può inviare a un iPad e importare lì.

Le modifiche a uno stile fatte su disco valgono dal rendering successivo: salva il CSS, poi ⌘R nell’anteprima (trascina verso il basso per aggiornare su iPad e iPhone).

Modalità chiara e scura

L’anteprima segue l’aspetto con cui funziona PeepMD, cioè quello del sistema o quello che hai impostato in Impostazioni → Aspetto, e il tuo foglio di stile decide come rispondere. Ci sono due strategie:

Adattarsi. Definisci normalmente i colori chiari, poi sovrascrivili in una media query, e dichiara entrambi gli schemi perché barre di scorrimento e controlli di WebKit si adeguino:

:root { color-scheme: light dark; }

.markdown-body {
  color: #1f2328;
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...e link, sfondi del codice, bordi... */
}

Scegliere un solo aspetto. Uno stile con un’identità forte, come carta color crema o carta di giornale, può restare se stesso in modalità scura, purché lo dichiari e dipinga il proprio sfondo:

:root { color-scheme: light; }
html { background-color: #ffffff; }

Senza una delle due, uno stile solo chiaro su una finestra scura rende testo scuro su sfondo scuro. Il GitHub.css integrato è un esempio completo della strategia adattiva, con l’intera tavolozza definita due volte come variabili CSS.

Usare variabili CSS per ogni colore, come fa GitHub.css, riduce la sovrascrittura per il tema scuro a un solo piccolo blocco invece di un secondo foglio di stile.

---

Precedente: Esportare e condividere · Successivo: Impostazioni