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;
+}