From 08343d31c1a1aa82d3aa685465341decd24c754f Mon Sep 17 00:00:00 2001
From: Haja Rasoahaingo <haja.rasoah@gmail.com>
Date: Thu, 23 Oct 2025 21:33:30 +0200
Subject: [PATCH 1/3] fix home dark theme code highlight

---
 website/src/css/custom.css |  2 +-
 website/src/pages/index.js | 31 ++++++++++++++-----------------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 85ffd260d1fc4..46aaf4dd7cc18 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -188,7 +188,6 @@ html[data-theme="light"] .homePage .container {
 }
 
 .exampleSection .wrapperInner > div:nth-child(even) pre {
-  margin-left: 3em;
   padding-top: 0;
 }
 
@@ -207,6 +206,7 @@ pre.outerPre {
 
 .exampleSection pre {
   margin-top: 15px;
+  border: 1px solid var(--pre-border-color);
 }
 
 /* Text section */
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index dea9936b67d91..b7fae4555b4ef 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -8,7 +8,6 @@
  * @oncall relay
  */
 
-import Code from '../core/Code.js';
 import Container from '../core/Container';
 import GridBlock from '../core/GridBlock';
 import Link from '@docusaurus/Link';
@@ -16,6 +15,7 @@ import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import CodeBlock from '@theme/CodeBlock';
 import * as React from 'react';
 
 function LoadQueryLink() {
@@ -202,10 +202,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\`
@@ -240,10 +239,9 @@ function ArtistView() {
       {data?.artist && <ArtistCard artist={data?.artist} />}
     </>
   );
-}
-`}
-                </Code>
-              </pre>
+}`}
+                </CodeBlock>
+              </div>
             </div>
           </div>
         </Container>
@@ -274,11 +272,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) {
@@ -304,10 +302,9 @@ export default function ArtistCard(props) {
       </Link>
     </Card>
   );
-}
-                    `}
-                </Code>
-              </pre>
+}`}
+                </CodeBlock>
+              </div>
             </div>
           </div>
         </Container>

From db6fa89e460ad6f7890103f1148ec861ed05fef8 Mon Sep 17 00:00:00 2001
From: Haja Rasoahaingo <haja.rasoah@gmail.com>
Date: Thu, 23 Oct 2025 22:11:24 +0200
Subject: [PATCH 2/3] fix pre spacing left

---
 website/src/css/custom.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 46aaf4dd7cc18..000aec9a1f4b5 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -195,9 +195,8 @@ 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 {
@@ -454,6 +453,10 @@ pre.outerPre {
   .exampleSection .wrapperInner > div:nth-child(even) pre {
     margin-left: 0em;
   }
+
+  .outerPre {
+    margin-left: 0;
+  }
 }
 
 @media only screen and (max-width: 768px) {

From 5a65cac9f6cfd191891c3869276aab699eaa98b1 Mon Sep 17 00:00:00 2001
From: Haja Rasoahaingo <haja.rasoah@gmail.com>
Date: Thu, 23 Oct 2025 22:50:19 +0200
Subject: [PATCH 3/3] fix code font size

---
 website/src/css/custom.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 000aec9a1f4b5..bb20101b9c61b 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -206,6 +206,7 @@ pre {
 .exampleSection pre {
   margin-top: 15px;
   border: 1px solid var(--pre-border-color);
+  font-size: 80%;
 }
 
 /* Text section */