client: Set up simple preview for syntax highlight

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) {