全屏代码视图中的自动代码高亮已损坏

错误
1

优先级/严重性:
低
平台:
Chrome 124, Ubuntu 22
版本:
Discourse v3.3.0.beta2-dev
描述:
Discourse 会自动进行代码高亮显示 (hljs)，即使未指定语言。此功能在普通主题视图中有效，但在全屏查看代码时无效。
重现步骤:

  1. 创建一个不指定语言的代码块主题
System.out.println("hello world");
  1. 查看主题，可以看到 hljs 检测到了一种语言并应用了高亮。
  2. 点击代码块右上角的全屏按钮。
  3. 可以看到 hljs 语言检测失败，没有应用高亮显示。

由于新用户限制，以下是一些截图合并成一张大图 :confused:。

discourse-new-user-limit
discourse-new-user-limit1062×775 56.3 KB

3 个赞
2

感谢你的报告，@oskar1，我可以在本地确认这个 bug。（在 meta 上更难复现，因为我们在 meta 上使用 text 而不是 auto 作为 default code lang。）

我们会尽快着手修复。

3 个赞
3

我认为问题出在这里 :thinking: :

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)-(.+)$/);

1 个赞
4

如果您想提交一个 PR，我很乐意进行审查 @Arkshine，您已经完成了大部分工作 :wink:。

3 个赞
5

我提交了一个PR :+1: 。希望测试足够好！

2 个赞
6

感谢 @Arkshine，修复看起来很棒，一旦 CI 中的测试通过，我就会合并它。

3 个赞
7

此主题已在 18 小时后自动关闭。不再允许回复。