feat: support syntax highlighting

1 files changed, 23 insertions, 0 deletions

diff --git a/src/Code.tsx b/src/Code.tsx
new file mode 100644
index 0000000..d715230
--- /dev/null
+++ b/src/Code.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { gruvboxDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+
+const Code: FC<any> = ({ node, inline, className, children, ...props }) => {
+  const match = /language-(\w+)/.exec(className || '')
+  return !inline && match ? (
+    <SyntaxHighlighter
+      style={gruvboxDark}
+      language={match[1]}
+      PreTag="div"
+      {...props}
+    >
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
+  ) : (
+      <code className={className} {...props}>
+        {children}
+      </code>
+  );
+}
+
+export default Code;