Fix code block color after hydration

1 files changed, 5 insertions, 0 deletions

diff --git a/blog/2024-04-05/VariableAxisSettings.tsx b/blog/2024-04-05/VariableAxisSettings.tsx
index b288767..8e327dd 100644
--- a/blog/2024-04-05/VariableAxisSettings.tsx
+++ b/blog/2024-04-05/VariableAxisSettings.tsx
@@ -13,6 +13,7 @@ import {
   useVariableAxes,
 } from './VariableAxisProvider';
 import styles from './VariableAxisSettings.module.css';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 function PreviewEditor({
   editorClassName,
@@ -72,6 +73,9 @@ const highlightingTypes = [
 ];
 
 function CodeBlockBox({ children }: { children: React.ReactNode }) {
+  // Force re-render in browser.
+  // https://github.com/facebook/docusaurus/blob/e012e0315862b2ca02cad40c58d11d31c319ff75/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx#L32-L36
+  const isBrowser = useIsBrowser();
   const theme = usePrismTheme();
 
   const customProps: Record<string, string> = {};
@@ -89,6 +93,7 @@ function CodeBlockBox({ children }: { children: React.ReactNode }) {
 
   return (
     <div
+      key={String(isBrowser)}
       className={styles.code}
       style={{
         backgroundColor: theme.plain.backgroundColor,