|
1 | 1 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; |
2 | | -import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"; |
| 2 | +import { oneDark,oneLight } from "react-syntax-highlighter/dist/esm/styles/prism"; |
3 | 3 | import CopyToClipboard from "./CopyToClipboard"; |
| 4 | +import { useEffect, useState } from "react"; |
4 | 5 |
|
5 | 6 | type Props = { |
6 | 7 | language: string; |
7 | 8 | code: string[]; |
8 | 9 | }; |
9 | 10 |
|
10 | 11 | const CodePreview = ({ language = "markdown", code }: Props) => { |
11 | | - const codeString = code.join("\n"); |
| 12 | + const [theme, setTheme] = useState<"dark" | "light">("dark"); |
| 13 | + |
| 14 | + useEffect(() => { |
| 15 | + const handleThemeChange = () => { |
| 16 | + const newTheme = document.documentElement.getAttribute("data-theme") as "dark" | "light"; |
| 17 | + setTheme(newTheme || "dark"); |
| 18 | + }; |
| 19 | + |
| 20 | + handleThemeChange(); |
| 21 | + const observer = new MutationObserver(handleThemeChange); |
| 22 | + observer.observe(document.documentElement, { |
| 23 | + attributes: true, |
| 24 | + attributeFilter: ["data-theme"], |
| 25 | + }); |
| 26 | + |
| 27 | + return () => observer.disconnect(); |
| 28 | + }, []); |
12 | 29 |
|
13 | 30 | return ( |
14 | 31 | <div className="code-preview"> |
15 | | - <CopyToClipboard text={codeString} className="modal__copy" /> |
| 32 | + <CopyToClipboard text={code.join("\n")} className="modal__copy" /> |
16 | 33 | <SyntaxHighlighter |
17 | 34 | language={language} |
18 | | - style={oneDark} |
| 35 | + style={theme==="dark" ? oneDark : oneLight} |
19 | 36 | wrapLines={true} |
20 | 37 | customStyle={{ margin: "0", maxHeight: "20rem" }} |
21 | 38 | > |
22 | | - {codeString} |
| 39 | + {code.join("\n")} |
23 | 40 | </SyntaxHighlighter> |
24 | 41 | </div> |
25 | 42 | ); |
|
0 commit comments