feat: react syntax highlighter (#34)

ntua-unit-of-control-and-informatics · Dec 19, 2024 · 5812a32 · 5812a32
1 parent 66ad11b
commit 5812a32
Show file tree

Hide file tree

Showing 4 changed files with 445 additions and 3 deletions.
diff --git a/.idea/aws.xml b/.idea/aws.xml
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -2,6 +2,8 @@ import type { MDXComponents } from 'mdx/types';
 import { Link } from '@nextui-org/react';
 import Image from 'next/image';
 import { ImageProps } from 'next/image';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -111,8 +113,22 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         </pre>
       );
     },
-    code({ children }) {
-      return <code style={{}}>{children}</code>;
+    code(props) {
+      const { children, className, ...rest } = props;
+      const match = /language-(\w+)/.exec(className || '');
+      return match ? (
+        <SyntaxHighlighter
+          PreTag="div"
+          // eslint-disable-next-line react/no-children-prop
+          children={String(children).replace(/\n$/, '')}
+          language={match[1]}
+          style={materialDark}
+        />
+      ) : (
+        <code {...rest} className={className}>
+          {children}
+        </code>
+      );
     },
     ...components,
   };