全画面コード表示で自動コードハイライトに不具合

[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 の言語検出が失敗し、ハイライトが適用されていないことを確認します。

新規ユーザー制限のため、スクリーンショットを 1 つの大きな画像にまとめました。

[pmusaraj (Penar Musaraj)]

レポートありがとうございます、@oskar1。ローカルでこのバグを確認できました。(メタでは text を使用し、auto ではないため、メタで再現するのはより困難です。)

この修正にすぐ取り組みます。

[Arkshine]

問題はここだと思います :

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

markdownコードにlang-autoクラス名が適用され、ライブラリが言語を推測できるようにここで自動的に削除されています。

しかし、フルスクリーンにすると、要素にlang-autoがなくなり、language-<detected-language-here>クラス名のみになります。したがって、langは未定義になります。

考えられる修正はここにあります – lang-autoが見つからない場合は、language-<...>を探してください。

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

[pmusaraj (Penar Musaraj)]

レビューを喜んで行いますので、PRを提出してください @Arkshine。すでにかなりの作業を行っていただいていますよ 。

[Arkshine]

PRを作成しました 。テストが十分であることを願っています！

FIX: Automatic code highlighting not applied in fullscreen modal

[pmusaraj (Penar Musaraj)]

@Arkshineさん、ありがとうございます。修正は素晴らしいです。CIでテストがパスしたらマージします。