CoastalCommitsPastes/client/components/preview/react-markdown-preview.tsx

63 lines
2.5 KiB
TypeScript
Raw Normal View History

import remarkGfm from "remark-gfm"
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-async-light';
import rehypeSlug from 'rehype-slug'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeRaw from 'rehype-raw'
// @ts-ignore because of no types in remark-a11y-emoji
2022-03-21 18:55:21 -04:00
// import a11yEmoji from '@fec/remark-a11y-emoji';
import styles from './preview.module.css'
2022-03-21 18:55:21 -04:00
import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus'
import light from 'react-syntax-highlighter/dist/cjs/styles/prism/vs'
2022-03-12 23:40:28 -05:00
import useSharedState from "@lib/hooks/use-shared-state";
import ReactMarkdown from "react-markdown";
type Props = {
content: string | undefined
height: number | string
}
const ReactMarkdownPreview = ({ content, height }: Props) => {
const [themeType] = useSharedState<string>('theme')
return (<div style={{ height }}>
<ReactMarkdown className={styles.markdownPreview}
2022-03-21 18:55:21 -04:00
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }], rehypeRaw]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline && match ? (
<SyntaxHighlighter
lineNumberStyle={{
2022-03-09 20:11:37 -05:00
minWidth: "2.25rem"
}}
customStyle={{
padding: 0,
margin: 0,
background: 'transparent'
}}
codeTagProps={{
2022-03-20 23:45:37 -04:00
style: { background: 'transparent', color: 'inherit' }
}}
style={themeType === 'dark' ? dark : light}
showLineNumbers={true}
language={match[1]}
PreTag="div"
{...props}
>{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
)
}
}}>
{content || ""}
</ReactMarkdown></div>)
}
export default ReactMarkdownPreview