Open onmyway133 opened 1 year ago
Use react-markdown to parse markdown content, react-syntax-highlighter to highlight code, and rehype-raw to parse raw html
react-syntax-highlighter
rehype-raw
import ReactMarkdown from "react-markdown" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism" import rehypeRaw from "rehype-raw" type Props = { content: string } export default (props: Props) => { return ( <div className="markdown-body"> <ReactMarkdown children={props.content} rehypePlugins={[rehypeRaw]} components={{ code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/.exec(className || "") return !inline && match ? ( <SyntaxHighlighter {...props} children={String(children).replace(/\n$/, "")} style={oneDark} language={match[1]} PreTag="div" /> ) : ( <code {...props} className={className}> {children} </code> ) }, }} /> </div> ) }
Use react-markdown to parse markdown content,
react-syntax-highlighter
to highlight code, andrehype-raw
to parse raw html