fix markdown components rendering (#661)

Author: andersy005

src/components/mdx/code.js

@@ -17,17 +17,13 @@ export const Code = ({ className, ...props }) => {
     <Box position='relative' zIndex='0'>
       <CodeContainer px='0' overflow='hidden'>
         <SyntaxHighlighter
-          language={props.language ? props.language : match ? match[1] : null}
+          language={props.language || (match ? match[1] : null)}
           {...props}
           style={nord}
-          wrapLongLines={
-            !props.wrapLongLines ? props.wrapLongLines : match ? false : true
-          } // enable this once https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402 has been fixed
-          showLineNumbers={
-            props.showLineNumbers ? props.showLineNumbers : match ? true : false
-          }
+          wrapLongLines={props.wrapLongLines ? !match : props.wrapLongLines} // enable this once https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402 has been fixed
+          showLineNumbers={props.showLineNumbers || !!match}
         />
-        <CopyButton top='5' code={props.children} />
+        <CopyButton top='4' right='1' code={props.children} />
       </CodeContainer>
     </Box>
   )

src/pages/_app.js

@@ -1,8 +1,6 @@
-import { mapping } from '@/components/mdx'
 import * as gtag from '@/lib/ga'
 import { customTheme } from '@/theme'
 import { ChakraProvider } from '@chakra-ui/react'
-import { MDXProvider } from '@mdx-js/react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
@@ -43,9 +41,7 @@ function MyApp({ Component, pageProps }) {
         }}
       />
 
-      <MDXProvider components={mapping}>
-        <Component {...pageProps} />
-      </MDXProvider>
+      <Component {...pageProps} />
     </ChakraProvider>
   )
 }

src/pages/blog/[id].js

@@ -24,7 +24,7 @@ import path from 'path'
 
 import { Giscus } from '@/components'
 import { Layout } from '@/components/layout'
-import { Link } from '@/components/mdx'
+import { Link, mapping } from '@/components/mdx'
 import { distanceToNow, formatDate } from '@/lib/date-formatting'
 import { MDXElements } from '@/lib/mdx-elements'
 import { getAllPostsIds, getPostData } from '@/lib/posts'
@@ -82,7 +82,10 @@ export default function Post({ source, frontmatter, postId }) {
               <Divider my={2} />
             </VStack>
             <br></br>
-            <MDXRemote {...source} components={MDXElements} />
+            <MDXRemote
+              {...source}
+              components={{ ...mapping, ...MDXElements }}
+            />
           </Box>
 
           <Button