FIX: Do not highlight large code blocks (#10125)

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

@@ -14,6 +14,11 @@ export default function highlightSyntax($elem) {
   }
 
   $(selector, $elem).each(function(i, e) {
+    // Large code blocks can cause crashes or slowdowns
+    if (e.innerHTML.length > 30000) {
+      return;
+    }
+
     $(e).removeClass("lang-auto");
     loadScript(path).then(() => {
       customHighlightJSLanguages();

test/javascripts/components/highlighted-code-test.js

@@ -1,5 +1,7 @@
 import componentTest from "helpers/component-test";
 
+const LONG_CODE_BLOCK = "puts a\n".repeat(15000);
+
 moduleForComponent("highlighted-code", { integration: true });
 
 componentTest("highlighting code", {
@@ -20,3 +22,22 @@ componentTest("highlighting code", {
     );
   }
 });
+
+componentTest("large code blocks are not highlighted", {
+  template: "{{highlighted-code lang='ruby' code=code}}",
+
+  beforeEach() {
+    Discourse.HighlightJSPath =
+      "assets/highlightjs/highlight-test-bundle.min.js";
+    this.set("code", LONG_CODE_BLOCK);
+  },
+
+  async test(assert) {
+    assert.equal(
+      find("code")
+        .text()
+        .trim(),
+      LONG_CODE_BLOCK.trim()
+    );
+  }
+});