mirror of
https://github.com/mistricky/codesnap.nvim.git
synced 2024-12-27 11:56:30 +00:00
[Feat] support custom font-family for watermark and code (#21)
* [Feat] support custom font-family for watermark and code * [Update] README
This commit is contained in:
parent
7963b3f2cc
commit
749e8ba996
8 changed files with 34 additions and 9 deletions
|
@ -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
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
@ -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("(.*[/\\])"))),
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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),
|
||||
}}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue