client,server: List syntax highlighting themes

src/public/app/widgets/type_widgets/content_widget.js

@@ -34,6 +34,7 @@ import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import RibbonOptions from "./options/appearance/ribbon.js";
 import LocalizationOptions from "./options/appearance/i18n.js";
+import HighlightingOptions from "./options/appearance/highlighting.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -58,6 +59,7 @@ const CONTENT_WIDGETS = {
     _optionsAppearance: [
         LocalizationOptions,
         ThemeOptions,
+        HighlightingOptions,
         FontsOptions,
         ZoomFactorOptions,
         NativeTitleBarOptions,

src/public/app/widgets/type_widgets/options/appearance/highlighting.js

@@ -0,0 +1,34 @@
+import server from "../../../../services/server.js";
+import OptionsWidget from "../options_widget.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Syntax highlighting</h4>
+
+    <div class="form-group row">
+        <div class="col-6">
+            <label>Theme</label>
+            <select class="theme-select form-select"></select>
+        </div>
+    </div>
+</div>
+`;
+
+export default class HighlightingOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);        
+        this.$themeSelect = this.$widget.find(".theme-select");
+    }
+
+    async optionsLoaded(options) {
+        const themes = await server.get("options/highlighting-themes");
+        this.$themeSelect.empty();
+
+        for (const theme of themes) {
+            this.$themeSelect.append($("<option>")
+                .attr("value", theme.val)
+                .text(theme.title)
+                );
+        }
+    }
+}

src/routes/api/options.ts

@@ -6,6 +6,7 @@ import searchService from "../../services/search/services/search.js";
 import ValidationError from "../../errors/validation_error.js";
 import { Request } from 'express';
 import { changeLanguage } from "../../services/i18n.js";
+import fs from "fs";
 
 // options allowed to be updated directly in the Options dialog
 const ALLOWED_OPTIONS = new Set([
@@ -138,6 +139,22 @@ function getUserThemes() {
     return ret;
 }
 
+function getSyntaxHighlightingThemes() {
+    const path = "node_modules/@highlightjs/cdn-assets/styles";
+    const allThemes = fs
+        .readdirSync(path)
+        .filter((el) => el.endsWith(".min.css"))
+        .map((name) => {
+            const nameWithoutExtension = name.replace(".min.css", "");
+            
+            return {
+                val: `default:${nameWithoutExtension}`,
+                title: nameWithoutExtension
+            };
+        });
+    return allThemes;
+}
+
 function getSupportedLocales() {
     // TODO: Currently hardcoded, needs to read the list of available languages.
     return [
@@ -176,5 +193,6 @@ export default {
     updateOption,
     updateOptions,
     getUserThemes,
+    getSyntaxHighlightingThemes,
     getSupportedLocales
 };

src/routes/routes.ts

@@ -218,6 +218,7 @@ function register(app: express.Application) {
     apiRoute(PUT, '/api/options/:name/:value*', optionsApiRoute.updateOption);
     apiRoute(PUT, '/api/options', optionsApiRoute.updateOptions);
     apiRoute(GET, '/api/options/user-themes', optionsApiRoute.getUserThemes);
+    apiRoute(GET, '/api/options/highlighting-themes', optionsApiRoute.getSyntaxHighlightingThemes);
     apiRoute(GET, '/api/options/locales', optionsApiRoute.getSupportedLocales);
 
     apiRoute(PST, '/api/password/change', passwordApiRoute.changePassword);