From c1fb3deaceb96e2cb343b0bd1e89a33235a9c3a2 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 2 Mar 2022 20:01:58 +0800 Subject: [PATCH] fix(theme-classic): allow code tags containing inline elements to stay inline (#6767) --- .../src/theme/MDXComponents/index.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx index ac22afa7e0..2cdcf65db4 100644 --- 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 {unwrappedChildren}; }, 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 ? : ;