Display code blocks in reference descriptions as blocks without highlighting

Author: davepagurek

src/layouts/ReferenceItemLayout.astro

@@ -89,7 +89,7 @@ const seenParams: Record<string, true> = {};
     <div class="col-span-9 xl:min-w-[1000px]">
       <div
         set:html={description}
-        class="[&_a]:text-type-magenta-dark [&_a]:!decoration-type-magenta-dark mb-xl"
+        class="[&_a]:text-type-magenta-dark [&_a]:!decoration-type-magenta-dark mb-xl reference-item"
       />
       {
         examples && (

styles/global.scss

@@ -232,7 +232,8 @@ section,
   }
 }
 
-.astro-code {
+.astro-code,
+.reference-item pre {
   margin-top: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 }
@@ -245,7 +246,8 @@ section,
 }
 
 .astro-code,
-.code-box {
+.code-box,
+.reference-item pre {
   background-color: var(--bg-gray-40) !important;
   padding: var(--spacing-sm);
   max-width: 100%;
@@ -262,10 +264,15 @@ section,
   }
 }
 
+.reference-item pre code {
+  background-color: transparent;
+}
+
 .astro-code pre,
 pre.astro-code,
 .code-box pre,
-pre.code-box {
+pre.code-box,
+.reference-item pre {
   white-space: break-spaces;
 }