From 83f5b47c99dbc214aa27ba2317b398a48230508e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 27 Oct 2024 20:18:44 +0200
Subject: [PATCH] client: Set up simple preview for syntax highlight

---
 .../options/appearance/highlighting.js        | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/highlighting.js b/src/public/app/widgets/type_widgets/options/appearance/highlighting.js
index 8d3eba80a..4d268dbf3 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/highlighting.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/highlighting.js
@@ -2,6 +2,15 @@ import library_loader from "../../../../services/library_loader.js";
 import server from "../../../../services/server.js";
 import OptionsWidget from "../options_widget.js";
 
+const SAMPLE_LANGUAGE = "javascript";
+const SAMPLE_CODE = `\
+function test(name) {
+	console.log("Works");
+	console.info("Test");
+	// Hello world.
+}
+`
+
 const TPL = `
 <div class="options-section">
     <h4>Syntax highlighting</h4>
@@ -12,11 +21,23 @@ const TPL = `
             <select class="theme-select form-select"></select>
         </div>
     </div>
+
+    <div class="form-group row">
+        <div class="note-detail-readonly-text-content ck-content code-sample-wrapper">
+            <pre><code class="code-sample"></code></pre>
+        </div>
+    </div>
+
+    <style>
+        .code-sample-wrapper {
+            margin-top: 1em;
+        }
+    </style>
 </div>
 `;
 
 export default class HighlightingOptions extends OptionsWidget {
-    doRender() {
+    doRender() {        
         this.$widget = $(TPL);        
         this.$themeSelect = this.$widget.find(".theme-select");
         this.$themeSelect.on("change", async () => {
@@ -24,6 +45,17 @@ export default class HighlightingOptions extends OptionsWidget {
             library_loader.loadHighlightingTheme(newTheme);
             await server.put(`options/highlightingTheme/${newTheme}`);
         });
+
+        // Set up preview
+        const sampleEl = this.$widget.find(".code-sample");
+        library_loader
+            .requireLibrary(library_loader.HIGHLIGHT_JS)
+            .then(() => {
+                const highlightedText = hljs.highlight(SAMPLE_CODE, {
+                    language: SAMPLE_LANGUAGE
+                });
+                sampleEl.html(highlightedText.value);
+            });
     }
 
     async optionsLoaded(options) {