How to render markdown view with React

Issue #914

Use react-markdown to parse markdown content, react-syntax-highlighter to highlight code, and rehype-raw to parse raw html

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>
    )
}