Aggiungere CSS all'anteprima dell'editor

[FroggyC]

Continuando la discussione da Elenchi ordinati con marcatori non numerici:

Citazioni dall’altro thread per contesto.

@Falco

Aggiungi un wrapper a quegli elenchi e un po’ di CSS

Nei post usa:

[wrap="letterlist"]
1. è il primo
2. è il secondo.
3. è il terzo
[/wrap]

Nel tuo tema aggiungi:

.cooked div[data-wrap="letterlist"]
  list-style: upper-alpha;
}

@FroggyC

Ho provato a usare questa soluzione e funziona, correggendo il CSS nel seguente modo (alla prima riga mancava un ol {):

.cooked div[data-wrap="letterlist"] ol {
  list-style: upper-alpha;
}

Tuttavia non riesco a farlo visualizzare nella finestra di anteprima dell’editor, il che sarà un problema per la maggior parte dei miei utenti. Ho provato a ispezionare con il browser web e sembra che il CSS personalizzato non venga caricato o applicato all’anteprima (non sono un professionista in questo, quindi potrei sbagliarmi).

C’è un modo per risolvere questo problema, @Falco?

---

Quello che chiedo in questo thread è: c’è un modo per aggiungere CSS personalizzato che venga applicato anche all’anteprima dell’editor?

[FroggyC]

L’ho capito da solo. La soluzione è usare la classe CSS .d-editor-preview come selettore.

.cooked, .d-editor-preview {
  div[data-wrap="letterlist"] {
    ul, ol {
      list-style-type: upper-alpha;
    }
  }
}

[Falco]

È così che si fa. La precedente era specifica per il post così come viene mostrato nello stream, tu l’hai estesa per applicarla anche all’area di anteprima, quindi questa è davvero la soluzione corretta.

[FroggyC]

Grazie, Falco.

[FroggyC]

@Falco, se volessi stilizzare diversamente i livelli più profondi delle liste, sarebbe un livello aggiuntivo di ol?