refactor(v2): improve markup of code blocks

facebook · Nov 25, 2019 · 854f8a0 · 854f8a0
1 parent 10cd99b
commit 854f8a0
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 112 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -63,46 +63,44 @@ 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}) => (
+        <pre className={classnames(className, styles.codeBlock)}>
+          <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});
+          <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>
-          </pre>
-        )}
-      </Highlight>
-    </div>
+              return (
+                <div key={i} {...lineProps}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ))}
+                </div>
+              );
+            })}
+          </code>
+        </pre>
+      )}
+    </Highlight>
   );
 };
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,10 +1,5 @@
-.codeBlockWrapper {
-  position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
-  visibility: visible;
-  opacity: 1;
+.codeBlock {
+  padding: 0;
 }
 
 .copyButton {
@@ -25,17 +20,14 @@
     bottom 200ms ease-in-out;
 }
 
-.codeBlock {
-  overflow: auto;
-  display: block;
-  padding: 0;
-  font-size: inherit;
+.codeBlock:hover > .copyButton {
+  visibility: visible;
+  opacity: 1;
 }
 
 .codeBlockLines {
-  border-radius: 0;
-  margin-bottom: 0;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
+  border-radius: 0;
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.js
@@ -20,7 +20,7 @@ export default {
     return children;
   },
   a: Link,
-  pre: props => <pre className={styles.mdxCodeBlock} {...props} />,
+  pre: props => <div className={styles.mdxCodeBlock} {...props} />,
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css b/packages/docusaurus-theme-classic/src/theme/MDXComponents/styles.module.css
@@ -1,7 +1,5 @@
 .mdxCodeBlock {
-  background-color: transparent;
   border-radius: var(--ifm-global-radius);
-  box-sizing: border-box;
-  font-family: inherit;
-  padding: 0;
+  position: relative;
+  margin-bottom: var(--ifm-leading);
 }
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,46 +81,44 @@ 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>
-          </pre>
-        )}
-      </Highlight>
-    </div>
+    <Highlight
+      {...defaultProps}
+      theme={prism.theme || defaultTheme}
+      code={children.trim()}
+      language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={classnames(className, styles.codeBlock)}>
+          <button
+            ref={button}
+            type="button"
+            aria-label="Copy code to clipboard"
+            className={styles.copyButton}
+            onClick={handleCopyCode}>
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+
+          <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>
+      )}
+    </Highlight>
   );
 };
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,10 +1,5 @@
-.codeBlockWrapper {
-  position: relative;
-}
-
-.codeBlockWrapper:hover > .copyButton {
-  visibility: visible;
-  opacity: 1;
+.codeBlock {
+  padding: 0;
 }
 
 .copyButton {
@@ -25,17 +20,14 @@
     bottom 200ms ease-in-out;
 }
 
-.codeBlock {
-  overflow: auto;
-  display: block;
-  padding: 0;
-  font-size: inherit;
+.codeBlock:hover > .copyButton {
+  visibility: visible;
+  opacity: 1;
 }
 
 .codeBlockLines {
-  border-radius: 0;
-  margin-bottom: 0;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
+  border-radius: 0;
 }