Rework

facebook · Feb 28, 2021 · 0fd2f09 · 0fd2f09
1 parent 0ab998f
commit 0fd2f09
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 39 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -201,7 +201,7 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <>
+        <div className={styles.codeBlockContainer}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -262,7 +262,7 @@ export default function CodeBlock({
               )}
             </button>
           </div>
-        </>
+        </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
@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .codeBlockContent {
   position: relative;
   /*rtl:ignore*/
   direction: ltr;
-  margin-bottom: var(--ifm-leading);
 }
 
 .codeBlockTitle {

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -23,7 +23,7 @@ const MDXComponents: MDXComponentsObject = {
     return children;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => <div className="mdxCodeBlock" {...props} />,
+  pre: ({children}) => <CodeBlock {...children.props} />,
   h1: Heading('h1'),
   h2: Heading('h2'),
   h3: Heading('h3'),

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@@ -14,38 +14,40 @@ import styles from './styles.module.css';
 
 export default function Playground({children, theme, transformCode, ...props}) {
   return (
-    <LiveProvider
-      code={children.replace(/\n$/, '')}
-      transformCode={transformCode || ((code) => `${code};`)}
-      theme={theme}
-      {...props}>
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundEditorHeader,
-        )}>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </div>
-      <LiveEditor className={styles.playgroundEditor} />
-      <div
-        className={clsx(
-          styles.playgroundHeader,
-          styles.playgroundPreviewHeader,
-        )}>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </div>
-      <div className={styles.playgroundPreview}>
-        <LivePreview />
-        <LiveError />
-      </div>
-    </LiveProvider>
+    <div className={styles.playgroundContainer}>
+      <LiveProvider
+        code={children.replace(/\n$/, '')}
+        transformCode={transformCode || ((code) => `${code};`)}
+        theme={theme}
+        {...props}>
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundEditorHeader,
+          )}>
+          <Translate
+            id="theme.Playground.liveEditor"
+            description="The live editor label of the live codeblocks">
+            Live Editor
+          </Translate>
+        </div>
+        <LiveEditor className={styles.playgroundEditor} />
+        <div
+          className={clsx(
+            styles.playgroundHeader,
+            styles.playgroundPreviewHeader,
+          )}>
+          <Translate
+            id="theme.Playground.result"
+            description="The result label of the live codeblocks">
+            Result
+          </Translate>
+        </div>
+        <div className={styles.playgroundPreview}>
+          <LivePreview />
+          <LiveError />
+        </div>
+      </LiveProvider>
+    </div>
   );
 }
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .playgroundHeader {
   letter-spacing: 0.08rem;
   padding: 0.75rem;
@@ -15,6 +19,8 @@
 .playgroundEditorHeader {
   background: var(--ifm-color-emphasis-600);
   color: var(--ifm-color-content-inverse);
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .playgroundPreviewHeader {
@@ -23,7 +29,8 @@
 }
 
 .playgroundEditor {
-  font-family: var(--ifm-font-family-monospace) !important;
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
   /*rtl:ignore*/
   direction: ltr;
 }
@@ -32,6 +39,5 @@
   border: 1px solid var(--ifm-color-emphasis-200);
   border-bottom-left-radius: var(--ifm-global-radius);
   border-bottom-right-radius: var(--ifm-global-radius);
-  position: relative;
   padding: 1rem;
 }
diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
@@ -119,3 +119,64 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myCompone
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
 
 </BrowserWindow>
+
+---
+
+## Code block test
+
+```js title="Title"
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+      // highlight-start
+      {/* prettier-ignore */}
+      long long long long long long long long long long long long line
+      {/* prettier-ignore */}
+      // highlight-end
+    </div>
+  );
+}
+```
+
+```jsx live
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```
+
+<CodeBlock className="language-yaml" title="test">
+  test
+</CodeBlock>
+
+<code>test</code>