fix(theme-classic): allow code tags containing inline elements to sta…

…y inline (#6767)
facebook · Mar 2, 2022 · c1fb3de · c1fb3de
1 parent 2e3eec2
commit c1fb3de
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -37,8 +37,22 @@ const MDXComponents: MDXComponentsObject = {
     return <Head {...props}>{unwrappedChildren}</Head>;
   },
   code: (props) => {
+    const inlineElements = [
+      'a',
+      'b',
+      'big',
+      'i',
+      'span',
+      'em',
+      'strong',
+      'sup',
+      'sub',
+      'small',
+    ];
     const shouldBeInline = React.Children.toArray(props.children).every(
-      (el) => typeof el === 'string' && !el.includes('\n'),
+      (el) =>
+        (typeof el === 'string' && !el.includes('\n')) ||
+        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
     );
 
     return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;