에디터 미리보기에 CSS 추가하기

[FroggyC]

Ordered lists with non-number markers 토론을 이어갑니다:

문맥을 위해 다른 스레드에서 가져온 인용문입니다.

@Falco

해당 목록에 래퍼를 추가하고 CSS를 적용하세요

게시물에 다음을 사용하세요:

[wrap="letterlist"]
1. is the first
2. is the second.
3. is the third
[/wrap]

테마에 다음을 추가하세요:

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

@FroggyC

이 솔루션을 사용해 보았는데, 첫 번째 줄에 ol {가 빠져 있던 CSS를 다음과 같이 수정하면 작동합니다:

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

하지만 에디터 미리보기 창에는 표시가 되지 않아 대부분의 사용자에게 다소 문제가 될 것 같습니다. 웹 브라우저로 인스펙터를 사용해 보니, 커스텀 CSS가 미리보기에 로드되거나 적용되지 않는 것 같습니다(전문가는 아니므로 제 추측일 수 있습니다).

@Falco, 이 문제를 해결할 방법이 있을까요?

---

이 스레드에서 묻고 싶은 것은: 에디터 미리보기에도 적용되는 커스텀 CSS를 추가할 수 있는 방법이 있는지입니다.

[FroggyC]

혼자 해결했어요. 해결 방법은 .d-editor-preview CSS 클래스를 선택자로 사용하는 것입니다.

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

[Falco]

그렇군요. 이전 방식은 스트림에 표시되는 것처럼 게시물에 특화되어 있었는데, 이를 미리보기 영역에도 적용하도록 확장했으니, 그 해결책이 정확합니다.

[FroggyC]

감사합니다, 팔코.

[FroggyC]

@Falco, 목록의 더 깊이 중첩된 레이어를 다르게 스타일링하고 싶다면, ol의 추가 중첩 레벨을 사용하는 것인가요?