client: Refactor syntax highlighting for read-only text into service

src/public/app/services/syntax_highlight.js

@@ -0,0 +1,44 @@
+import mime_types from "./mime_types.js";
+
+export function applySyntaxHighlight($container) {
+    const codeBlocks = $container.find("pre code");
+    for (const codeBlock of codeBlocks) {
+        $(codeBlock).parent().toggleClass("hljs");
+
+        const text = codeBlock.innerText;
+
+        const normalizedMimeType = extractLanguageFromClassList(codeBlock);
+        if (!normalizedMimeType) {
+            continue;
+        }
+
+        let highlightedText = null;
+        if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
+            highlightedText = hljs.highlightAuto(text);
+        } else if (normalizedMimeType) {
+            const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
+            highlightedText = hljs.highlight(text, { language });
+        }
+        
+        if (highlightedText) {            
+            codeBlock.innerHTML = highlightedText.value;
+        }
+    }
+}
+
+/**
+ * Given a HTML element, tries to extract the `language-` class name out of it.
+ * 
+ * @param {string} el the HTML element from which to extract the language tag.
+ * @returns the normalized MIME type (e.g. `text-css` instead of `language-text-css`).
+ */
+function extractLanguageFromClassList(el) {
+    const prefix = "language-";
+    for (const className of el.classList) {
+        if (className.startsWith(prefix)) {
+            return className.substr(prefix.length);
+        }
+    }
+
+    return null;
+}

src/public/app/widgets/type_widgets/read_only_text.js

@@ -1,6 +1,6 @@
 import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
 import libraryLoader from "../../services/library_loader.js";
-import mime_types from "../../services/mime_types.js";
+import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
 
 const TPL = `
 <div class="note-detail-readonly-text note-detail-printable">
@@ -69,23 +69,6 @@ const TPL = `
 </div>
 `;
 
-/**
- * Given a HTML element, tries to extract the `language-` class name out of it.
- * 
- * @param {string} el the HTML element from which to extract the language tag.
- * @returns the normalized MIME type (e.g. `text-css` instead of `language-text-css`).
- */
-function extractLanguageFromClassList(el) {
-    const prefix = "language-";
-    for (const className of el.classList) {
-        if (className.startsWith(prefix)) {
-            return className.substr(prefix.length);
-        }
-    }
-
-    return null;
-}
-
 export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
     static getType() { return "readOnlyText"; }
 
@@ -130,33 +113,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
             renderMathInElement(this.$content[0], {trust: true});
         }
 
-        this.#setupSyntaxHighlight();
+        applySyntaxHighlight(this.$content);
-    }
-
-    #setupSyntaxHighlight() {
-        const codeBlocks = this.$content.find("pre code");
-        for (const codeBlock of codeBlocks) {
-            $(codeBlock).parent().toggleClass("hljs");
-
-            const text = codeBlock.innerText;
-
-            const normalizedMimeType = extractLanguageFromClassList(codeBlock);
-            if (!normalizedMimeType) {
-                continue;
-            }
-
-            let highlightedText = null;
-            if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
-                highlightedText = hljs.highlightAuto(text);
-            } else if (normalizedMimeType) {
-                const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
-                highlightedText = hljs.highlight(text, { language });
-            }
-            
-            if (highlightedText) {            
-                codeBlock.innerHTML = highlightedText.value;
-            }
-        }
     }
 
     async refreshIncludedNoteEvent({noteId}) {