diff --git a/src/content/docs/en/guides/environment-variables.mdx b/src/content/docs/en/guides/environment-variables.mdx
index edfcd84c1d617..a11b906bffbe5 100644
--- a/src/content/docs/en/guides/environment-variables.mdx
+++ b/src/content/docs/en/guides/environment-variables.mdx
@@ -96,7 +96,8 @@ const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
 ```
 
 :::caution
-Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`.
+{/* Need to use <code> here because Vite does an auto-replace on import-meta-env that breaks rendering */}
+Because Vite statically replaces <code>{'import.meta.env'}</code>, you cannot access it with dynamic keys like <code>{'import.meta.env[key]'}</code>.
 :::
 
 When using SSR, environment variables can be accessed at runtime based on the SSR adapter being used. With most adapters you can access environment variables with `process.env`, but some adapters work differently. For the Deno adapter, you will use `Deno.env.get()`. See how to [access the Cloudflare runtime](/en/guides/integrations-guide/cloudflare/#cloudflare-runtime) to handle environment variables when using the Cloudflare adapter. Astro will first check the server environment for variables, and if they don't exist, Astro will look for them in .env files.