p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add SyntaxHighlighter instead of deprecated Highlight

Browse Source
This commit is contained in:
p-sw 2024-06-04 22:40:11 +09:00
parent b17b5ad0f9
commit 6d1732d049
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react/src/components/LoadedCode.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Highlight from "react-highlight"; import SyntaxHighlighter from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { Button } from "@components/Button"; import { Button } from "@components/Button";
import { useToast } from "@components/Toast"; import { useToast } from "@components/Toast";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
@ -59,13 +60,14 @@ export const LoadedCode = ({
/> />
</svg> </svg>
</Button> </Button>
<Highlight <SyntaxHighlighter
className={`w-full h-64 rounded-lg language-tsx ${ language="typescript"
!state ? "animate-pulse" : "" style={gruvboxDark}
}`} className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`}
customStyle={{ padding: "1rem" }}
> >
{state ?? ""} {state ?? ""}
</Highlight> </SyntaxHighlighter>
</div> </div>
); );
}; };