woj/woj-ui-2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: separate Highlight from Markdown

Browse Source
This commit is contained in:
Paul Pan 2024-03-16 20:43:31 +08:00
parent 9c7dbd5a34
commit d6810f1867
2 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Highlight.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Code, useColorModeValue } from "@chakra-ui/react";
import { Highlight as PrismHighlight, themes } from "prism-react-renderer";
interface HighlightProps {
lang: string;
code: string;
}
export default function Highlight(props: HighlightProps) {
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
return (
<PrismHighlight language={props.lang} code={props.code} theme={codeTheme}>
{({ style, tokens, getLineProps, getTokenProps }) => (
<Code
padding={2}
rounded="md"
display="block"
whiteSpace="pre"
backgroundColor={style.backgroundColor}
overflow="auto"
>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</Code>
)}
</PrismHighlight>
);
}

31
src/components/Markdown.tsx
View File

@ -1,6 +1,6 @@
import { Code, useColorModeValue } from "@chakra-ui/react";
import { lazy } from "react";
import { Code } from "@chakra-ui/react";
import ReactMarkdown from "react-markdown";
import { Highlight, themes } from "prism-react-renderer";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
@ -11,13 +11,13 @@ import rehypeMathJaxSvg from "rehype-mathjax";
import "github-markdown-css";
import "./Markdown.css";
const Highlight = lazy(() => import("./Highlight"));
interface MarkdownProps {
markdown: string;
}
export default function Markdown(props: MarkdownProps) {
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
const remarkPlugins = [remarkGfm, emoji, remarkMath];
const rehypePlugins = [rehypeRaw, rehypeMathJaxSvg];
@ -34,28 +34,7 @@ export default function Markdown(props: MarkdownProps) {
const lang = (match || ["", "text"])[1];
const code = String(children).replace(/\n$/, "");
const codeBlock = (
<Highlight language={lang} code={code} theme={codeTheme}>
{({ style, tokens, getLineProps, getTokenProps }) => (
<Code
padding={2}
rounded="md"
display="block"
whiteSpace="pre"
backgroundColor={style.backgroundColor}
overflow="auto"
>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</Code>
)}
</Highlight>
);
const codeBlock = <Highlight lang={lang} code={code} />;
const codeInline = <Code>{children}</Code>;
return !inline && match ? codeBlock : codeInline;
},