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

app/assets/javascripts/discourse/app/lib/highlight-syntax.js

@@ -35,7 +35,7 @@ export default async function highlightSyntax(elem, siteSettings, session) {
 
     let lang;
     for (const className of e.classList) {
-      const m = className.match(/^lang-(.+)$/);
+      const m = className.match(/^lang(?:uage)?-(.+)$/);
       if (m) {
         lang = m[1];
         break;

app/assets/javascripts/discourse/tests/integration/components/highlighted-code-test.js

@@ -1,6 +1,7 @@
 import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
+import highlightSyntax from "discourse/lib/highlight-syntax";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { query } from "discourse/tests/helpers/qunit-helpers";
 
@@ -27,4 +28,34 @@ module("Integration | Component | highlighted-code", function (hooks) {
 
     assert.strictEqual(query("code").innerText.trim(), LONG_CODE_BLOCK.trim());
   });
+
+  test("highlighting code with lang=auto", async function (assert) {
+    this.set("code", "def test; end");
+
+    await render(hbs`<HighlightedCode @lang="auto" @code={{this.code}} />`);
+
+    const codeElement = query("code.hljs");
+
+    assert.notOk(
+      codeElement.classList.contains("lang-auto"),
+      "lang-auto is removed"
+    );
+    assert.ok(
+      Array.from(codeElement.classList).some((className) => {
+        return className.startsWith("language-");
+      }),
+      "language is detected"
+    );
+
+    await highlightSyntax(
+      codeElement.parentElement, // <pre>
+      this.siteSettings,
+      this.session
+    );
+
+    assert.notOk(
+      codeElement.dataset.unknownHljsLang,
+      "language is found from language- class"
+    );
+  });
 });