코드 블록 미리보기가 잘 작동하지 않아요

제품 지원
1

코드 블록은 이전에 정상적으로 작동했습니다. 하지만 어제 한 사용자가 코드 블록이 포함된 새 게시물을 작성했고, 포맷이 깨진 것을 발견했습니다. 이 게시물뿐 아니라 사이트 전체에서 문제가 발생하고 있습니다.

저는 discourse 앱을 최신 버전으로 재구축했지만, 결과는 여전히 동일합니다.

이 문제를 어떻게 해결할 수 있을까요? 도움을 주셔서 감사합니다.

해당 URL은 다음과 같습니다:

2

코드 블록은 괜찮아 보이는데, 코드 블록 형식이 실패하는 화면 캡처가 있으신가요?

3

Discourse 2.9.0.beta6 업그레이드 후 코드 블록 섹션이 색상으로 분류되지 않습니다

rainbow

rainbow
rainbow737×540 15.9 KB

mono-blue

Screenshot from 2022-07-01 11-28-45
Screenshot from 2022-07-01 11-28-45747×545 24.4 KB

4

훌륭한 정보를 공유해 주셔서 감사합니다.

그러나 메타 디스코러스 포럼은 현재 2.9.0.beta6 버전인 것 같습니다(‘로딩 스플래시 화면’을 지원하기 때문이죠). 그리고 여기서는 코드 블록이 정상적으로 작동합니다.

5

죄송합니다. color outlook라고 말해야 합니다.

그림 1. 파이썬(실제로 모든 언어) 키워드의 색상이 하이라이트되지 않습니다

python code sample
python code sample1092×489 18.5 KB

원본 게시물:

그림 2. 그러나 코드 블록의 색상 차이는 여전히 정상적으로 작동합니다

code block diff sample
code block diff sample1085×162 10.1 KB

원본 게시물:

6

제 해결 방법

  1. “hljs-theme-picker” 구성 요소를 제거합니다.

  2. 아래 주소에서 하나의 CSS 파일(저는 rainbow.css를 선택했습니다)을 가져옵니다.

  1. 테마 CSS/HTML을 편집하여 rainbow.css의 내용을 복사해서 붙여넣습니다.
    Screenshot from 2022-07-01 19-56-08
    Screenshot from 2022-07-01 19-56-081169×856 86.3 KB

이렇게 하면 안 되는 건가요?

7

Takanobu 씨, 감사합니다.

이 해결책이 잘 작동합니다.

python code sample - correct outlook
python code sample - correct outlook1080×499 32.3 KB

이것은 discourse hljs theme picker에 숨겨진 버그가 있다는 것을 의미하는 것 같습니다. 동일한 코드가 CSS에서는 잘 작동하는데, 구성 요소가 설치된 상태에서는 실패하는 이유를 알 수 없습니다.

제 문제는 실제로 해결되었음에도 불구하고, 당신의 해결책을 :white_check_mark: 해결책으로 설정하지 않겠다는 점에 대해 죄송합니다. 문제를 공개 상태로 유지하고, discourse 팀 @cocococosti 가 그 이유를 찾아내 공식적인 해결책을 마련해주기를 바랍니다.

제가 사용한 CSS 코드는 hljs theme picker에서 설정한 것입니다:

다시 한번 감사합니다.