fix: single backtick rendering as a codeblock in casestudies (asyncap…

…i#2208)

Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: Lukasz Gornicki <[email protected]>

components/MDX.js

@@ -60,9 +60,8 @@ export function getMDXComponents() {
     th: props => <th {...props} className={`${props.className || ''} px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium font-body text-gray-900 uppercase tracking-wider`} />,
     tr: props => <tr {...props} className={`${props.className || ''} bg-white`} />,
     td: props => <td {...props} className={`${props.className || ''} px-6 py-4 border-b border-gray-200 text-sm leading-5 text-gray-700 tracking-tight`} />,
-    pre: props => <div {...props} className={`${props.className || ''} my-8`} />,
-    inlineCode: props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
-    code: CodeComponent,
+    pre: props => CodeComponent(props.children.props),
+    code:  props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
     hr: props => <hr {...props} className={`${props.className || ''} my-8`} />,
     CodeBlock,
     ChapterSuggestions,