[Feat] support custom font-family for watermark and code (#21)

* [Feat] support custom font-family for watermark and code

* [Update] README

README.md

@@ -59,8 +59,10 @@ There is a default config:
 {
     mac_window_bar = true,-- (Optional) MacOS style title bar switch
     opacity = true, -- (Optional) The code snap has some opacity by default, set it to false for 100% opacity 
-    watermark = "CodeSnap.nvim" -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
-    preview_title = "CodeSnap.nvim" -- (Optional) preview page title
+    watermark = "CodeSnap.nvim", -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
+    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
 }
 ```
 

lua/codesnap/static.lua

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

snap-client/src/app.tsx

@@ -84,9 +84,11 @@ function App() {
         <div id="frame" className="rounded-xl overflow-hidden">
           <Frame
             ref={frameRef}
+            watermarkFontFamily={config?.watermark_font_family}
             watermark={config?.watermark ?? WATER_MARK_PLACEHOLDER}
           >
             <Editor
+              codeFontFamily={config?.editor_font_family}
               language={event?.code?.language}
               macStyleTitleBar={config?.mac_window_bar}
             >

snap-client/src/components/editor/editor.tsx

@@ -5,16 +5,25 @@ export interface EditorProps {
   macStyleTitleBar?: boolean;
   language?: string;
   opacity?: boolean;
+  codeFontFamily?: string;
   children: string;
 }
 
+const DEFAULT_CODE_FONT_FAMILY = "CaskaydiaCove Nerd Font";
+const LSP_LANGUAGE_NAME_MAP: Record<string, string> = {
+  typescriptreact: "tsx",
+  javascriptreact: "jsx",
+};
+
 const highlightLanguage = (code: string, language?: string) => {
   if (!language) {
     return hljs.highlightAuto(code).value;
   }
 
   try {
-    return hljs.highlight(code, { language }).value;
+    return hljs.highlight(code, {
+      language: LSP_LANGUAGE_NAME_MAP[language] ?? language,
+    }).value;
   } catch {
     return hljs.highlightAuto(code).value;
   }
@@ -23,6 +32,7 @@ const highlightLanguage = (code: string, language?: string) => {
 export const Editor = ({
   children,
   language,
+  codeFontFamily,
   opacity = true,
   macStyleTitleBar = true,
 }: EditorProps) => (
@@ -33,6 +43,7 @@ export const Editor = ({
     <pre className="mt-4">
       <code
         className="code"
+        style={{ fontFamily: codeFontFamily ?? DEFAULT_CODE_FONT_FAMILY }}
         dangerouslySetInnerHTML={{
           __html: highlightLanguage(children, language),
         }}

snap-client/src/components/editor/frame.tsx

@@ -1,15 +1,23 @@
 import { forwardRef, PropsWithChildren } from "react";
 
+const DEFAULT_WATERMARK_FONT_FAMILY = "Pacifico";
+
 export interface FrameProps {
   watermark?: string;
+  watermarkFontFamily?: string;
 }
 
 export const Frame = forwardRef<HTMLDivElement, PropsWithChildren<FrameProps>>(
-  ({ children, watermark }, ref) => (
+  ({ children, watermark, watermarkFontFamily }, ref) => (
     <div ref={ref} className="bg-relay min-w-[800px] p-20">
       {children}
       {watermark && (
-        <p className="pacifico-regular text-xl opacity-50 font-bold text-white text-center w-full mt-14">
+        <p
+          style={{
+            fontFamily: watermarkFontFamily ?? DEFAULT_WATERMARK_FONT_FAMILY,
+          }}
+          className="text-xl opacity-50 font-bold text-white text-center w-full mt-14"
+        >
           {watermark}
         </p>
       )}

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

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

snap-client/src/input.css

@@ -22,10 +22,6 @@ html, body, #root {
     box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
   }
 
-  .code * {
-    font-family: 'CaskaydiaCove Nerd Font';
-  }
-
   .pacifico-regular {
     font-family: "Pacifico", cursive;
     font-weight: 400;

snap-server/src/event_handler/config.rs

@@ -7,6 +7,8 @@ pub struct Config {
     watermark: Option<String>,
     auto_load: bool,
     preview_title: String,
+    watermark_font_family: String,
+    editor_font_family: String,
 }
 
 impl From<&str> for Config {