Merge 1fa6372aec0a6c0c8b433296dd5406d7dcd543a4 into c5074c7c18702dd6d330e0048ca44847ac72358f

site/src/components/shortcodes/Code.astro

@@ -33,9 +33,14 @@ interface Props {
    * This takes precedence over the `code` prop.
    */
   filePath?: string
+  /**
+   * If the component is nested inside an example or not.
+   * @default false
+   */
+  nested?: boolean
 }
 
-const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props
+const { class: className, code, containerClass, fileMatch, filePath, lang, nested = false } = Astro.props
 
 let codeToDisplay = filePath
   ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')
@@ -130,11 +135,15 @@ if (filePath && fileMatch && codeToDisplay) {
   })
 </script>
 
-<div class:list={['bd-code-snippet', containerClass]}>
+<div class:list={[{ 'bd-code-snippet': !nested }, containerClass]}>
   {
-    Astro.slots.has('pre') ? (
+    nested
+      ? (<></>)
+      : Astro.slots.has('pre')
+        ? (
           <slot name="pre" />
-    ) : (
+        )
+        : (
           <div class="bd-clipboard">
             <button type="button" class="btn-clipboard">
               <svg class="bi" role="img" aria-label="Copy">

site/src/components/shortcodes/Example.astro

@@ -1,6 +1,6 @@
 ---
 import { replacePlaceholdersInHtml } from '@libs/placeholder'
-import { Prism } from '@astrojs/prism'
+import Code from '@components/shortcodes/Code.astro'
 
 interface Props {
   /**
@@ -96,9 +96,7 @@ const simplifiedMarkup = markup
             </div>
           </div>
         )}
-        <div class="highlight">
+        <Code code={simplifiedMarkup} lang={lang} nested={true} />
-          <Prism code={simplifiedMarkup} lang={lang} />
-        </div>
       </>
     )
   }