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 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 { useToast } from "@components/Toast";
import { twMerge } from "tailwind-merge";
@ -59,13 +60,14 @@ export const LoadedCode = ({
/>
</svg>
</Button>
<Highlight
className={`w-full h-64 rounded-lg language-tsx ${
!state ? "animate-pulse" : ""
}`}
<SyntaxHighlighter
language="typescript"
style={gruvboxDark}
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`}
customStyle={{ padding: "1rem" }}
>
{state ?? ""}
</Highlight>
</SyntaxHighlighter>
</div>
);
};