1
0
Fork 0

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

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

* [Update] README
feature/custom-highlight-themes
Mist 2024-02-24 19:01:39 +08:00 committed by GitHub
parent 7963b3f2cc
commit 749e8ba996
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 34 additions and 9 deletions

View File

@ -59,8 +59,10 @@ There is a default config:
{ {
mac_window_bar = true,-- (Optional) MacOS style title bar switch 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 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 "" 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 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
} }
``` ```

View File

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

View File

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

View File

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

View File

@ -1,15 +1,23 @@
import { forwardRef, PropsWithChildren } from "react"; import { forwardRef, PropsWithChildren } from "react";
const DEFAULT_WATERMARK_FONT_FAMILY = "Pacifico";
export interface FrameProps { export interface FrameProps {
watermark?: string; watermark?: string;
watermarkFontFamily?: string;
} }
export const Frame = forwardRef<HTMLDivElement, PropsWithChildren<FrameProps>>( 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"> <div ref={ref} className="bg-relay min-w-[800px] p-20">
{children} {children}
{watermark && ( {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} {watermark}
</p> </p>
)} )}

View File

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

View File

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

View File

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