Fix hydration errors (#914)

* Fix <Code> hydration

* Fix hydration errors with RefCard

components/blocks/code.js

@@ -45,7 +45,7 @@ const Code = ({ code, children, language, img, lines }) => {
             languageImports.set(importLanguage, true);
           } catch (error) {
             console.error(
-              `Prism doesn't support this language: ${importLanguage}`
+              `Prism doesn't support this language: ${importLanguage}`,
             );
           }
         }
@@ -72,31 +72,31 @@ const Code = ({ code, children, language, img, lines }) => {
     ConditionalRendering = (
       <section className={styles.Container}>
         <Image src={img} clean={true} />
-        <pre>
+        <div className={styles.Pre}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </pre>
+        </div>
       </section>
     );
   } else if (lines) {
     ConditionalRendering = (
       <section className={classNames(styles.Container, styles.LineHighlight)}>
-        <pre data-line={lines}>
+        <div data-line={lines}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </pre>
+        </div>
       </section>
     );
   } else {
     ConditionalRendering = (
       <section className={styles.Container}>
-        <pre>
+        <div className={styles.Pre}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
-        </pre>
+        </div>
       </section>
     );
   }

components/blocks/code.module.css

@@ -3,16 +3,16 @@
   @apply relative !important;
 }
 
-.Container pre,
+.Pre,
 .Container code {
   @apply overflow-auto max-w-full whitespace-pre;
 }
 
-.Container pre {
+.Pre {
   @apply p-4 bg-gray-90 text-white font-medium rounded-md relative py-6 px-8 leading-relaxed;
 }
 
-.Container pre code {
+.Pre code {
   @apply z-10 relative;
 }
 
@@ -38,70 +38,70 @@
 }
 
 /* Code block adjustments */
-.Container pre code :global(.operator) {
+.Pre code :global(.operator) {
   @apply text-yellow-50;
 }
 
-.Container pre code :global(.decorator.annotation.punctuation) {
+.Pre code :global(.decorator.annotation.punctuation) {
   @apply text-red-60;
 }
 
-.Container pre code :global(.string) {
+.Pre code :global(.string) {
   @apply text-darkBlue-30;
 }
 
-.Container pre code :global(.keyword) {
+.Pre code :global(.keyword) {
   @apply text-darkBlue-50;
 }
 
-.Container pre code :global(.builtin) {
+.Pre code :global(.builtin) {
   @apply text-lightBlue-40;
 }
 
-.Container pre code :global(.number),
-.Container pre code :global(.boolean) {
+.Pre code :global(.number),
+.Pre code :global(.boolean) {
   @apply text-green-40;
 }
 
-.Container pre code :global(.punctuation) {
+.Pre code :global(.punctuation) {
   @apply text-gray-60;
 }
 
-.Container pre code :global(.comment) {
+.Pre code :global(.comment) {
   @apply text-gray-60 italic font-normal;
 }
 
-.Container pre code :global(.table) {
+.Pre code :global(.table) {
   @apply inline;
 }
 
 /* Dark mode adjustments */
-:global(.dark) .Container pre code :global(.operator),
-:global(.dark) .Container pre code :global(.decorator) {
+:global(.dark) .Pre code :global(.operator),
+:global(.dark) .Pre code :global(.decorator) {
   @apply text-yellow-80;
 }
 
-:global(.dark) .Container pre code :global(.keyword) {
+:global(.dark) .Pre code :global(.keyword) {
   @apply text-darkBlue-50;
 }
 
-:global(.dark) .Container pre code :global(.builtin) {
+:global(.dark) .Pre code :global(.builtin) {
   @apply text-lightBlue-60;
 }
 
-:global(.dark) .Container pre code :global(.number),
-:global(.dark) .Container pre code :global(.boolean) {
+:global(.dark) .Pre code :global(.number),
+:global(.dark) .Pre code :global(.boolean) {
   @apply text-green-40;
 }
 
-:global(.dark) .Container pre code :global(.function) {
+:global(.dark) .Pre code :global(.function) {
   @apply text-red-60 font-semibold;
 }
 
-:global(.dark) .Container pre code :global(.comment) {
+:global(.dark) .Pre code :global(.comment) {
   @apply text-gray-60;
 }
 
-:global(.dark) .Container pre code :global(.string) {
+:global(.dark) .Pre code :global(.string) {
   @apply text-darkBlue-30;
 }

content/get-started/fundamentals/tutorials/create-an-app.md

@@ -52,7 +52,7 @@ Streamlit is more than just a way to make data apps, it’s also a community of
 
    Running a Streamlit app is no different than any other Python script. Whenever you need to view the app, you can use this command.
 
-    <Tip>
+   <Tip>
 
    Did you know you can also pass a URL to `streamlit run`? This is great when combined with GitHub Gists. For example:
 
@@ -179,6 +179,7 @@ transformational.
 
 Whenever you have a long-running computation in your code, consider
 refactoring it so you can use `@st.cache_data`, if possible. Please read [Caching](/library/advanced-features/caching) for more details.
+
 </Tip>
 
 Now that you know how caching with Streamlit works, let’s get back to the Uber

content/get-started/installation/index.md

@@ -28,15 +28,15 @@ common scenario.
 
 <RefCard href="/get-started/installation/command-line" size="half">
 
-##### Option 1: I'm comfortable with the command line
+<h5>Option 1: I'm comfortable with the command line</h5>
 
 Install Streamlit on your own machine using tools like `venv` and `pip`.
 
 </RefCard>
 
 <RefCard href="/get-started/installation/anaconda-distribution" size="half">
 
-##### Option 2: I prefer a graphical interface
+<h5>Option 2: I prefer a graphical interface</h5>
 
 Install Streamlit using the Anaconda Distribution graphical user interface. This is also the best
 approach if you're on Windows or don't have Python set up.
@@ -45,7 +45,7 @@ approach if you're on Windows or don't have Python set up.
 
 <RefCard href="/get-started/installation/community-cloud" size="half">
 
-##### Option 3: I'd rather use a cloud-based environment
+<h5>Option 3: I'd rather use a cloud-based environment</h5>
 
 Use Streamlit Community Cloud with GitHub Codespaces so you don't have to go through the trouble
 of installing Python and setting up an environment.

content/library/advanced-features/caching.md

@@ -151,6 +151,7 @@ def query():
 <Tip>
 
 You should set a `ttl` (time to live) to get new results from your database. If you set `st.cache_data(ttl=3600)`, Streamlit invalidates any cached values after 1 hour (3600 seconds) and runs the cached function again. See details in [Controlling cache size and duration](#controlling-cache-size-and-duration).
+
 </Tip>
 
 **API calls**
@@ -318,6 +319,7 @@ def get_api_data():
 <Tip>
 
 You can also set `ttl` values using `timedelta`, e.g., `ttl=datetime.timedelta(hours=1)`.
+
 </Tip>
 
 **The `max_entries` parameter**

content/library/advanced-features/index.md

@@ -11,7 +11,7 @@ This section gives you background on how different parts of Streamlit work.
 
 <RefCard href="/library/advanced-features/app-menu" size="half">
 
-##### ⋮ App menu
+<h5>⋮ App menu</h5>
 
 Streamlit provides a configurable menu within your app to access convenient tools for developers and viewers. These options can modify the appearance of your app while running.
 
@@ -24,7 +24,7 @@ Streamlit provides a configurable menu within your app to access convenient tool
 
 <RefCard href="/library/advanced-features/cli" size="half">
 
-##### Command-line options
+<h5>Command-line options</h5>
 
 When you install Streamlit, a command-line (CLI) tool gets installed as well. The purpose of this tool is to run Streamlit apps, change Streamlit configuration options, and help you diagnose and fix issues.
 
@@ -38,7 +38,7 @@ When you install Streamlit, a command-line (CLI) tool gets installed as well. Th
 
 <RefCard href="/library/advanced-features/configuration" size="half">
 
-##### Streamlit configuration
+<h5>Streamlit configuration</h5>
 
 Streamlit provides four different ways to set configuration options. Learn how to use each of them to change the behavior of Streamlit.
 
@@ -50,7 +50,7 @@ Streamlit provides four different ways to set configuration options. Learn how t
 
 <RefCard href="/library/advanced-features/theming" size="half">
 
-##### Theming
+<h5>Theming</h5>
 
 This section provides examples of how Streamlit page elements are affected by the various theme config options.
 
@@ -65,7 +65,7 @@ This section provides examples of how Streamlit page elements are affected by th
 
 <RefCard href="/library/advanced-features/caching" size="half">
 
-##### Caching
+<h5>Caching</h5>
 
 The Streamlit cache allows your app to stay performant even when loading data from the web, manipulating large datasets, or performing expensive computations. To cache a function in Streamlit, you need to decorate it with one of two decorators: `st.cache_data` and `st.cache_resource`.
 
@@ -86,7 +86,7 @@ The Streamlit cache allows your app to stay performant even when loading data fr
 
 <RefCard href="/library/advanced-features/session-state" size="half">
 
-##### Add statefulness to apps
+<h5>Add statefulness to apps</h5>
 
 Session State is a way to share variables between reruns, for each user session. In addition to the ability to store and persist state, Streamlit also exposes the ability to manipulate state using Callbacks.
 
@@ -103,7 +103,7 @@ Session State is a way to share variables between reruns, for each user session.
 
 <RefCard href="/library/advanced-features/prerelease" size="half">
 
-##### Pre-release features
+<h5>Pre-release features</h5>
 
 At Streamlit, we like to move quick while keeping things stable. In our latest effort to move even faster without sacrificing stability, we're offering our bold and fearless users two ways to try out Streamlit's bleeding-edge features.
 
@@ -114,7 +114,7 @@ At Streamlit, we like to move quick while keeping things stable. In our latest e
 
 <RefCard href="/library/advanced-features/secrets-management" size="half">
 
-##### Secrets management
+<h5>Secrets management</h5>
 
 This section provides examples of how to use secrets management to store and retrieve sensitive information in your Streamlit app.
 
@@ -127,7 +127,7 @@ This section provides examples of how to use secrets management to store and ret
 
 <RefCard href="/library/advanced-features/timezone-handling" size="half">
 
-##### Working with timezones
+<h5>Working with timezones</h5>
 
 Working with timezones can be tricky. This section provides a high-level description of how to handle timezones in Streamlit to avoid unexpected behavior.
 
@@ -140,7 +140,7 @@ Working with timezones can be tricky. This section provides a high-level descrip
 
 <RefCard href="/library/advanced-features/widget-semantics" size="full">
 
-##### Advanced notes on widget behavior
+<h5>Advanced notes on widget behavior</h5>
 
 Widgets are magical and often work how you want. But they can have surprising behavior in some situations. This section provides is a high-level, abstract description of widget behavior, including some common edge-cases.