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

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

@@ -63,46 +63,43 @@ 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
+            ref={target}
+            className={classnames(className, styles.codeBlock)}
+            style={style}>
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({line, key: i});
 
-      <Highlight
-        {...defaultProps}
-        theme={prism.theme || defaultTheme}
-        code={children.trim()}
-        language={language}>
-        {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <pre className={classnames(className, styles.codeBlock)}>
-            <code
-              ref={target}
-              className={classnames(className, styles.codeBlockLines)}
-              style={style}>
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
+              if (highlightLines.includes(i + 1)) {
+                lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+              }
 
-                if (highlightLines.includes(i + 1)) {
-                  lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
-                }
-
-                return (
-                  <div key={i} {...lineProps}>
-                    {line.map((token, key) => (
-                      <span key={key} {...getTokenProps({token, key})} />
-                    ))}
-                  </div>
-                );
-              })}
-            </code>
+              return (
+                <div key={i} {...lineProps}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
           </pre>
-        )}
-      </Highlight>
-    </div>
+          <button
+            ref={button}
+            type="button"
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      )}
+    </Highlight>
   );
 };

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

@@ -4,6 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+.codeBlock {
+  border-radius: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
 
 .codeBlockWrapper {
   position: relative;
@@ -31,18 +39,3 @@
   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 col--9">
+            <div className="col">
               <div className={styles.docItemContainer}>
                 <article>
                   {version && (

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

@@ -81,46 +81,43 @@ 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}) => (
-          <pre className={classnames(className, styles.codeBlock)}>
-            <code
-              ref={target}
-              className={classnames(className, styles.codeBlockLines)}
-              style={style}>
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
-
-                if (highlightLines.includes(i + 1)) {
-                  lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
-                }
-
-                return (
-                  <div key={i} {...lineProps}>
-                    {line.map((token, key) => (
-                      <span key={key} {...getTokenProps({token, key})} />
-                    ))}
-                  </div>
-                );
-              })}
-            </code>
+    <Highlight
+      {...defaultProps}
+      theme={prism.theme || defaultTheme}
+      code={children.trim()}
+      language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <div className={styles.codeBlockWrapper}>
+          <pre
+            ref={target}
+            className={classnames(className, styles.codeBlock)}
+            style={style}>
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({line, key: i});
+
+              if (highlightLines.includes(i + 1)) {
+                lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+              }
+
+              return (
+                <div key={i} {...lineProps}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
           </pre>
-        )}
-      </Highlight>
-    </div>
+          <button
+            ref={button}
+            type="button"
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      )}
+    </Highlight>
   );
 };

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

@@ -1,3 +1,12 @@
+.codeBlock {
+  border-radius: 0;
+  font-size: inherit;
+  margin-bottom: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
 .codeBlockWrapper {
   position: relative;
 }
@@ -24,18 +33,3 @@
   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);
-}