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;

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js

@@ -19,39 +19,41 @@ export default function Playground({children, transformCode, ...props}) {
   const prismTheme = usePrismTheme();
 
   return (
-    <LiveProvider
-      key={isClient}
-      code={isClient ? children.replace(/\n$/, '') : ''}
-      transformCode={transformCode || ((code) => `${code};`)}
-      theme={prismTheme}
-      {...props}>
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundEditorHeader,
-        )}>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </div>
-      <LiveEditor className={styles.playgroundEditor} />
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundPreviewHeader,
-        )}>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </div>
-      <div className={styles.playgroundPreview}>
-        <LivePreview />
-        <LiveError />
-      </div>
-    </LiveProvider>
+    <div className={styles.playgroundContainer}>
+      <LiveProvider
+        key={isClient}
+        code={isClient ? children.replace(/\n$/, '') : ''}
+        transformCode={transformCode || ((code) => `${code};`)}
+        theme={prismTheme}
+        {...props}>
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundEditorHeader,
+          )}>
+          <Translate
+            id="theme.Playground.liveEditor"
+            description="The live editor label of the live codeblocks">
+            Live Editor
+          </Translate>
+        </div>
+        <LiveEditor className={styles.playgroundEditor} />
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundPreviewHeader,
+          )}>
+          <Translate
+            id="theme.Playground.result"
+            description="The result label of the live codeblocks">
+            Result
+          </Translate>
+        </div>
+        <div className={styles.playgroundPreview}>
+          <LivePreview />
+          <LiveError />
+        </div>
+      </LiveProvider>
+    </div>
   );
 }

packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css

@@ -5,16 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .playgroundHeader {
   letter-spacing: 0.08rem;
   padding: 0.75rem;
   text-transform: uppercase;
   font-weight: bold;
+  font-size: var(--ifm-code-font-size);
 }
 
 .playgroundEditorHeader {
   background: var(--ifm-color-emphasis-600);
   color: var(--ifm-color-content-inverse);
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .playgroundPreviewHeader {
@@ -23,7 +30,8 @@
 }
 
 .playgroundEditor {
-  font-family: var(--ifm-font-family-monospace) !important;
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
   /*rtl:ignore*/
   direction: ltr;
 }
@@ -32,6 +40,5 @@
   border: 1px solid var(--ifm-color-emphasis-200);
   border-bottom-left-radius: var(--ifm-global-radius);
   border-bottom-right-radius: var(--ifm-global-radius);
-  position: relative;
   padding: 1rem;
 }

website/src/pages/examples/markdownPageExample.md

@@ -128,3 +128,62 @@ function Demo() {
   return null;
 }
 ```
+
+## Code block test
+
+```js title="Title"
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+      // highlight-start
+      {/* prettier-ignore */}
+      long long long long long long long long long long long long line
+      {/* prettier-ignore */}
+      // highlight-end
+    </div>
+  );
+}
+```
+
+```jsx live
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```
+
+<CodeBlock className="language-yaml" title="test">
+  test
+</CodeBlock>
+
+<code>test</code>