Añadiendo CSS a la vista previa del editor

[FroggyC]

Continuando la discusión de Listas ordenadas con marcadores que no son números:

Citas del otro hilo para dar contexto.

@Falco

Agrega un contenedor a esas listas y algo de CSS

En las publicaciones usa:

[wrap="letterlist"]
1. es el primero
2. es el segundo.
3. es el tercero
[/wrap]

En tu tema agrega:

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

@FroggyC

Intenté usar esta solución y funciona, corrigiendo el CSS a lo siguiente (a la primera línea le faltaba un ol {):

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

Sin embargo, no puedo hacer que se muestre en la ventana de vista previa del editor, lo que será un problema para la mayoría de mis usuarios. He intentado inspeccionar con el navegador web, y parece que el CSS personalizado no se carga ni se aplica a la vista previa (no soy un profesional en esto, así que podría estar equivocado).

¿Hay alguna forma que se te ocurra para resolver este problema, @Falco?

---

Lo que pregunto en este hilo es: ¿hay alguna forma de agregar CSS personalizado que también se aplique a la vista previa del editor?

[FroggyC]

Lo descubrí por mi cuenta. La solución es usar la clase CSS .d-editor-preview como selector.

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

[Falco]

Así es. Lo anterior era específico para la publicación tal como se muestra en el flujo, lo extendiste para que también se aplicara en el área de vista previa, así que esa es la solución correcta en efecto.

[FroggyC]

Gracias, Falco.

[FroggyC]

@Falco, si quisiera estilizar de manera diferente las capas más anidadas de listas, ¿sería un nivel adicional de ol anidado?