From 4ffc6f716c82bca4f8261c8b12af1921bfd03342 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 2 Nov 2024 16:40:33 +0200
Subject: [PATCH] client: Enable syntax highlighting in print

---
 src/public/app/services/library_loader.js   |  8 ++-----
 src/public/app/services/syntax_highlight.js | 13 +++++++++++
 src/public/app/widgets/note_detail.js       | 24 +++++++++++++--------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/public/app/services/library_loader.js b/src/public/app/services/library_loader.js
index f5299ae33..a7aa4af62 100644
--- a/src/public/app/services/library_loader.js
+++ b/src/public/app/services/library_loader.js
@@ -1,5 +1,6 @@
 import mimeTypesService from "./mime_types.js";
 import optionsService from "./options.js";
+import { getStylesheetUrl } from "./syntax_highlight.js";
 
 const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};
 
@@ -176,12 +177,7 @@ function loadHighlightingTheme(theme) {
         $("head").append(highlightingThemeEl);
     }
     
-    let url;
-    const defaultPrefix = "default:";
-    if (theme.startsWith(defaultPrefix)) {        
-        url = `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
-    }
-
+    const url = getStylesheetUrl(theme);
     if (url) {
         highlightingThemeEl.attr("href", url);
     }
diff --git a/src/public/app/services/syntax_highlight.js b/src/public/app/services/syntax_highlight.js
index 224198fa2..a921fe35c 100644
--- a/src/public/app/services/syntax_highlight.js
+++ b/src/public/app/services/syntax_highlight.js
@@ -2,6 +2,19 @@ import library_loader from "./library_loader.js";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
 
+export function getStylesheetUrl(theme) {
+    if (!theme) {
+        return null;
+    }
+
+    const defaultPrefix = "default:";
+    if (theme.startsWith(defaultPrefix)) {        
+        return `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
+    }
+
+    return null;
+}
+
 /**
  * Identifies all the code blocks (as `pre code`) under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
  * 
diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js
index 19544b7cb..f294b18ed 100644
--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -30,6 +30,7 @@ import ContentWidgetTypeWidget from "./type_widgets/content_widget.js";
 import AttachmentListTypeWidget from "./type_widgets/attachment_list.js";
 import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js";
 import MindMapWidget from "./type_widgets/mind_map.js";
+import { getStylesheetUrl, isSyntaxHighlightEnabled } from "../services/syntax_highlight.js";
 
 const TPL = `
 <div class="note-detail">
@@ -255,6 +256,19 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         }
 
         const {assetPath} = window.glob;
+        const cssToLoad = [
+            `${assetPath}/node_modules/codemirror/lib/codemirror.css`,
+            `${assetPath}/libraries/ckeditor/ckeditor-content.css`,
+            `${assetPath}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
+            `${assetPath}/node_modules/katex/dist/katex.min.css`,
+            `${assetPath}/stylesheets/print.css`,
+            `${assetPath}/stylesheets/relation_map.css`,
+            `${assetPath}/stylesheets/ckeditor-theme.css`
+        ];
+
+        if (isSyntaxHighlightEnabled()) {
+            cssToLoad.push(getStylesheetUrl("default:vs"));
+        }
 
         this.$widget.find('.note-detail-printable:visible').printThis({
             header: $("<div>")
@@ -273,15 +287,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 </script>
 `,
             importCSS: false,
-            loadCSS: [
-                `${assetPath}/node_modules/codemirror/lib/codemirror.css`,
-                `${assetPath}/libraries/ckeditor/ckeditor-content.css`,
-                `${assetPath}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
-                `${assetPath}/node_modules/katex/dist/katex.min.css`,
-                `${assetPath}/stylesheets/print.css`,
-                `${assetPath}/stylesheets/relation_map.css`,
-                `${assetPath}/stylesheets/ckeditor-theme.css`
-            ],
+            loadCSS: cssToLoad,
             debug: true
         });
     }