diff --git a/app/assets/javascripts/discourse/app/lib/highlight-syntax.js b/app/assets/javascripts/discourse/app/lib/highlight-syntax.js index 48543dcd1d..404e73cadc 100644 --- a/app/assets/javascripts/discourse/app/lib/highlight-syntax.js +++ b/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(); diff --git a/test/javascripts/components/highlighted-code-test.js b/test/javascripts/components/highlighted-code-test.js index 38b0f2d631..27cfe5696d 100644 --- a/test/javascripts/components/highlighted-code-test.js +++ b/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() + ); + } +});