전체 화면 코드 보기에서 자동 코드 하이라이팅이 작동하지 않습니다

[oskar1 (Oskar)]

우선순위/중요도:
낮음
플랫폼:
Chrome 124, Ubuntu 22
버전:
Discourse v3.3.0.beta2-dev
설명:
Discourse는 언어가 지정되지 않은 경우에도 hljs를 사용하여 자동 코드 하이라이팅을 수행합니다. 이 기능은 일반 주제 보기에서는 작동하지만, 코드를 전체 화면으로 볼 때는 작동하지 않습니다.
재현 방법:

1. 언어를 지정하지 않은 코드 블록이 포함된 주제를 생성합니다.

System.out.println("hello world");

2. 주제를 열어 hljs가 언어를 감지하고 하이라이팅을 적용하는 것을 확인합니다.
3. 코드 블록 오른쪽 상단의 전체 화면 버튼을 클릭합니다.
4. hljs 언어 감지가 실패하여 하이라이팅이 적용되지 않는 것을 확인합니다

신규 사용자 제한 때문에 여러 스크린샷을 하나의 큰 이미지로 합쳤습니다 .

[pmusaraj (Penar Musaraj)]

보고해 주셔서 감사합니다, @oskar1. 이 버그를 로컬에서 확인했습니다. (메타에서는 default code lang에 auto 대신 text를 사용하기 때문에 재현이 더 어렵습니다.)

곧 수정을 검토하겠습니다.

[Arkshine]

문제가 여기 있는 것 같습니다 :

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/highlight-syntax.js#L36-L52

마크다운 코드에 lang-auto 클래스 이름이 적용되고, 여기에서 자동으로 제거되어 라이브러리가 언어를 추측할 수 있도록 합니다.

하지만 풀스크린으로 전환하면 요소에 lang-auto가 더 이상 없고, 여기에는 language-<감지된-언어> 클래스 이름만 있습니다. 따라서 lang이 정의되지 않습니다.

가능한 해결 방법은 다음과 같습니다 – lang-auto를 찾지 못하면 language-<..>를 찾도록 하는 것입니다.

const m = className.match(/^lang-(.+)$/);
→
const m = className.match(/^`(?:lang|language)-(.+)$/);

[pmusaraj (Penar Musaraj)]

@Arkshine 님, 원하시면 PR을 검토해 드릴게요. 이미 상당한 작업을 해주셨으니요 .

[Arkshine]

PR을 올렸습니다 . 테스트가 충분히 좋은 것 같습니다!

FIX: Automatic code highlighting not applied in fullscreen modal (#26710)

[pmusaraj (Penar Musaraj)]

고맙습니다 @Arkshine, 수정이 훌륭해 보입니다. CI에서 테스트가 통과되면 병합하겠습니다.