fix home dark theme code highlight (#5094)

Summary:
Fixes #4615 #4020

Pull Request resolved: #5094

Reviewed By: tyao1

Differential Revision: D87452537

Pulled By: captbaritone

fbshipit-source-id: eb10732047ef2856f0998cf2bcaeb60a5a04d25e

Author: hrasoa

website/src/css/custom.css

@@ -188,17 +188,15 @@ html[data-theme="light"] .homePage .container {
 }
 
 .exampleSection .wrapperInner > div:nth-child(even) pre {
-  margin-left: 3em;
   padding-top: 0;
 }
 
 pre {
   background-color: var(--pre-background-color);
 }
 
-pre.outerPre {
-  box-shadow: var(--pre-box-shadow);
-  border: 1px solid var(--pre-border-color);
+.outerPre {
+  margin-left: 3em;
 }
 
 .exampleSection p {
@@ -207,6 +205,8 @@ pre.outerPre {
 
 .exampleSection pre {
   margin-top: 15px;
+  border: 1px solid var(--pre-border-color);
+  font-size: 80%;
 }
 
 /* Text section */
@@ -454,6 +454,10 @@ pre.outerPre {
   .exampleSection .wrapperInner > div:nth-child(even) pre {
     margin-left: 0em;
   }
+
+  .outerPre {
+    margin-left: 0;
+  }
 }
 
 @media only screen and (max-width: 768px) {

website/src/pages/index.js

@@ -8,12 +8,12 @@
  * @oncall relay
  */
 
-import Code from '../core/Code.js';
 import Container from '../core/Container';
 import GridBlock from '../core/GridBlock';
 import Link from '@docusaurus/Link';
 import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import CodeBlock from '@theme/CodeBlock';
 import Layout from '@theme/Layout';
 import * as React from 'react';
 
@@ -201,10 +201,9 @@ const Index = () => {
             </div>
 
             <div className="radiusLeft">
-              <pre className="outerPre">
-                <Code>
-                  {`
-import React from "react";
+              <div className="outerPre">
+                <CodeBlock>
+                  {`import React from "react";
 import { graphql, usePreloadedQuery, /* ... */ } from "react-relay";
 
 const artistsQuery = graphql\`
@@ -239,10 +238,9 @@ function ArtistView() {
       {data?.artist && <ArtistCard artist={data?.artist} />}
     </>
   );
-}
-`}
-                </Code>
-              </pre>
+}`}
+                </CodeBlock>
+              </div>
             </div>
           </div>
         </Container>
@@ -273,11 +271,11 @@ function ArtistView() {
                 fragments are fetched as part of that parent query.
               </p>
             </div>
+
             <div>
-              <pre className="outerPre">
-                <Code>
-                  {`
-import React from "react";
+              <div className="outerPre">
+                <CodeBlock>
+                  {`import React from "react";
 import { graphql, useFragment} from "react-relay";
 
 export default function ArtistCard(props) {
@@ -303,10 +301,9 @@ export default function ArtistCard(props) {
       </Link>
     </Card>
   );
-}
-                    `}
-                </Code>
-              </pre>
+}`}
+                </CodeBlock>
+              </div>
             </div>
           </div>
         </Container>