From 66cbe468f5983930f11dc1dcd229a35fc69c4225 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 18 May 2025 17:50:31 +0300
Subject: [PATCH] chore(highlightjs): load theme by IDs

---
 apps/client/src/services/syntax_highlight.ts  |  15 +-
 .../options/text_notes/code_block.ts          |  14 +-
 apps/client/webpack.config.cjs                |  12 +
 packages/highlightjs/src/index.ts             |   5 +-
 packages/highlightjs/src/themes.ts            | 406 ++++++++++++++----
 5 files changed, 356 insertions(+), 96 deletions(-)

diff --git a/apps/client/src/services/syntax_highlight.ts b/apps/client/src/services/syntax_highlight.ts
index 39eb3e71f..b6b4dc263 100644
--- a/apps/client/src/services/syntax_highlight.ts
+++ b/apps/client/src/services/syntax_highlight.ts
@@ -1,4 +1,4 @@
-import { ensureMimeTypes, highlight, highlightAuto, loadTheme } from "@triliumnext/highlightjs";
+import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes } from "@triliumnext/highlightjs";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
 
@@ -58,8 +58,17 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
 
 export async function ensureMimeTypesForHighlighting() {
     // Load theme.
-    const currentTheme = String(options.get("codeBlockTheme"));
-    loadTheme(currentTheme);
+    const currentThemeName = String(options.get("codeBlockTheme"));
+    const themePrefix = "default:";
+    let theme = null;
+    if (currentThemeName.includes(themePrefix)) {
+        theme = Themes[currentThemeName.substring(themePrefix.length)];
+    }
+    if (!theme) {
+        theme = Themes.default;
+    }
+
+    loadTheme(theme);
 
     // Load mime types.
     const mimeTypes = mime_types.getMimeTypes();
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts b/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts
index ce2ffe46e..4dffa0a19 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts
+++ b/apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts
@@ -57,14 +57,6 @@ const TPL = /*html*/`
 </div>
 `;
 
-// TODO: Deduplicate
-interface Theme {
-    title: string;
-    val: string;
-}
-
-type Response = Record<string, Theme[]>;
-
 /**
  * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
  */
@@ -78,10 +70,10 @@ export default class CodeBlockOptions extends OptionsWidget {
         this.$widget = $(TPL);
         this.$themeSelect = this.$widget.find(".theme-select");
         // Populate the list of themes.
-        for (const name of Object.keys(Themes)) {
+        for (const [ id, theme ] of Object.entries(Themes)) {
             const option = $("<option>")
-                .attr("value", `default:${name}`)
-                .text(name);
+                .attr("value", `default:${id}`)
+                .text(theme.name);
             this.$themeSelect.append(option);
         }
         this.$themeSelect.on("change", async () => {
diff --git a/apps/client/webpack.config.cjs b/apps/client/webpack.config.cjs
index 15a7307ba..290a0106e 100644
--- a/apps/client/webpack.config.cjs
+++ b/apps/client/webpack.config.cjs
@@ -80,6 +80,7 @@ module.exports = composePlugins(
       }))
     }));
 
+    inlineCss(config);
     inlineSvg(config);
     externalJson(config);
 
@@ -103,6 +104,17 @@ function inlineSvg(config) {
   });
 }
 
+function inlineCss(config) {
+  if (!config.module?.rules) {
+    return;
+  }
+
+  // Alter Nx's asset rule to avoid inlining SVG if they have ?raw prepended.
+  console.log(config.module.rules.map((r) => r.test.toString()));
+  const existingRule = config.module.rules.find((r) => r.test.toString().startsWith("/\\.css"));
+  existingRule.resourceQuery = { not: [/raw/] };
+}
+
 function externalJson(config) {
   if (!config.module?.rules) {
     return;
diff --git a/packages/highlightjs/src/index.ts b/packages/highlightjs/src/index.ts
index 9f19bd38e..1cd5af064 100644
--- a/packages/highlightjs/src/index.ts
+++ b/packages/highlightjs/src/index.ts
@@ -46,7 +46,10 @@ export function highlight(code: string, options: HighlightOptions) {
 }
 
 export async function loadTheme(theme: Theme) {
-    console.log("Got", theme.default);
+    console.log("Got theme", theme);
+
+    const loadedTheme = await theme.load();
+    console.log("Got", loadedTheme.default);
 }
 
 export const { highlightAuto } = hljs;
diff --git a/packages/highlightjs/src/themes.ts b/packages/highlightjs/src/themes.ts
index 54833746a..c13918377 100644
--- a/packages/highlightjs/src/themes.ts
+++ b/packages/highlightjs/src/themes.ts
@@ -1,85 +1,329 @@
-export type Theme = { default: typeof import("*.css", { with: { "resolution-mode": "import" } }); };
+export interface Theme {
+    name: string;
+    load: () => Promise<{ default: typeof import("*.css", { with: { "resolution-mode": "import" } }); }>;
+}
 
-const themeDefinitions: Record<string, () => Promise<Theme>> = {
-    "a11y (Dark)": () => import("../node_modules/highlight.js/styles/a11y-dark.css?raw"),
-    "a11y (Light)": () => import("../node_modules/highlight.js/styles/a11y-light.css?raw"),
-    "Agate (Dark)": () => import("../node_modules/highlight.js/styles/agate.css?raw"),
-    "An Old Hope (Dark)": () => import("../node_modules/highlight.js/styles/an-old-hope.css?raw"),
-    "Android Studio (Dark)": () => import("../node_modules/highlight.js/styles/androidstudio.css?raw"),
-    "Arduino (Light)": () => import("../node_modules/highlight.js/styles/arduino-light.css?raw"),
-    "Arta (Dark)": () => import("../node_modules/highlight.js/styles/arta.css?raw"),
-    "Ascetic (Light)": () => import("../node_modules/highlight.js/styles/ascetic.css?raw"),
-    "Atom One with ReasonML support (Dark)": () => import("../node_modules/highlight.js/styles/atom-one-dark-reasonable.css?raw"),
-    "Atom One (Dark)": () => import("../node_modules/highlight.js/styles/atom-one-dark.css?raw"),
-    "Atom One (Light)": () => import("../node_modules/highlight.js/styles/atom-one-light.css?raw"),
-    "Brown Paper (Light)": () => import("../node_modules/highlight.js/styles/brown-paper.css?raw"),
-    "CodePen Embed (Dark)": () => import("../node_modules/highlight.js/styles/codepen-embed.css?raw"),
-    "Color Brewer (Light)": () => import("../node_modules/highlight.js/styles/color-brewer.css?raw"),
-    "Cybertopia Cherry (Dark)": () => import("../node_modules/highlight.js/styles/cybertopia-cherry.css?raw"),
-    "Cybertopia Dimmer (Dark)": () => import("../node_modules/highlight.js/styles/cybertopia-dimmer.css?raw"),
-    "Cybertopia Icecap (Dark)": () => import("../node_modules/highlight.js/styles/cybertopia-icecap.css?raw"),
-    "Cybertopia Saturated (Dark)": () => import("../node_modules/highlight.js/styles/cybertopia-saturated.css?raw"),
-    "Dark": () => import("../node_modules/highlight.js/styles/dark.css?raw"),
-    "Original highlight.js Theme (Light)": () => import("../node_modules/highlight.js/styles/default.css?raw"),
-    "devibeans (Dark)": () => import("../node_modules/highlight.js/styles/devibeans.css?raw"),
-    "Docco (Light)": () => import("../node_modules/highlight.js/styles/docco.css?raw"),
-    "FAR (Dark)": () => import("../node_modules/highlight.js/styles/far.css?raw"),
-    "FelipeC (Dark)": () => import("../node_modules/highlight.js/styles/felipec.css?raw"),
-    "Foundation 4 Docs (Light)": () => import("../node_modules/highlight.js/styles/foundation.css?raw"),
-    "GitHub Dimmed (Dark)": () => import("../node_modules/highlight.js/styles/github-dark-dimmed.css?raw"),
-    "GitHub (Dark)": () => import("../node_modules/highlight.js/styles/github-dark.css?raw"),
-    "GitHub (Light)": () => import("../node_modules/highlight.js/styles/github.css?raw"),
-    "GML (Dark)": () => import("../node_modules/highlight.js/styles/gml.css?raw"),
-    "Google Code (Light)": () => import("../node_modules/highlight.js/styles/googlecode.css?raw"),
-    "Gradient (Dark)": () => import("../node_modules/highlight.js/styles/gradient-dark.css?raw"),
-    "Gradient (Light)": () => import("../node_modules/highlight.js/styles/gradient-light.css?raw"),
-    "Grayscale (Light)": () => import("../node_modules/highlight.js/styles/grayscale.css?raw"),
-    "hybrid (Dark)": () => import("../node_modules/highlight.js/styles/hybrid.css?raw"),
-    "Idea (Light)": () => import("../node_modules/highlight.js/styles/idea.css?raw"),
-    "IntelliJ (Light)": () => import("../node_modules/highlight.js/styles/intellij-light.css?raw"),
-    "IR Black (Dark)": () => import("../node_modules/highlight.js/styles/ir-black.css?raw"),
-    "ISBL Editor (Dark)": () => import("../node_modules/highlight.js/styles/isbl-editor-dark.css?raw"),
-    "ISBL Editor (Light)": () => import("../node_modules/highlight.js/styles/isbl-editor-light.css?raw"),
-    "Kimbie (Dark)": () => import("../node_modules/highlight.js/styles/kimbie-dark.css?raw"),
-    "Kimbie (Light)": () => import("../node_modules/highlight.js/styles/kimbie-light.css?raw"),
-    "Lightfair (Light)": () => import("../node_modules/highlight.js/styles/lightfair.css?raw"),
-    "Lioshi (Dark)": () => import("../node_modules/highlight.js/styles/lioshi.css?raw"),
-    "Magula (Light)": () => import("../node_modules/highlight.js/styles/magula.css?raw"),
-    "Mono Blue (Light)": () => import("../node_modules/highlight.js/styles/mono-blue.css?raw"),
-    "Monokai Sublime (Dark)": () => import("../node_modules/highlight.js/styles/monokai-sublime.css?raw"),
-    "Monokai (Dark)": () => import("../node_modules/highlight.js/styles/monokai.css?raw"),
-    "Night Owl (Dark)": () => import("../node_modules/highlight.js/styles/night-owl.css?raw"),
-    "NNFX (Dark)": () => import("../node_modules/highlight.js/styles/nnfx-dark.css?raw"),
-    "NNFX (Light)": () => import("../node_modules/highlight.js/styles/nnfx-light.css?raw"),
-    "Nord (Dark)": () => import("../node_modules/highlight.js/styles/nord.css?raw"),
-    "Obsidian (Dark)": () => import("../node_modules/highlight.js/styles/obsidian.css?raw"),
-    "Panda (Dark)": () => import("../node_modules/highlight.js/styles/panda-syntax-dark.css?raw"),
-    "Panda (Light)": () => import("../node_modules/highlight.js/styles/panda-syntax-light.css?raw"),
-    "Paraiso (Dark)": () => import("../node_modules/highlight.js/styles/paraiso-dark.css?raw"),
-    "Paraiso (Light)": () => import("../node_modules/highlight.js/styles/paraiso-light.css?raw"),
-    "Pojoaque (Dark)": () => import("../node_modules/highlight.js/styles/pojoaque.css?raw"),
-    "PureBasic (Light)": () => import("../node_modules/highlight.js/styles/purebasic.css?raw"),
-    "Qt Creator (Dark)": () => import("../node_modules/highlight.js/styles/qtcreator-dark.css?raw"),
-    "Qt Creator (Light)": () => import("../node_modules/highlight.js/styles/qtcreator-light.css?raw"),
-    "Rainbow (Dark)": () => import("../node_modules/highlight.js/styles/rainbow.css?raw"),
-    "RouterOS Script (Light)": () => import("../node_modules/highlight.js/styles/routeros.css?raw"),
-    "Rose Pine Dawn (Light)": () => import("../node_modules/highlight.js/styles/rose-pine-dawn.css?raw"),
-    "Rose Pine Moon (Dark)": () => import("../node_modules/highlight.js/styles/rose-pine-moon.css?raw"),
-    "Rose Pine (Dark)": () => import("../node_modules/highlight.js/styles/rose-pine.css?raw"),
-    "School Book (Light)": () => import("../node_modules/highlight.js/styles/school-book.css?raw"),
-    "Shades of Purple (Dark)": () => import("../node_modules/highlight.js/styles/shades-of-purple.css?raw"),
-    "Srcery (Dark)": () => import("../node_modules/highlight.js/styles/srcery.css?raw"),
-    "Stack Overflow (Dark)": () => import("../node_modules/highlight.js/styles/stackoverflow-dark.css?raw"),
-    "Stack Overflow (Light)": () => import("../node_modules/highlight.js/styles/stackoverflow-light.css?raw"),
-    "Sunburst (Dark)": () => import("../node_modules/highlight.js/styles/sunburst.css?raw"),
-    "Tokyo Night (Dark)": () => import("../node_modules/highlight.js/styles/tokyo-night-dark.css?raw"),
-    "Tokyo Night (Light)": () => import("../node_modules/highlight.js/styles/tokyo-night-light.css?raw"),
-    "Tomorrow Night Blue (Dark)": () => import("../node_modules/highlight.js/styles/tomorrow-night-blue.css?raw"),
-    "Tomorrow Night Bright (Dark)": () => import("../node_modules/highlight.js/styles/tomorrow-night-bright.css?raw"),
-    "Visual Studio (Light)": () => import("../node_modules/highlight.js/styles/vs.css?raw"),
-    "Visual Studio 2015 (Dark)": () => import("../node_modules/highlight.js/styles/vs2015.css?raw"),
-    "Xcode (Light)": () => import("../node_modules/highlight.js/styles/xcode.css?raw"),
-    "xt256 (Dark)": () => import("../node_modules/highlight.js/styles/xt256.css?raw")
+const themeDefinitions: Record<string, Theme> = {
+    "1c light": {
+        name: "1C (Light)",
+        load: () => import("../node_modules/highlight.js/styles/1c-light.css?raw")
+    },
+    "a11y dark": {
+        name: "a11y (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/a11y-dark.css?raw")
+    },
+    "a11y light": {
+        name: "a11y (Light)",
+        load: () => import("../node_modules/highlight.js/styles/a11y-light.css?raw")
+    },
+    "agate": {
+        name: "Agate (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/agate.css?raw")
+    },
+    "an old hope": {
+        name: "An Old Hope (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/an-old-hope.css?raw")
+    },
+    "androidstudio": {
+        name: "Android Studio (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/androidstudio.css?raw")
+    },
+    "arduino light": {
+        name: "Arduino (Light)",
+        load: () => import("../node_modules/highlight.js/styles/arduino-light.css?raw")
+    },
+    "arta": {
+        name: "Arta (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/arta.css?raw")
+    },
+    "ascetic": {
+        name: "Ascetic (Light)",
+        load: () => import("../node_modules/highlight.js/styles/ascetic.css?raw")
+    },
+    "atom one dark reasonable": {
+        name: "Atom One with ReasonML support (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/atom-one-dark-reasonable.css?raw")
+    },
+    "atom one dark": {
+        name: "Atom One (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/atom-one-dark.css?raw")
+    },
+    "atom one light": {
+        name: "Atom One (Light)",
+        load: () => import("../node_modules/highlight.js/styles/atom-one-light.css?raw")
+    },
+    "brown paper": {
+        name: "Brown Paper (Light)",
+        load: () => import("../node_modules/highlight.js/styles/brown-paper.css?raw")
+    },
+    "codepen embed": {
+        name: "CodePen Embed (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/codepen-embed.css?raw")
+    },
+    "color brewer": {
+        name: "Color Brewer (Light)",
+        load: () => import("../node_modules/highlight.js/styles/color-brewer.css?raw")
+    },
+    "cybertopia cherry": {
+        name: "Cybertopia Cherry (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/cybertopia-cherry.css?raw")
+    },
+    "cybertopia dimmer": {
+        name: "Cybertopia Dimmer (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/cybertopia-dimmer.css?raw")
+    },
+    "cybertopia icecap": {
+        name: "Cybertopia Icecap (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/cybertopia-icecap.css?raw")
+    },
+    "cybertopia saturated": {
+        name: "Cybertopia Saturated (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/cybertopia-saturated.css?raw")
+    },
+    "dark": {
+        name: "Dark",
+        load: () => import("../node_modules/highlight.js/styles/dark.css?raw")
+    },
+    "default": {
+        name: "Original highlight.js Theme (Light)",
+        load: () => import("../node_modules/highlight.js/styles/default.css?raw")
+    },
+    "devibeans": {
+        name: "devibeans (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/devibeans.css?raw")
+    },
+    "docco": {
+        name: "Docco (Light)",
+        load: () => import("../node_modules/highlight.js/styles/docco.css?raw")
+    },
+    "far": {
+        name: "FAR (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/far.css?raw")
+    },
+    "felipec": {
+        name: "FelipeC (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/felipec.css?raw")
+    },
+    "foundation": {
+        name: "Foundation 4 Docs (Light)",
+        load: () => import("../node_modules/highlight.js/styles/foundation.css?raw")
+    },
+    "github dark dimmed": {
+        name: "GitHub Dimmed (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/github-dark-dimmed.css?raw")
+    },
+    "github dark": {
+        name: "GitHub (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/github-dark.css?raw")
+    },
+    "github": {
+        name: "GitHub (Light)",
+        load: () => import("../node_modules/highlight.js/styles/github.css?raw")
+    },
+    "gml": {
+        name: "GML (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/gml.css?raw")
+    },
+    "googlecode": {
+        name: "Google Code (Light)",
+        load: () => import("../node_modules/highlight.js/styles/googlecode.css?raw")
+    },
+    "gradient dark": {
+        name: "Gradient (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/gradient-dark.css?raw")
+    },
+    "gradient light": {
+        name: "Gradient (Light)",
+        load: () => import("../node_modules/highlight.js/styles/gradient-light.css?raw")
+    },
+    "grayscale": {
+        name: "Grayscale (Light)",
+        load: () => import("../node_modules/highlight.js/styles/grayscale.css?raw")
+    },
+    "hybrid": {
+        name: "hybrid (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/hybrid.css?raw")
+    },
+    "idea": {
+        name: "Idea (Light)",
+        load: () => import("../node_modules/highlight.js/styles/idea.css?raw")
+    },
+    "intellij light": {
+        name: "IntelliJ (Light)",
+        load: () => import("../node_modules/highlight.js/styles/intellij-light.css?raw")
+    },
+    "ir black": {
+        name: "IR Black (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/ir-black.css?raw")
+    },
+    "isbl editor dark": {
+        name: "ISBL Editor (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/isbl-editor-dark.css?raw")
+    },
+    "isbl editor light": {
+        name: "ISBL Editor (Light)",
+        load: () => import("../node_modules/highlight.js/styles/isbl-editor-light.css?raw")
+    },
+    "kimbie dark": {
+        name: "Kimbie (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/kimbie-dark.css?raw")
+    },
+    "kimbie light": {
+        name: "Kimbie (Light)",
+        load: () => import("../node_modules/highlight.js/styles/kimbie-light.css?raw")
+    },
+    "lightfair": {
+        name: "Lightfair (Light)",
+        load: () => import("../node_modules/highlight.js/styles/lightfair.css?raw")
+    },
+    "lioshi": {
+        name: "Lioshi (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/lioshi.css?raw")
+    },
+    "magula": {
+        name: "Magula (Light)",
+        load: () => import("../node_modules/highlight.js/styles/magula.css?raw")
+    },
+    "mono blue": {
+        name: "Mono Blue (Light)",
+        load: () => import("../node_modules/highlight.js/styles/mono-blue.css?raw")
+    },
+    "monokai sublime": {
+        name: "Monokai Sublime (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/monokai-sublime.css?raw")
+    },
+    "monokai": {
+        name: "Monokai (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/monokai.css?raw")
+    },
+    "night owl": {
+        name: "Night Owl (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/night-owl.css?raw")
+    },
+    "nnfx dark": {
+        name: "NNFX (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/nnfx-dark.css?raw")
+    },
+    "nnfx light": {
+        name: "NNFX (Light)",
+        load: () => import("../node_modules/highlight.js/styles/nnfx-light.css?raw")
+    },
+    "nord": {
+        name: "Nord (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/nord.css?raw")
+    },
+    "obsidian": {
+        name: "Obsidian (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/obsidian.css?raw")
+    },
+    "panda syntax dark": {
+        name: "Panda (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/panda-syntax-dark.css?raw")
+    },
+    "panda syntax light": {
+        name: "Panda (Light)",
+        load: () => import("../node_modules/highlight.js/styles/panda-syntax-light.css?raw")
+    },
+    "paraiso dark": {
+        name: "Paraiso (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/paraiso-dark.css?raw")
+    },
+    "paraiso light": {
+        name: "Paraiso (Light)",
+        load: () => import("../node_modules/highlight.js/styles/paraiso-light.css?raw")
+    },
+    "pojoaque": {
+        name: "Pojoaque (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/pojoaque.css?raw")
+    },
+    "purebasic": {
+        name: "PureBasic (Light)",
+        load: () => import("../node_modules/highlight.js/styles/purebasic.css?raw")
+    },
+    "qtcreator dark": {
+        name: "Qt Creator (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/qtcreator-dark.css?raw")
+    },
+    "qtcreator light": {
+        name: "Qt Creator (Light)",
+        load: () => import("../node_modules/highlight.js/styles/qtcreator-light.css?raw")
+    },
+    "rainbow": {
+        name: "Rainbow (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/rainbow.css?raw")
+    },
+    "routeros": {
+        name: "RouterOS Script (Light)",
+        load: () => import("../node_modules/highlight.js/styles/routeros.css?raw")
+    },
+    "rose pine dawn": {
+        name: "Rose Pine Dawn (Light)",
+        load: () => import("../node_modules/highlight.js/styles/rose-pine-dawn.css?raw")
+    },
+    "rose pine moon": {
+        name: "Rose Pine Moon (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/rose-pine-moon.css?raw")
+    },
+    "rose pine": {
+        name: "Rose Pine (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/rose-pine.css?raw")
+    },
+    "school book": {
+        name: "School Book (Light)",
+        load: () => import("../node_modules/highlight.js/styles/school-book.css?raw")
+    },
+    "shades of purple": {
+        name: "Shades of Purple (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/shades-of-purple.css?raw")
+    },
+    "srcery": {
+        name: "Srcery (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/srcery.css?raw")
+    },
+    "stackoverflow dark": {
+        name: "Stack Overflow (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/stackoverflow-dark.css?raw")
+    },
+    "stackoverflow light": {
+        name: "Stack Overflow (Light)",
+        load: () => import("../node_modules/highlight.js/styles/stackoverflow-light.css?raw")
+    },
+    "sunburst": {
+        name: "Sunburst (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/sunburst.css?raw")
+    },
+    "tokyo night dark": {
+        name: "Tokyo Night (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/tokyo-night-dark.css?raw")
+    },
+    "tokyo night light": {
+        name: "Tokyo Night (Light)",
+        load: () => import("../node_modules/highlight.js/styles/tokyo-night-light.css?raw")
+    },
+    "tomorrow night blue": {
+        name: "Tomorrow Night Blue (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/tomorrow-night-blue.css?raw")
+    },
+    "tomorrow night bright": {
+        name: "Tomorrow Night Bright (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/tomorrow-night-bright.css?raw")
+    },
+    "vs": {
+        name: "Visual Studio (Light)",
+        load: () => import("../node_modules/highlight.js/styles/vs.css?raw")
+    },
+    "vs2015": {
+        name: "Visual Studio 2015 (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/vs2015.css?raw")
+    },
+    "xcode": {
+        name: "Xcode (Light)",
+        load: () => import("../node_modules/highlight.js/styles/xcode.css?raw")
+    },
+    "xt256": {
+        name: "xt256 (Dark)",
+        load: () => import("../node_modules/highlight.js/styles/xt256.css?raw")
+    }
 }
 
 export default themeDefinitions;