From d10e67eb5f729f07c55baa45322aefa30fe7e0ee Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Sun, 1 Mar 2020 10:51:57 +0700
Subject: [PATCH 01/11] feat: add filename in CodeBlock

---
 .../docusaurus-theme-classic/src/theme/CodeBlock/index.js  | 7 +++++--
 .../src/theme/CodeBlock/styles.module.css                  | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index 4921105531aa..5c6e8cbf0216 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -40,6 +40,7 @@ export default ({children, className: languageClassName, metastring}) => {
 
   const target = useRef(null);
   const button = useRef(null);
+  const fileName = languageClassName.split(':')[1];
   let highlightLines = [];
 
   const {isDarkTheme} = useThemeContext();
@@ -69,7 +70,8 @@ export default ({children, className: languageClassName, metastring}) => {
   }, [button.current, target.current]);
 
   let language =
-    languageClassName && languageClassName.replace(/language-/, '');
+    languageClassName &&
+    languageClassName.split(':')[0].replace(/language-/, '');
 
   if (!language && prism.defaultLanguage) {
     language = prism.defaultLanguage;
@@ -90,7 +92,8 @@ export default ({children, className: languageClassName, metastring}) => {
       code={children.replace(/\n$/, '')}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <pre className={classnames(className, styles.codeBlock)}>
+        <pre className={classnames(className, styles.codeBlock)} style={style}>
+          {fileName && <div className={styles.fileName}>{fileName}</div>}
           <button
             ref={button}
             type="button"
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index 27ad74c05079..5dcdd81edab2 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -12,6 +12,12 @@
   margin: 0;
 }
 
+.fileName {
+  padding: 4px 12px;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
 .copyButton {
   background: rgb(1, 22, 39);
   border: 1px solid rgb(214, 222, 235);

From 41adf0418afb0f368cdc2cf25a85824769fedfad Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Mon, 2 Mar 2020 02:46:44 +0700
Subject: [PATCH 02/11] Fix code to use Regex to find title from markdown and
 Update style

---
 .../src/theme/CodeBlock/index.js              | 75 ++++++++++++-------
 .../src/theme/CodeBlock/styles.module.css     | 27 +++++--
 2 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index 5c6e8cbf0216..33759b3c326a 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -17,6 +17,7 @@ import useThemeContext from '@theme/hooks/useThemeContext';
 import styles from './styles.module.css';
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
+const codeBlockTitleRegex = /title=".*"/;
 
 export default ({children, className: languageClassName, metastring}) => {
   const {
@@ -40,7 +41,7 @@ export default ({children, className: languageClassName, metastring}) => {
 
   const target = useRef(null);
   const button = useRef(null);
-  const fileName = languageClassName.split(':')[1];
+  let codeBlockTitle = '';
   let highlightLines = [];
 
   const {isDarkTheme} = useThemeContext();
@@ -48,6 +49,13 @@ export default ({children, className: languageClassName, metastring}) => {
   const darkModeTheme = prism.darkTheme || lightModeTheme;
   const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
 
+  if (metastring && codeBlockTitleRegex.test(metastring)) {
+    codeBlockTitle = metastring
+      .match(codeBlockTitleRegex)[0]
+      .split('title=')[1]
+      .replace(/"+/g, '');
+  }
+
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
     highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
@@ -70,8 +78,7 @@ export default ({children, className: languageClassName, metastring}) => {
   }, [button.current, target.current]);
 
   let language =
-    languageClassName &&
-    languageClassName.split(':')[0].replace(/language-/, '');
+    languageClassName && languageClassName.replace(/language-/, '');
 
   if (!language && prism.defaultLanguage) {
     language = prism.defaultLanguage;
@@ -92,39 +99,49 @@ export default ({children, className: languageClassName, metastring}) => {
       code={children.replace(/\n$/, '')}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <pre className={classnames(className, styles.codeBlock)} style={style}>
-          {fileName && <div className={styles.fileName}>{fileName}</div>}
+        <div className={styles.codeBlockWrapper}>
+          {codeBlockTitle && (
+            <div style={style} className={styles.codeBlockTitle}>
+              {codeBlockTitle}
+            </div>
+          )}
           <button
             ref={button}
             type="button"
             aria-label="Copy code to clipboard"
-            className={styles.copyButton}
+            className={classnames(styles.copyButton, {
+              [`${styles.copyButtonWithTitle}`]: codeBlockTitle,
+            })}
             onClick={handleCopyCode}>
             {showCopied ? 'Copied' : 'Copy'}
           </button>
-
-          <div ref={target} className={styles.codeBlockLines} style={style}>
-            {tokens.map((line, i) => {
-              if (line.length === 1 && line[0].content === '') {
-                line[0].content = '\n'; // eslint-disable-line no-param-reassign
-              }
-
-              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>
-        </pre>
+          <pre
+            className={classnames(className, styles.codeBlock, {
+              [`${styles.codeBlockWithTitle}`]: codeBlockTitle,
+            })}>
+            <div ref={target} className={styles.codeBlockLines} style={style}>
+              {tokens.map((line, i) => {
+                if (line.length === 1 && line[0].content === '') {
+                  line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                }
+
+                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>
+          </pre>
+        </div>
       )}
     </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
index 5dcdd81edab2..aa2c25a7ebe2 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -5,6 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockWrapper {
+  position: relative;
+}
+
+.codeBlockTitle {
+  border-top-left-radius: var(--ifm-pre-border-radius);
+  border-top-right-radius: var(--ifm-pre-border-radius);
+  font-weight: bold;
+  height: 32px;
+  padding: 4px 12px;
+  border-bottom: 1px solid;
+  width: 100%;
+}
+
 .codeBlock {
   overflow: auto;
   display: block;
@@ -12,10 +26,9 @@
   margin: 0;
 }
 
-.fileName {
-  padding: 4px 12px;
-  font-weight: bold;
-  text-decoration: underline;
+.codeBlockWithTitle {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .copyButton {
@@ -36,7 +49,11 @@
     bottom 200ms ease-in-out;
 }
 
-.codeBlock:hover > .copyButton {
+.copyButtonWithTitle {
+  top: calc(32px + var(--ifm-pre-padding))!important;
+}
+
+.codeBlockWrapper:hover > .copyButton {
   visibility: visible;
   opacity: 1;
 }

From 556420c6adcb3ea058f46bcc8dfbf25fb2c15f1c Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 10 Mar 2020 02:00:33 +0700
Subject: [PATCH 03/11] Fix reviewed point - Delete unnecessary template
 literals - Delete unnecessary "important!" from css

---
 .../docusaurus-theme-classic/src/theme/CodeBlock/index.js     | 4 ++--
 .../src/theme/CodeBlock/styles.module.css                     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index 33759b3c326a..fe5ee165d63d 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -110,14 +110,14 @@ export default ({children, className: languageClassName, metastring}) => {
             type="button"
             aria-label="Copy code to clipboard"
             className={classnames(styles.copyButton, {
-              [`${styles.copyButtonWithTitle}`]: codeBlockTitle,
+              [styles.copyButtonWithTitle]: codeBlockTitle,
             })}
             onClick={handleCopyCode}>
             {showCopied ? 'Copied' : 'Copy'}
           </button>
           <pre
             className={classnames(className, styles.codeBlock, {
-              [`${styles.codeBlockWithTitle}`]: codeBlockTitle,
+              [styles.codeBlockWithTitle]: codeBlockTitle,
             })}>
             <div ref={target} className={styles.codeBlockLines} style={style}>
               {tokens.map((line, i) => {
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index aa2c25a7ebe2..7002b404da60 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -50,7 +50,7 @@
 }
 
 .copyButtonWithTitle {
-  top: calc(32px + var(--ifm-pre-padding))!important;
+  top: calc(32px + var(--ifm-pre-padding));
 }
 
 .codeBlockWrapper:hover > .copyButton {

From fff95a5a250b03eccd86aa344a9b46310cd5229f Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 10 Mar 2020 03:37:54 +0700
Subject: [PATCH 04/11] Add title in live codeblock

---
 .../src/theme/CodeBlock/index.js              | 70 ++++++++++++-------
 .../src/theme/CodeBlock/styles.module.css     | 25 ++++++-
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index 776a6141ff05..c72f2681c1c0 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -18,6 +18,7 @@ import Playground from '@theme/Playground';
 import styles from './styles.module.css';
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
+const codeBlockTitleRegex = /title=".*"/;
 
 export default ({
   children,
@@ -48,6 +49,7 @@ export default ({
   const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
+  let codeBlockTitle = '';
 
   const {isDarkTheme} = useThemeContext();
   const lightModeTheme = prism.theme || defaultTheme;
@@ -59,6 +61,13 @@ export default ({
     highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
   }
 
+  if (metastring && codeBlockTitleRegex.test(metastring)) {
+    codeBlockTitle = metastring
+      .match(codeBlockTitleRegex)[0]
+      .split('title=')[1]
+      .replace(/"+/g, '');
+  }
+
   useEffect(() => {
     let clipboard;
 
@@ -109,38 +118,51 @@ export default ({
       code={children.replace(/\n$/, '')}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <pre className={classnames(className, styles.codeBlock)}>
+        <div className={styles.codeBlockWrapper}>
+          {codeBlockTitle && (
+            <div style={style} className={styles.codeBlockTitle}>
+              {codeBlockTitle}
+            </div>
+          )}
+
           <button
             ref={button}
             type="button"
             aria-label="Copy code to clipboard"
-            className={styles.copyButton}
+            className={classnames(styles.copyButton, {
+              [styles.copyButtonWithTitle]: codeBlockTitle,
+            })}
             onClick={handleCopyCode}>
             {showCopied ? 'Copied' : 'Copy'}
           </button>
 
-          <div ref={target} className={styles.codeBlockLines} style={style}>
-            {tokens.map((line, i) => {
-              if (line.length === 1 && line[0].content === '') {
-                line[0].content = '\n'; // eslint-disable-line no-param-reassign
-              }
-
-              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>
-        </pre>
+          <pre
+            className={classnames(className, styles.codeBlock, {
+              [styles.codeBlockWithTitle]: codeBlockTitle,
+            })}>
+            <div ref={target} className={styles.codeBlockLines} style={style}>
+              {tokens.map((line, i) => {
+                if (line.length === 1 && line[0].content === '') {
+                  line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                }
+
+                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>
+          </pre>
+        </div>
       )}
     </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
index 27ad74c05079..7002b404da60 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -5,6 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockWrapper {
+  position: relative;
+}
+
+.codeBlockTitle {
+  border-top-left-radius: var(--ifm-pre-border-radius);
+  border-top-right-radius: var(--ifm-pre-border-radius);
+  font-weight: bold;
+  height: 32px;
+  padding: 4px 12px;
+  border-bottom: 1px solid;
+  width: 100%;
+}
+
 .codeBlock {
   overflow: auto;
   display: block;
@@ -12,6 +26,11 @@
   margin: 0;
 }
 
+.codeBlockWithTitle {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .copyButton {
   background: rgb(1, 22, 39);
   border: 1px solid rgb(214, 222, 235);
@@ -30,7 +49,11 @@
     bottom 200ms ease-in-out;
 }
 
-.codeBlock:hover > .copyButton {
+.copyButtonWithTitle {
+  top: calc(32px + var(--ifm-pre-padding));
+}
+
+.codeBlockWrapper:hover > .copyButton {
   visibility: visible;
   opacity: 1;
 }

From 713c1e7a81651dc2b0d64859ccc0b40ea7b9be2a Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 10 Mar 2020 03:50:55 +0700
Subject: [PATCH 05/11] Just edit code order

---
 .../src/theme/CodeBlock/index.js                     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index fe5ee165d63d..2d56f6a18a35 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -41,14 +41,19 @@ export default ({children, className: languageClassName, metastring}) => {
 
   const target = useRef(null);
   const button = useRef(null);
-  let codeBlockTitle = '';
   let highlightLines = [];
+  let codeBlockTitle = '';
 
   const {isDarkTheme} = useThemeContext();
   const lightModeTheme = prism.theme || defaultTheme;
   const darkModeTheme = prism.darkTheme || lightModeTheme;
   const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
 
+  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+    highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
+  }
+
   if (metastring && codeBlockTitleRegex.test(metastring)) {
     codeBlockTitle = metastring
       .match(codeBlockTitleRegex)[0]
@@ -56,11 +61,6 @@ export default ({children, className: languageClassName, metastring}) => {
       .replace(/"+/g, '');
   }
 
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
-    highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
-  }
-
   useEffect(() => {
     let clipboard;
 

From b672195ce182b49f7197419b1448eb4d4a52006d Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 10 Mar 2020 04:11:28 +0700
Subject: [PATCH 06/11] Add demo for code title

---
 website/docs/migrating-from-v1-to-v2.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/docs/migrating-from-v1-to-v2.md b/website/docs/migrating-from-v1-to-v2.md
index 3b38bc8d5789..1a6ded997960 100644
--- a/website/docs/migrating-from-v1-to-v2.md
+++ b/website/docs/migrating-from-v1-to-v2.md
@@ -36,8 +36,7 @@ This provides a clear distinction between Docusaurus' official packages and comm
 
 Meanwhile, the default doc site functionalities provided by Docusaurus 1 are now provided by `@docusaurus/preset-classic`. Therefore, we need to add this dependency as well:
 
-```json
-// package.json
+```json title="package.json"
 {
   dependencies: {
 -   "docusaurus": "^1.x.x",

From 40a84b03cd3b319633299069bc87e0ca305ae46b Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 10 Mar 2020 13:33:39 +0700
Subject: [PATCH 07/11] Add docs about code title in markdown-features.mdx

---
 website/docs/markdown-features.mdx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index 75269709203f..aebe58aa6642 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -314,6 +314,22 @@ function MyComponent(props) {
 export default MyComponent;
 ```
 
+### Code Title
+You can add title to code block by addding `title` key after the language meta string (leave a space after the language).
+
+    ```jsx title="src/components/HelloCodeTitle.js"
+    function HelloCodeTitle(props) {
+      return <h1>Hello, {props.name}</h1>;
+    }
+    ```
+
+```jsx title="src/components/HelloCodeTitle.js"
+function HelloCodeTitle(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+```
+
+
 ### Interactive code editor
 
 (Powered by [React Live](https://github.com/FormidableLabs/react-live))

From c474235403b28a9ba2c88a62311197a8b10c9a53 Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Mon, 16 Mar 2020 19:08:47 +0800
Subject: [PATCH 08/11] Make code title height scalable

---
 .../src/theme/CodeBlock/index.js              | 76 +++++++++---------
 .../src/theme/CodeBlock/styles.module.css     |  3 +-
 .../src/theme/CodeBlock/index.js              | 78 +++++++++----------
 .../src/theme/CodeBlock/styles.module.css     |  3 +-
 4 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index 2d56f6a18a35..76e8f8f2b873 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -99,49 +99,51 @@ export default ({children, className: languageClassName, metastring}) => {
       code={children.replace(/\n$/, '')}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+        <>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
             </div>
           )}
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={classnames(styles.copyButton, {
-              [styles.copyButtonWithTitle]: codeBlockTitle,
-            })}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-          <pre
-            className={classnames(className, styles.codeBlock, {
-              [styles.codeBlockWithTitle]: codeBlockTitle,
-            })}>
-            <div ref={target} className={styles.codeBlockLines} style={style}>
-              {tokens.map((line, i) => {
-                if (line.length === 1 && line[0].content === '') {
-                  line[0].content = '\n'; // eslint-disable-line no-param-reassign
-                }
-
-                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={classnames(styles.copyButton, {
+                [styles.copyButtonWithTitle]: codeBlockTitle,
               })}
-            </div>
-          </pre>
-        </div>
+              onClick={handleCopyCode}>
+              {showCopied ? 'Copied' : 'Copy'}
+            </button>
+            <pre
+              className={classnames(className, styles.codeBlock, {
+                [styles.codeBlockWithTitle]: codeBlockTitle,
+              })}>
+              <div ref={target} className={styles.codeBlockLines} style={style}>
+                {tokens.map((line, i) => {
+                  if (line.length === 1 && line[0].content === '') {
+                    line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                  }
+
+                  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>
+            </pre>
+          </div>
+        </>
       )}
     </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
index 7002b404da60..53352efd44fe 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -13,7 +13,6 @@
   border-top-left-radius: var(--ifm-pre-border-radius);
   border-top-right-radius: var(--ifm-pre-border-radius);
   font-weight: bold;
-  height: 32px;
   padding: 4px 12px;
   border-bottom: 1px solid;
   width: 100%;
@@ -50,7 +49,7 @@
 }
 
 .copyButtonWithTitle {
-  top: calc(32px + var(--ifm-pre-padding));
+  top: calc(var(--ifm-pre-padding));
 }
 
 .codeBlockWrapper:hover > .copyButton {
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index c72f2681c1c0..922d5f073072 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -118,51 +118,51 @@ export default ({
       code={children.replace(/\n$/, '')}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div className={styles.codeBlockWrapper}>
+        <>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
             </div>
           )}
-
-          <button
-            ref={button}
-            type="button"
-            aria-label="Copy code to clipboard"
-            className={classnames(styles.copyButton, {
-              [styles.copyButtonWithTitle]: codeBlockTitle,
-            })}
-            onClick={handleCopyCode}>
-            {showCopied ? 'Copied' : 'Copy'}
-          </button>
-
-          <pre
-            className={classnames(className, styles.codeBlock, {
-              [styles.codeBlockWithTitle]: codeBlockTitle,
-            })}>
-            <div ref={target} className={styles.codeBlockLines} style={style}>
-              {tokens.map((line, i) => {
-                if (line.length === 1 && line[0].content === '') {
-                  line[0].content = '\n'; // eslint-disable-line no-param-reassign
-                }
-
-                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={classnames(styles.copyButton, {
+                [styles.copyButtonWithTitle]: codeBlockTitle,
               })}
-            </div>
-          </pre>
-        </div>
+              onClick={handleCopyCode}>
+              {showCopied ? 'Copied' : 'Copy'}
+            </button>
+            <pre
+              className={classnames(className, styles.codeBlock, {
+                [styles.codeBlockWithTitle]: codeBlockTitle,
+              })}>
+              <div ref={target} className={styles.codeBlockLines} style={style}>
+                {tokens.map((line, i) => {
+                  if (line.length === 1 && line[0].content === '') {
+                    line[0].content = '\n'; // eslint-disable-line no-param-reassign
+                  }
+
+                  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>
+            </pre>
+          </div>
+        </>
       )}
     </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
index 7002b404da60..53352efd44fe 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -13,7 +13,6 @@
   border-top-left-radius: var(--ifm-pre-border-radius);
   border-top-right-radius: var(--ifm-pre-border-radius);
   font-weight: bold;
-  height: 32px;
   padding: 4px 12px;
   border-bottom: 1px solid;
   width: 100%;
@@ -50,7 +49,7 @@
 }
 
 .copyButtonWithTitle {
-  top: calc(32px + var(--ifm-pre-padding));
+  top: calc(var(--ifm-pre-padding));
 }
 
 .codeBlockWrapper:hover > .copyButton {

From 9e8d8c3bee780e123b964840bcf767370e33c0f9 Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Mon, 16 Mar 2020 21:46:01 +0800
Subject: [PATCH 09/11] Rename codeBlockWrapper to codeBlockContent

---
 .../docusaurus-theme-classic/src/theme/CodeBlock/index.js     | 2 +-
 .../src/theme/CodeBlock/styles.module.css                     | 4 ++--
 .../src/theme/CodeBlock/index.js                              | 2 +-
 .../src/theme/CodeBlock/styles.module.css                     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
index 76e8f8f2b873..72f749fbdf4f 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -105,7 +105,7 @@ export default ({children, className: languageClassName, metastring}) => {
               {codeBlockTitle}
             </div>
           )}
-          <div className={styles.codeBlockWrapper}>
+          <div className={styles.codeBlockContent}>
             <button
               ref={button}
               type="button"
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index 53352efd44fe..0edd72864945 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.codeBlockWrapper {
+.codeBlockContent {
   position: relative;
 }
 
@@ -52,7 +52,7 @@
   top: calc(var(--ifm-pre-padding));
 }
 
-.codeBlockWrapper:hover > .copyButton {
+.codeBlockContent:hover > .copyButton {
   visibility: visible;
   opacity: 1;
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
index 922d5f073072..e617383ca606 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -124,7 +124,7 @@ export default ({
               {codeBlockTitle}
             </div>
           )}
-          <div className={styles.codeBlockWrapper}>
+          <div className={styles.codeBlockContent}>
             <button
               ref={button}
               type="button"
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
index 53352efd44fe..0edd72864945 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.codeBlockWrapper {
+.codeBlockContent {
   position: relative;
 }
 
@@ -52,7 +52,7 @@
   top: calc(var(--ifm-pre-padding));
 }
 
-.codeBlockWrapper:hover > .copyButton {
+.codeBlockContent:hover > .copyButton {
   visibility: visible;
   opacity: 1;
 }

From 1316222fb77c19d253163793b4258376343cb3cd Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Mon, 16 Mar 2020 21:48:11 +0800
Subject: [PATCH 10/11] Make copyButton appear when hovering codeTitle

---
 .../src/theme/CodeBlock/styles.module.css                        | 1 +
 .../src/theme/CodeBlock/styles.module.css                        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
index 0edd72864945..473800e62ca6 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -52,6 +52,7 @@
   top: calc(var(--ifm-pre-padding));
 }
 
+.codeBlockTitle:hover + .codeBlockContent .copyButton,
 .codeBlockContent:hover > .copyButton {
   visibility: visible;
   opacity: 1;
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
index 0edd72864945..473800e62ca6 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css
@@ -52,6 +52,7 @@
   top: calc(var(--ifm-pre-padding));
 }
 
+.codeBlockTitle:hover + .codeBlockContent .copyButton,
 .codeBlockContent:hover > .copyButton {
   visibility: visible;
   opacity: 1;

From 13e024fad04e3339838b7d16459bed2bc2485487 Mon Sep 17 00:00:00 2001
From: kohheepeace <kohheepeace@gmail.com>
Date: Tue, 17 Mar 2020 17:15:37 +0800
Subject: [PATCH 11/11] Fix docs description about code title

---
 website/docs/markdown-features.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index aebe58aa6642..cc52773b7987 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -314,8 +314,9 @@ function MyComponent(props) {
 export default MyComponent;
 ```
 
-### Code Title
-You can add title to code block by addding `title` key after the language meta string (leave a space after the language).
+### Code title
+
+You can add title to code block by adding `title` key after the language (leave a space between them).
 
     ```jsx title="src/components/HelloCodeTitle.js"
     function HelloCodeTitle(props) {