49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { serialize } from "next-mdx-remote/serialize";
|
|
import remarkGfm from "remark-gfm";
|
|
import rehypePrismPlus from "rehype-prism-plus";
|
|
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
|
import { useMDXComponents } from "../mdx/mdx-components";
|
|
|
|
export const TWUIPrismLanguages = ["shell", "javascript"] as const;
|
|
|
|
type Props = {
|
|
content: string;
|
|
};
|
|
|
|
/**
|
|
* # CodeBlock
|
|
*
|
|
* @className `twui-remote-code-block-wrapper`
|
|
*/
|
|
export default function RemoteCodeBlock({ content }: Props) {
|
|
const [mdxSource, setMdxSource] =
|
|
React.useState<MDXRemoteSerializeResult<any>>();
|
|
|
|
const { components } = useMDXComponents();
|
|
|
|
React.useEffect(() => {
|
|
serialize(content, {
|
|
mdxOptions: {
|
|
remarkPlugins: [remarkGfm],
|
|
rehypePlugins: [rehypePrismPlus],
|
|
},
|
|
}).then((mdxSrc) => {
|
|
setMdxSource(mdxSrc);
|
|
});
|
|
}, []);
|
|
|
|
if (!mdxSource) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<MDXRemote
|
|
{...mdxSource}
|
|
components={{
|
|
...components,
|
|
}}
|
|
/>
|
|
);
|
|
}
|