From 91fa1a6cb1e33b5332d481d3b170d467c976b401 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 7 Nov 2024 23:53:02 +0200
Subject: [PATCH] client: Add syntax highlight for code note previews

---
 src/public/app/services/content_renderer.js | 14 +++++--
 src/public/app/services/syntax_highlight.js | 41 ++++++++++++++-------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/public/app/services/content_renderer.js b/src/public/app/services/content_renderer.js
index 162ad3630..359366282 100644
--- a/src/public/app/services/content_renderer.js
+++ b/src/public/app/services/content_renderer.js
@@ -10,7 +10,8 @@ import treeService from "./tree.js";
 import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
-import { applySyntaxHighlight } from "./syntax_highlight.js";
+import { applySingleBlockSyntaxHighlight, applySyntaxHighlight } from "./syntax_highlight.js";
+import mime_types from "./mime_types.js";
 
 let idCounter = 1;
 
@@ -113,11 +114,18 @@ async function renderText(note, $renderedContent) {
     }
 }
 
-/** @param {FNote} note */
+/**
+ * Renders a code note, by displaying its content and applying syntax highlighting based on the selected MIME type.
+ * 
+ * @param {FNote} note
+ */
 async function renderCode(note, $renderedContent) {
     const blob = await note.getBlob();
 
-    $renderedContent.append($("<pre>").text(blob.content));
+    const $codeBlock = $("<pre>"); 
+    $codeBlock.text(blob.content);
+    applySingleBlockSyntaxHighlight($codeBlock, mime_types.normalizeMimeTypeForCKEditor(note.mime));
+    $renderedContent.append($codeBlock);
 }
 
 function renderImage(entity, $renderedContent, options = {}) {
diff --git a/src/public/app/services/syntax_highlight.js b/src/public/app/services/syntax_highlight.js
index a921fe35c..45d87cd95 100644
--- a/src/public/app/services/syntax_highlight.js
+++ b/src/public/app/services/syntax_highlight.js
@@ -29,27 +29,40 @@ export async 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;
+        applySingleBlockSyntaxHighlight($(codeBlock, normalizedMimeType));
+    }
+}
+
+/**
+ * Applies syntax highlight to the given code block (assumed to be <pre><code>), using highlight.js.
+ * 
+ * @param {*} $codeBlock 
+ * @param {*} normalizedMimeType 
+ */
+export async function applySingleBlockSyntaxHighlight($codeBlock, normalizedMimeType) {
+    $codeBlock.parent().toggleClass("hljs");
+    const text = $codeBlock.text();
+
+    let highlightedText = null;
+    if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
+        highlightedText = hljs.highlightAuto(text);
+    } else if (normalizedMimeType) {
+        const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
+        if (language) {
+            highlightedText = hljs.highlight(text, { language });
+        } else {
+            console.warn(`Unknown mime type: ${normalizedMimeType}.`);
         }
     }
+    
+    if (highlightedText) {            
+        $codeBlock.html(highlightedText.value);
+    }
 }
 
 /**