From 5c82d48f44a70dfd14bafdcf4702a112fa7fa8d7 Mon Sep 17 00:00:00 2001
From: Marco Kutscha <kutscha.marco@gmail.com>
Date: Sat, 24 Feb 2024 12:58:41 +0100
Subject: [PATCH] [Feat] Added support for custom highlight themes

---
 README.md                               |  1 +
 lua/codesnap/static.lua                 |  1 +
 snap-client/src/app.tsx                 | 13 +++++++++++++
 snap-client/src/hooks/use-config.ts     |  1 +
 snap-client/src/index.tsx               |  1 -
 snap-server/src/event_handler/config.rs |  1 +
 6 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ebb3d37..2c5431e 100644
--- a/README.md
+++ b/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
 }
 ```
 
diff --git a/lua/codesnap/static.lua b/lua/codesnap/static.lua
index 72b53de..b149ac0 100644
--- a/lua/codesnap/static.lua
+++ b/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("(.*[/\\])"))),
diff --git a/snap-client/src/app.tsx b/snap-client/src/app.tsx
index 2c49f3d..ebb7e35 100644
--- a/snap-client/src/app.tsx
+++ b/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">
diff --git a/snap-client/src/hooks/use-config.ts b/snap-client/src/hooks/use-config.ts
index d544522..fd36d4d 100644
--- a/snap-client/src/hooks/use-config.ts
+++ b/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";
diff --git a/snap-client/src/index.tsx b/snap-client/src/index.tsx
index 54831f6..2f8febf 100644
--- a/snap-client/src/index.tsx
+++ b/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";
 
diff --git a/snap-server/src/event_handler/config.rs b/snap-server/src/event_handler/config.rs
index cbfbbf2..0e1a08b 100644
--- a/snap-server/src/event_handler/config.rs
+++ b/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 {