fix(v2): remove auto wrap for code blocks (#2048)

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

@@ -63,16 +63,26 @@ export default ({children, className: languageClassName, metastring}) => {
   };
 
   return (
+    <div className={styles.codeBlockWrapper}>
+      <button
+        ref={button}
+        type="button"
+        aria-label="Copy code to clipboard"
+        className={styles.copyButton}
+        onClick={handleCopyCode}>
+        {showCopied ? 'Copied' : 'Copy'}
+      </button>
+
       <Highlight
         {...defaultProps}
         theme={prism.theme || defaultTheme}
         code={children.trim()}
         language={language}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+          <pre className={classnames(className, styles.codeBlock)}>
-          <pre
+            <code
               ref={target}
-            className={classnames(className, styles.codeBlock)}
+              className={classnames(className, styles.codeBlockLines)}
               style={style}>
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({line, key: i});
@@ -89,17 +99,10 @@ export default ({children, className: languageClassName, metastring}) => {
                   </div>
                 );
               })}
+            </code>
           </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
         )}
       </Highlight>
+    </div>
   );
 };

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

@@ -1,11 +1,3 @@
-.codeBlock {
-  border-radius: 0;
-  margin-bottom: 0;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
 .codeBlockWrapper {
   position: relative;
 }
@@ -32,3 +24,18 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
+
+.codeBlock {
+  overflow: auto;
+  display: block;
+  padding: 0;
+  font-size: inherit;
+}
+
+.codeBlockLines {
+  border-radius: 0;
+  margin-bottom: 0;
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}

packages/docusaurus-theme-classic/src/theme/DocItem/index.js

@@ -94,7 +94,7 @@ function DocItem(props) {
       <div className="padding-vert--lg">
         <div className="container">
           <div className="row">
-            <div className="col">
+            <div className="col col--9">
               <div className={styles.docItemContainer}>
                 <article>
                   {version && (

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

@@ -81,16 +81,26 @@ export default ({
   };
 
   return (
+    <div className={styles.codeBlockWrapper}>
+      <button
+        ref={button}
+        type="button"
+        aria-label="Copy code to clipboard"
+        className={styles.copyButton}
+        onClick={handleCopyCode}>
+        {showCopied ? 'Copied' : 'Copy'}
+      </button>
+
       <Highlight
         {...defaultProps}
         theme={prism.theme || defaultTheme}
         code={children.trim()}
         language={language}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+          <pre className={classnames(className, styles.codeBlock)}>
-          <pre
+            <code
               ref={target}
-            className={classnames(className, styles.codeBlock)}
+              className={classnames(className, styles.codeBlockLines)}
               style={style}>
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({line, key: i});
@@ -107,17 +117,10 @@ export default ({
                   </div>
                 );
               })}
+            </code>
           </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
         )}
       </Highlight>
+    </div>
   );
 };

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

@@ -1,12 +1,3 @@
-.codeBlock {
-  border-radius: 0;
-  font-size: inherit;
-  margin-bottom: 0;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
 .codeBlockWrapper {
   position: relative;
 }
@@ -33,3 +24,18 @@
   transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
     bottom 200ms ease-in-out;
 }
+
+.codeBlock {
+  overflow: auto;
+  display: block;
+  padding: 0;
+  font-size: inherit;
+}
+
+.codeBlockLines {
+  border-radius: 0;
+  margin-bottom: 0;
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}