[Feat] Added support for custom highlight themes

README.md

@@ -63,6 +63,7 @@ There is a default config:
     preview_title = "CodeSnap.nvim", -- (Optional) preview page title
     editor_font_family = "CaskaydiaCove Nerd Font", -- (Optional) preview code font family
     watermark_font_family = "Pacifico", -- (Optional) watermark font family
+    highlight_theme = "atom-one-dark", -- (Optional) theme for code highlights
 }
 ```
 

lua/codesnap/static.lua

@@ -8,6 +8,7 @@ return {
     preview_title = "CodeSnap.nvim",
     editor_font_family = "CaskaydiaCove Nerd Font",
     watermark_font_family = "Pacifico",
+    highlight_theme = "atom-one-dark",
     auto_load = true,
   },
   cwd = path_utils.back(path_utils.back(debug.getinfo(1, "S").source:sub(2):match("(.*[/\\])"))),

snap-client/src/app.tsx

@@ -9,6 +9,7 @@ import { getWebsocketHost } from "./utils";
 const CODE_EMPTY_PLACEHOLDER = `print "Hello, CodeSnap.nvim!"`;
 const WATER_MARK_PLACEHOLDER = "CodeSnap.nvim";
 const PREVIEW_TITLE_PLACEHOLDER = "CodeSnap.nvim";
+const DEFAULT_THEME = "atom-one-dark";
 
 function App() {
   const [socketUrl] = useState(`ws://${getWebsocketHost()}/ws`);
@@ -69,6 +70,18 @@ function App() {
     document.title = config?.preview_title ?? PREVIEW_TITLE_PLACEHOLDER;
   }, []);
 
+  useEffect(() => {
+    const theme = config?.highlight_theme ?? DEFAULT_THEME;
+    const cssLink = document.createElement("link");
+    cssLink.rel = "stylesheet";
+    cssLink.href = "https://cdn.jsdelivr.net/npm/highlight.js/styles/" + theme + ".css";
+    document.head.appendChild(cssLink);
+    return () => {
+      document.head.removeChild(cssLink);
+    };
+  }
+  , [config?.highlight_theme]);
+
   return (
     <div className="w-full h-full flex flex-col items-center bg-deep-gray">
       <p className="rainbow-text text-4xl font-extrabold mt-20">

snap-client/src/hooks/use-config.ts

@@ -8,6 +8,7 @@ export interface Config {
   preview_title: string;
   watermark_font_family: string;
   editor_font_family: string;
+  highlight_theme: string;
 }
 
 const CONFIG_STORAGE_KEY = "CONFIG_STORAGE_KEY";

snap-client/src/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./output.css";
-import "highlight.js/styles/atom-one-dark.css";
 import App from "./app";
 import reportWebVitals from "./reportWebVitals";
 

snap-server/src/event_handler/config.rs

@@ -9,6 +9,7 @@ pub struct Config {
     preview_title: String,
     watermark_font_family: String,
     editor_font_family: String,
+    highlight_theme: String,
 }
 
 impl From<&str> for Config {