Il pannello di anteprima Markdown in MarkNode può essere personalizzato con temi diversi. Scegli un aspetto integrato, lascia che l’anteprima segua automaticamente il tema dell’applicazione, oppure scrivi il tuo CSS per adattarla alla sede in cui pubblicherai i tuoi documenti.
Seguire il tema dell’applicazione
Per impostazione predefinita l’anteprima è impostata su Match app theme: utilizza lo stile integrato abbinato al tema dell’applicazione corrente, così passando da Paper a Midnight (o a qualsiasi altro tema) l’anteprima cambia colore di conseguenza con una sola azione. Non è necessario scegliere alcun tema di anteprima, a meno che tu non voglia un aspetto diverso dal resto dell’app.
Temi integrati
MarkNode include una serie di temi di anteprima integrati disponibili per tutti gli utenti. Sono di sola lettura e non possono essere modificati, ma puoi sempre copiarne uno come punto di partenza per un tema personalizzato. Oltre agli stili abbinati a ciascun tema dell’applicazione (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), sono disponibili aspetti specifici per sede e atmosfera, come:
- GitHub Light e GitHub Dark — rendering in stile GitHub per la documentazione
- Solarized Light e Solarized Dark — le palette Solarized
- Serif — una colonna serif centrata per la prosa in formato lungo
- Compact — un layout più compatto per materiale di consultazione denso
- Academic, Newsprint, Dracula e altri ancora
I temi integrati derivano i colori di base dello sfondo, del testo, dei collegamenti e dei bordi dal tema dell’applicazione attivo, così appaiono corretti sia in chiaro sia in scuro senza che tu debba riselezionare nulla. (Esiste anche uno stile interno Default su cui si basa Match app theme; nel menu scegli Match app theme anziché Default direttamente.)
Per cambiare tema, fai clic sul pulsante preview style nell’intestazione del pannello di anteprima, oppure fai clic con il tasto destro in un punto qualsiasi dell’anteprima e usa l’elenco degli stili. Scegli Match app theme per tornare a seguire il tema dell’applicazione, oppure scegli uno stile specifico per fissarlo. La modifica viene applicata immediatamente a ogni superficie di anteprima — l’anteprima agganciata accanto all’editor e qualsiasi finestra di anteprima che hai sganciato — e viene ricordata tra una sessione e l’altra.
Creare un tema personalizzato
Dal menu degli stili di anteprima, scegli New style from this… per creare un tema personalizzato basato su quello attualmente attivo:
- Inserisci un nome per il nuovo tema. I nomi non possono coincidere con quelli dei temi integrati.
- Si apre l’editor CSS con il CSS di origine precompilato — modificalo a tuo piacimento.
Mentre digiti, l’anteprima viene ridisegnata in tempo reale. Il CSS viene mantenuto in memoria fino al salvataggio, quindi puoi sperimentare liberamente; se cambi idea, chiudi l’editor per scartare le modifiche.
Per modificare un tema personalizzato che hai già creato, selezionalo e scegli Edit current style… dallo stesso menu.
Salvataggio e condivisione
Quando salvi un tema personalizzato, viene memorizzato nella tua libreria globale dei temi, così è disponibile in tutti i progetti su questa macchina. Puoi anche selezionare Save a copy in the current project per scriverlo nel progetto, il che significa che il tema viaggia insieme al progetto. Se metti il progetto sotto Git, ogni collaboratore che clona il repository vedrà la stessa anteprima.
Quando apri un progetto che contiene un tema di anteprima personalizzato che non possiedi ancora, quel tema compare nel tuo elenco degli stili per tutto il tempo in cui il progetto resta aperto.
Cosa può personalizzare il CSS personalizzato
Il CSS personalizzato ha come ambito il contenitore dell’anteprima (.markdown-preview), quindi non influisce sull’editor, sulla barra laterale o su qualsiasi altra parte di MarkNode. Puoi personalizzare:
- Caratteri e dimensioni del corpo del testo
- Titoli, elenchi, citazioni e tabelle
- Blocchi di codice, codice inline e colori dell’evidenziazione della sintassi
- Spaziatura, padding e larghezza massima del contenuto
Se vuoi che il tuo tema personalizzato si adatti automaticamente al chiaro e allo scuro come fanno quelli integrati, parti duplicando un tema integrato — la tua copia eredita quella base sensibile al tema e da lì puoi effettuare le regolazioni.
Non è possibile ristrutturare pesantemente il DOM, perché il CSS regola solo la presentazione visiva, non l’HTML sottostante.
Eliminare un tema personalizzato
Seleziona un tema personalizzato e usa l’azione di eliminazione nel menu degli stili. Compare prima una conferma. Se il tema che elimini è quello attivo, MarkNode torna al tema integrato predefinito. I temi integrati non hanno l’azione di eliminazione e non possono essere rimossi.