feat(pat-markdown): Initialize syntax highlight when parsing markup.

Author: thet

src/pat/markdown/markdown.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 import logging from "../../core/logging";
 import utils from "../../core/utils";
 import Base from "../../core/base";
+import events from "../../core/events";
 import inject from "../inject/inject";
 
 const log = logging.getLogger("pat.markdown");
@@ -29,11 +30,20 @@ const Markdown = Base.extend({
     async render(text) {
         const marked = (await import("marked")).marked;
         const DOMPurify = (await import("dompurify")).default;
-        await import("../syntax-highlight/syntax-highlight").default;
+        const SyntaxHighlight = (await import("../syntax-highlight/syntax-highlight")).default; // prettier-ignore
 
         const wrapper = document.createElement("div");
         const parsed = DOMPurify.sanitize(marked.parse(text));
         wrapper.innerHTML = parsed;
+        for (const item of wrapper.querySelectorAll("pre > code")) {
+            const pre = item.parentElement;
+            pre.classList.add("pat-syntax-highlight");
+            // If the code block language was set in a fenced code block,
+            // marked has already set the language as a class on the code tag.
+            // pat-syntax-highlight will understand this.
+            new SyntaxHighlight(pre);
+            await events.await_event(pre, "init.syntax-highlight.patterns");
+        }
         return $(wrapper);
     },
 

src/pat/markdown/markdown.test.js

@@ -159,4 +159,28 @@ describe("pat-markdown", function () {
             ).toBe("My title\n-------\nContent\n\n");
         });
     });
+
+    describe("Code blocks", function () {
+        it("It correctly renders code blocks", async function () {
+            document.body.innerHTML = `<div class="pat-markdown">
+# Title
+
+some content
+
+\`\`\`javascript
+    const foo = "bar";
+\`\`\`
+</div>
+`;
+
+            new pattern(document.querySelector(".pat-markdown"));
+            await utils.timeout(1); // wait a tick for async to settle.
+            await utils.timeout(1); // wait a tick for async to settle.
+            expect(document.body.querySelector(".pat-markdown > h1").textContent).toBe("Title"); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > p").textContent).toBe("some content"); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre code")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre.language-javascript code.language-javascript")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre code .token").textContent).toBeTruthy(); // prettier-ignore
+        });
+    });
 });