CSS zur Editor-Vorschau hinzufügen

[FroggyC]

Fortsetzung der Diskussion von Geordnete Listen mit Nicht-Nummern-Markierungen:

Zitate aus dem anderen Thread zum Kontext.

@Falco

Füge einen Wrapper zu diesen Listen und etwas CSS hinzu

In Beiträgen verwenden:

[wrap="letterlist"]
1. ist der erste
2. ist der zweite.
3. ist der dritte
[/wrap]

Füge in deinem Theme hinzu:

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

@FroggyC

Ich habe versucht, diese Lösung zu verwenden, und sie funktioniert, indem ich das CSS wie folgt korrigiere (der ersten Zeile fehlte ein ol {):

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

Ich kann es jedoch nicht im Vorschaufenster des Editors anzeigen lassen, was für die meisten meiner Benutzer ein Problem darstellt. Ich habe versucht, mit dem Webbrowser zu inspizieren, und es scheint, dass das benutzerdefinierte CSS nicht geladen oder auf die Vorschau angewendet wird (ich bin kein Profi darin, also könnte ich falsch liegen).

Fällt Ihnen eine Lösung für dieses Problem ein, @Falco?

---

Was ich in diesem Thread frage ist: Gibt es eine Möglichkeit, benutzerdefiniertes CSS hinzuzufügen, das auch auf die Editor-Vorschau angewendet wird?

[FroggyC]

Ich habe es selbst herausgefunden. Die Lösung besteht darin, die CSS-Klasse .d-editor-preview als Selektor zu verwenden.

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

[Falco]

Das ist der richtige Weg. Das Vorherige war spezifisch für den Beitrag, wie er im Stream angezeigt wird, Sie haben es auf den Vorschau-Bereich ausgeweitet, daher ist das in der Tat die richtige Lösung.

[FroggyC]

Danke, Falco.

[FroggyC]

@Falco , wenn ich tiefer verschachtelte Listen anders gestalten wollte, wäre das eine zusätzliche Verschachtelungsebene von ol?