mirror of
https://litchi.icu/ngc2207/judge.git
synced 2025-05-18 22:56:33 +00:00
feat: add support for C, C++, and Java languages with corresponding configurations and UI components
This commit is contained in:
parent
2060ffe184
commit
93d8e592cc
Binary file not shown.
@ -10,8 +10,13 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.2",
|
||||
"@radix-ui/react-select": "^2.1.4",
|
||||
"@radix-ui/react-tabs": "^1.1.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"devicons-react": "^1.4.0",
|
||||
"lucide-react": "^0.469.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
@ -20,6 +25,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@shikijs/monaco": "^1.26.1",
|
||||
"@types/node": "^22.10.5",
|
||||
"@types/react": "^18.3.18",
|
||||
"@types/react-dom": "^18.3.5",
|
||||
@ -30,6 +36,7 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.14.0",
|
||||
"postcss": "^8.4.49",
|
||||
"shiki": "^1.26.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.6.2",
|
||||
"typescript-eslint": "^8.18.2",
|
||||
|
||||
@ -1,5 +1,80 @@
|
||||
import {
|
||||
DEFAULT_FILES,
|
||||
DEFAULT_EDITOR_THEME,
|
||||
DEFAULT_EDITOR_LANGUAGE,
|
||||
} from "@/config";
|
||||
import { useState } from "react";
|
||||
import { highlighter } from "@/lib/shiki";
|
||||
import { Bot, CodeXml } from "lucide-react";
|
||||
import { shikiToMonaco } from "@shikijs/monaco";
|
||||
import { DiffEditor, Editor, Monaco } from "@monaco-editor/react";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
function App() {
|
||||
return null;
|
||||
const [language, setLanguage] = useState(DEFAULT_EDITOR_LANGUAGE);
|
||||
const [theme, setTheme] = useState(DEFAULT_EDITOR_THEME);
|
||||
const file = DEFAULT_FILES[language];
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-[#282c34] dark overflow-hidden">
|
||||
<Tabs defaultValue="code-editor" className="h-full pt-2">
|
||||
<ScrollArea>
|
||||
<TabsList className="gap-1 bg-transparent px-4">
|
||||
<TabsTrigger
|
||||
value="code-editor"
|
||||
className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
|
||||
>
|
||||
<CodeXml
|
||||
className="-ms-0.5 me-1.5 opacity-60"
|
||||
size={16}
|
||||
strokeWidth={2}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Code
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="diff-editor"
|
||||
className="500 rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
|
||||
>
|
||||
<Bot
|
||||
className="-ms-0.5 me-1.5 opacity-60"
|
||||
size={16}
|
||||
strokeWidth={2}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
AI Assistant
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
<TabsContent value="code-editor" className="h-full">
|
||||
<Editor
|
||||
theme={theme}
|
||||
path={file.path}
|
||||
defaultLanguage={file.language}
|
||||
defaultValue={file.value}
|
||||
options={{ automaticLayout: true, minimap: { enabled: false } }}
|
||||
beforeMount={(monaco: Monaco) => {
|
||||
shikiToMonaco(highlighter, monaco);
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="diff-editor" className="h-full">
|
||||
<DiffEditor
|
||||
theme={theme}
|
||||
language={file.language}
|
||||
original={file.value}
|
||||
modified={file.value}
|
||||
options={{ automaticLayout: true, minimap: { enabled: false } }}
|
||||
beforeMount={(monaco: Monaco) => {
|
||||
shikiToMonaco(highlighter, monaco);
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
46
code-editor/src/components/ui/scroll-area.tsx
Normal file
46
code-editor/src/components/ui/scroll-area.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("relative overflow-hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
))
|
||||
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||
|
||||
const ScrollBar = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
ref={ref}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
))
|
||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
157
code-editor/src/components/ui/select.tsx
Normal file
157
code-editor/src/components/ui/select.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
53
code-editor/src/components/ui/tabs.tsx
Normal file
53
code-editor/src/components/ui/tabs.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
43
code-editor/src/config/index.ts
Normal file
43
code-editor/src/config/index.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { SupportedEditorLanguage } from "@/constants/languages";
|
||||
|
||||
export const DEFAULT_EDITOR_THEME = "vitesse-dark";
|
||||
|
||||
export const DEFAULT_EDITOR_LANGUAGE: SupportedEditorLanguage = "c";
|
||||
|
||||
export const DEFAULT_FILES: Record<
|
||||
SupportedEditorLanguage,
|
||||
{
|
||||
path: string;
|
||||
language: SupportedEditorLanguage;
|
||||
value: string;
|
||||
}
|
||||
> = {
|
||||
c: {
|
||||
path: "playground/main.c",
|
||||
language: "c",
|
||||
value: `#include <stdio.h>
|
||||
int main() {
|
||||
printf("Hello, World!");
|
||||
return 0;
|
||||
}`,
|
||||
},
|
||||
cpp: {
|
||||
path: "playground/main.cpp",
|
||||
language: "cpp",
|
||||
value: `#include <iostream>
|
||||
using namespace std;
|
||||
int main() {
|
||||
cout << "Hello, World!";
|
||||
return 0;
|
||||
}`,
|
||||
},
|
||||
java: {
|
||||
path: "playground/Main.java",
|
||||
language: "java",
|
||||
value: `public class Main {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello, World!");
|
||||
}
|
||||
}`,
|
||||
},
|
||||
};
|
||||
24
code-editor/src/constants/languages.ts
Normal file
24
code-editor/src/constants/languages.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
|
||||
|
||||
export const SUPPORTED_EDITOR_LANGUAGES = ["c", "cpp", "java"];
|
||||
|
||||
export const SUPPORTED_EDITOR_LANGUAGES_CONFIG = {
|
||||
c: {
|
||||
id: "c",
|
||||
label: "C",
|
||||
icon: COriginal,
|
||||
},
|
||||
cpp: {
|
||||
id: "cpp",
|
||||
label: "C++",
|
||||
icon: CplusplusOriginal,
|
||||
},
|
||||
java: {
|
||||
id: "java",
|
||||
label: "Java",
|
||||
icon: JavaOriginal,
|
||||
},
|
||||
};
|
||||
|
||||
export type SupportedEditorLanguage =
|
||||
(typeof SUPPORTED_EDITOR_LANGUAGES)[number];
|
||||
202
code-editor/src/constants/themes.ts
Normal file
202
code-editor/src/constants/themes.ts
Normal file
@ -0,0 +1,202 @@
|
||||
export const SUPPORTED_EDITOR_THEMES = [
|
||||
{
|
||||
id: "andromeeda",
|
||||
label: "Andromeeda",
|
||||
},
|
||||
{
|
||||
id: "aurora-x",
|
||||
label: "Aurora X",
|
||||
},
|
||||
{
|
||||
id: "ayu-dark",
|
||||
label: "Ayu Dark",
|
||||
},
|
||||
{
|
||||
id: "catppuccin-frappe",
|
||||
label: "Catppuccin Frappé",
|
||||
},
|
||||
{
|
||||
id: "catppuccin-latte",
|
||||
label: "Catppuccin Latte",
|
||||
},
|
||||
{
|
||||
id: "catppuccin-macchiato",
|
||||
label: "Catppuccin Macchiato",
|
||||
},
|
||||
{
|
||||
id: "catppuccin-mocha",
|
||||
label: "Catppuccin Mocha",
|
||||
},
|
||||
{
|
||||
id: "dark-plus",
|
||||
label: "Dark Plus",
|
||||
},
|
||||
{
|
||||
id: "dracula",
|
||||
label: "Dracula",
|
||||
},
|
||||
{
|
||||
id: "dracula-soft",
|
||||
label: "Dracula Soft",
|
||||
},
|
||||
{
|
||||
id: "everforest-dark",
|
||||
label: "Everforest Dark",
|
||||
},
|
||||
{
|
||||
id: "everforest-light",
|
||||
label: "Everforest Light",
|
||||
},
|
||||
{
|
||||
id: "github-dark",
|
||||
label: "GitHub Dark",
|
||||
},
|
||||
{
|
||||
id: "github-light",
|
||||
label: "GitHub Light",
|
||||
},
|
||||
{
|
||||
id: "github-light-default",
|
||||
label: "GitHub Light Default",
|
||||
},
|
||||
{
|
||||
id: "github-light-high-contrast",
|
||||
label: "GitHub Light High Contrast",
|
||||
},
|
||||
{
|
||||
id: "houston",
|
||||
label: "Houston",
|
||||
},
|
||||
{
|
||||
id: "kanagawa-dragon",
|
||||
label: "Kanagawa Dragon",
|
||||
},
|
||||
{
|
||||
id: "kanagawa-lotus",
|
||||
label: "Kanagawa Lotus",
|
||||
},
|
||||
{
|
||||
id: "kanagawa-wave",
|
||||
label: "Kanagawa Wave",
|
||||
},
|
||||
{
|
||||
id: "laserwave",
|
||||
label: "Laserwave",
|
||||
},
|
||||
{
|
||||
id: "light-plus",
|
||||
label: "Light Plus",
|
||||
},
|
||||
{
|
||||
id: "material-theme",
|
||||
label: "Material Theme",
|
||||
},
|
||||
{
|
||||
id: "material-theme-darker",
|
||||
label: "Material Theme Darker",
|
||||
},
|
||||
{
|
||||
id: "material-theme-lighter",
|
||||
label: "Material Theme Lighter",
|
||||
},
|
||||
{
|
||||
id: "material-theme-ocean",
|
||||
label: "Material Theme Ocean",
|
||||
},
|
||||
{
|
||||
id: "material-theme-palenight",
|
||||
label: "Material Theme Palenight",
|
||||
},
|
||||
{
|
||||
id: "min-dark",
|
||||
label: "Min Dark",
|
||||
},
|
||||
{
|
||||
id: "min-light",
|
||||
label: "Min Light",
|
||||
},
|
||||
{
|
||||
id: "monokai",
|
||||
label: "Monokai",
|
||||
},
|
||||
{
|
||||
id: "night-owl",
|
||||
label: "Night Owl",
|
||||
},
|
||||
{
|
||||
id: "nord",
|
||||
label: "Nord",
|
||||
},
|
||||
{
|
||||
id: "one-dark-pro",
|
||||
label: "One Dark Pro",
|
||||
},
|
||||
{
|
||||
id: "one-light",
|
||||
label: "One Light",
|
||||
},
|
||||
{
|
||||
id: "plastic",
|
||||
label: "Plastic",
|
||||
},
|
||||
{
|
||||
id: "poimandres",
|
||||
label: "Poimandres",
|
||||
},
|
||||
{
|
||||
id: "red",
|
||||
label: "Red",
|
||||
},
|
||||
{
|
||||
id: "rose-pine",
|
||||
label: "Rosé Pine",
|
||||
},
|
||||
{
|
||||
id: "rose-pine-dawn",
|
||||
label: "Rosé Pine Dawn",
|
||||
},
|
||||
{
|
||||
id: "rose-pine-moon",
|
||||
label: "Rosé Pine Moon",
|
||||
},
|
||||
{
|
||||
id: "slack-dark",
|
||||
label: "Slack Dark",
|
||||
},
|
||||
{
|
||||
id: "slack-ochin",
|
||||
label: "Slack Ochin",
|
||||
},
|
||||
{
|
||||
id: "snazzy-light",
|
||||
label: "Snazzy Light",
|
||||
},
|
||||
{
|
||||
id: "solarized-dark",
|
||||
label: "Solarized Dark",
|
||||
},
|
||||
{
|
||||
id: "solarized-light",
|
||||
label: "Solarized Light",
|
||||
},
|
||||
{
|
||||
id: "synthwave-84",
|
||||
label: "Synthwave '84",
|
||||
},
|
||||
{
|
||||
id: "tokyo-night",
|
||||
label: "Tokyo Night",
|
||||
},
|
||||
{
|
||||
id: "vitesse-black",
|
||||
label: "Vitesse Black",
|
||||
},
|
||||
{
|
||||
id: "vitesse-dark",
|
||||
label: "Vitesse Dark",
|
||||
},
|
||||
{
|
||||
id: "vitesse-light",
|
||||
label: "Vitesse Light",
|
||||
},
|
||||
];
|
||||
16
code-editor/src/lib/shiki.ts
Normal file
16
code-editor/src/lib/shiki.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { createHighlighter } from "shiki";
|
||||
import { SUPPORTED_EDITOR_THEMES } from "@/constants/themes";
|
||||
import { SUPPORTED_EDITOR_LANGUAGES_CONFIG } from "@/constants/languages";
|
||||
|
||||
const SUPPORTED_EDITOR_THEMES_ID = SUPPORTED_EDITOR_THEMES.map(
|
||||
(theme) => theme.id
|
||||
);
|
||||
|
||||
const SUPPORTED_EDITOR_LANGUAGES_ID = Object.values(
|
||||
SUPPORTED_EDITOR_LANGUAGES_CONFIG
|
||||
).map((language: { id: string }) => language.id);
|
||||
|
||||
export const highlighter = await createHighlighter({
|
||||
themes: SUPPORTED_EDITOR_THEMES_ID,
|
||||
langs: SUPPORTED_EDITOR_LANGUAGES_ID,
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user