chore: separate Highlight from Markdown
This commit is contained in:
parent
9c7dbd5a34
commit
d6810f1867
34
src/components/Highlight.tsx
Normal file
34
src/components/Highlight.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
@ -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 ReactMarkdown from "react-markdown";
|
||||||
import { Highlight, themes } from "prism-react-renderer";
|
|
||||||
|
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import remarkMath from "remark-math";
|
import remarkMath from "remark-math";
|
||||||
@ -11,13 +11,13 @@ import rehypeMathJaxSvg from "rehype-mathjax";
|
|||||||
import "github-markdown-css";
|
import "github-markdown-css";
|
||||||
import "./Markdown.css";
|
import "./Markdown.css";
|
||||||
|
|
||||||
|
const Highlight = lazy(() => import("./Highlight"));
|
||||||
|
|
||||||
interface MarkdownProps {
|
interface MarkdownProps {
|
||||||
markdown: string;
|
markdown: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Markdown(props: MarkdownProps) {
|
export default function Markdown(props: MarkdownProps) {
|
||||||
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
|
|
||||||
|
|
||||||
const remarkPlugins = [remarkGfm, emoji, remarkMath];
|
const remarkPlugins = [remarkGfm, emoji, remarkMath];
|
||||||
const rehypePlugins = [rehypeRaw, rehypeMathJaxSvg];
|
const rehypePlugins = [rehypeRaw, rehypeMathJaxSvg];
|
||||||
|
|
||||||
@ -34,28 +34,7 @@ export default function Markdown(props: MarkdownProps) {
|
|||||||
const lang = (match || ["", "text"])[1];
|
const lang = (match || ["", "text"])[1];
|
||||||
const code = String(children).replace(/\n$/, "");
|
const code = String(children).replace(/\n$/, "");
|
||||||
|
|
||||||
const codeBlock = (
|
const codeBlock = <Highlight lang={lang} code={code} />;
|
||||||
<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 codeInline = <Code>{children}</Code>;
|
const codeInline = <Code>{children}</Code>;
|
||||||
return !inline && match ? codeBlock : codeInline;
|
return !inline && match ? codeBlock : codeInline;
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user