Merge 1fa6372aec0a6c0c8b433296dd5406d7dcd543a4 into c5074c7c18702dd6d330e0048ca44847ac72358f

site/src/components/shortcodes/Code.astro

@@ -33,15 +33,20 @@ 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')
   : Array.isArray(code)
-  ? code.join('\n')
+    ? code.join('\n')
-  : code
+    : code
 
 if (filePath && fileMatch && codeToDisplay) {
   const match = codeToDisplay.match(new RegExp(fileMatch))
@@ -130,19 +135,23 @@ 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
-      <slot name="pre" />
+      ? (<></>)
-    ) : (
+      : Astro.slots.has('pre')
-      <div class="bd-clipboard">
+        ? (
-        <button type="button" class="btn-clipboard">
+          <slot name="pre" />
-          <svg class="bi" role="img" aria-label="Copy">
+        )
-            <use xlink:href="#clipboard" />
+        : (
-          </svg>
+          <div class="bd-clipboard">
-        </button>
+            <button type="button" class="btn-clipboard">
-      </div>
+              <svg class="bi" role="img" aria-label="Copy">
-    )
+                <use xlink:href="#clipboard" />
+              </svg>
+            </button>
+          </div>
+        )
   }
   <div class="highlight">
     {

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>
       </>
     )
   }