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

facebook · Nov 25, 2019 · 10cd99b · 10cd99b
1 parent 91ef5c6
commit 10cd99b
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 90 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -63,43 +63,46 @@ export default ({children, className: languageClassName, metastring}) => {
   };
 
   return (
-    <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});
+    <div className={styles.codeBlockWrapper}>
+      <button
+        ref={button}
+        type="button"
+        aria-label="Copy code to clipboard"
+        className={styles.copyButton}
+        onClick={handleCopyCode}>
+        {showCopied ? 'Copied' : 'Copy'}
+      </button>
 
-              if (highlightLines.includes(i + 1)) {
-                lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
-              }
+      <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});
 
-              return (
-                <div key={i} {...lineProps}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({token, key})} />
-                  ))}
-                </div>
-              );
-            })}
+                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>
           </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
-      )}
-    </Highlight>
+        )}
+      </Highlight>
+    </div>
   );
 };
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/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);
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.js b/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 && (

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -81,43 +81,46 @@ export default ({
   };
 
   return (
-    <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>
-              );
-            })}
+    <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>
           </pre>
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
-      )}
-    </Highlight>
+        )}
+      </Highlight>
+    </div>
   );
 };
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/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);
+}