fix(v2): make code blocks more standalone (#4315)

* refactor(v2): make code blocks styles standalone

* Rework

* Revert font size in playground headers

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -201,7 +201,7 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <>
+        <div className={styles.codeBlockContainer}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -262,7 +262,7 @@ export default function CodeBlock({
               )}
             </button>
           </div>
-        </>
+        </div>
       )}
     </Highlight>
   );

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .codeBlockContent {
   position: relative;
   /*rtl:ignore*/
@@ -14,11 +18,10 @@
 .codeBlockTitle {
   border-top-left-radius: var(--ifm-global-radius);
   border-top-right-radius: var(--ifm-global-radius);
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: bold;
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
-  width: 100%;
 }
 
 .codeBlock {
@@ -53,9 +56,8 @@
 }
 
 .codeBlockLines {
-  font-family: var(--ifm-font-family-monospace);
-  font-size: inherit;
-  line-height: var(--ifm-pre-line-height);
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace);
   white-space: pre;
   float: left;
   min-width: 100%;

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx

@@ -11,8 +11,6 @@ import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
-import styles from './styles.module.css';
-
 const MDXComponents: MDXComponentsObject = {
   code: (props) => {
     const {children} = props;
@@ -25,7 +23,10 @@ const MDXComponents: MDXComponentsObject = {
     return children;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => <div className={styles.mdxCodeBlock} {...props} />,
+  pre: (props: any) => {
+    const {children} = props;
+    return <CodeBlock {...children?.props} />;
+  },
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),

packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.mdxCodeBlock {
-  position: relative;
-  margin-bottom: var(--ifm-leading);
-  font-size: var(--ifm-code-font-size);
-}
-
-.mdxCodeBlock pre {
-  font-size: inherit;
-}

packages/docusaurus-theme-classic/src/types.d.ts

@@ -265,7 +265,7 @@ declare module '@theme/MDXComponents' {
   export type MDXComponentsObject = {
     readonly code: typeof CodeBlock;
     readonly a: (props: ComponentProps<'a'>) => JSX.Element;
-    readonly pre: (props: ComponentProps<'div'>) => JSX.Element;
+    readonly pre: typeof CodeBlock;
     readonly h1: (props: ComponentProps<'h1'>) => JSX.Element;
     readonly h2: (props: ComponentProps<'h2'>) => JSX.Element;
     readonly h3: (props: ComponentProps<'h3'>) => JSX.Element;