chore: markdown

src/components/Markdown/index.scss

@@ -0,0 +1,7 @@
+.markdown-body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+
+  pre, code {
+    font-family: monospace, monospace;
+  }
+}

src/components/Markdown/index.tsx

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import agate from 'react-syntax-highlighter/dist/esm/styles/hljs/agate';
+
+import './index.scss';
+
+interface MarkdownProps {
+  children: string;
+}
+
+const Markdown: FC<MarkdownProps> = ({ children }) => {
+
+  return (
+    <div className='markdown-body'>
+      <ReactMarkdown
+        children={children}
+        linkTarget="_blank"
+        components={{
+          code({node, inline, className, children, ...props}) {
+            const match = /language-(\w+)/.exec(className || '')
+            return !inline && match ? (
+              <SyntaxHighlighter
+                children={String(children).replace(/\n$/, '')}
+                style={agate as any}
+                language={match[1]}
+                showLineNumbers
+                lineNumberStyle={{ color: '#999' }}
+                PreTag="div"
+                {...props}
+              />
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            )
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+export default Markdown;