inline code styles

src/components/MDXComponents.tsx

@@ -1,7 +1,8 @@
 import { Heading, Link, Stack, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import { Code } from './UI/docs'
 
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
@@ -26,8 +27,6 @@ SyntaxHighlighter.registerLanguage('sh', sh);
 SyntaxHighlighter.registerLanguage('solidity', solidity);
 SyntaxHighlighter.registerLanguage('swift', swift);
 
-import { getProgrammingLanguageName } from '../utils';
-
 const MDXComponents = {
   // paragraphs
   p: ({ children }: any) => {
@@ -87,10 +86,12 @@ const MDXComponents = {
         <pre>{children}</pre>
       </Stack>
     );
-  }
+  },
   // code
-  // code: (code: any) => {
-  //   const language = getProgrammingLanguageName(code);
+  code: (code: any) => {
+    return (
+      <Code code={code} />
+    )
 
   //   return !!code.inline ? (
   //     <Text
@@ -110,7 +111,7 @@ const MDXComponents = {
   //       {code.children[0]}
   //     </Stack>
   //   );
-  // }
+  }
 };
 
 export default MDXComponents;

src/components/UI/docs/Code.tsx

@@ -0,0 +1,37 @@
+// Libraries
+import { Code as ChakraCode } from '@chakra-ui/react';
+import { FC } from 'react';
+ 
+// Utils
+import { getProgrammingLanguageName } from '../../../utils';
+
+
+interface Props {
+  code: any;
+}
+
+export const Code: FC<Props> = ({ code }) => {
+  const language = getProgrammingLanguageName(code);
+
+  return (
+    !!code.inline ?
+      (
+        <ChakraCode
+          background='gray.200'
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={400}
+          fontSize='md'
+          lineHeight={4}
+          letterSpacing='1%'
+          pb={2}
+          mb={-2}
+        >
+          {code.children[0]}
+        </ChakraCode>
+      )
+    : 
+      (
+        <p>test</p>
+      )
+  );
+};

src/components/UI/docs/index.tsx

@@ -0,0 +1 @@
+export * from './Code';

src/utils/getProgrammingLanguageName.ts

@@ -1,7 +1,7 @@
 // WIP
 export const getProgrammingLanguageName = (code: any) => {
   // const hasLanguageNameProperty = Object.keys(code.node.properties).length > 0;
-  console.log({ code });
+  // console.log({ code });
 
   // return hasLanguageNameProperty ? code.node.properties.className[0].split('-')[1] : 'bash';
 };