styled copy button

astro.config.mjs

@@ -19,7 +19,14 @@ export default defineConfig({
   integrations: [
     minify(),
     metaTags(),
-    expressiveCode({ themes: [codeTheme] }),
+    expressiveCode({
+      themes: [codeTheme],
+      styleOverrides: {
+        frames: {
+          tooltipSuccessBackground: "#7ECA9C",
+        },
+      },
+    }),
     mdx(),
     lighthouse(),
     icon(),

src/styles/main.scss

@@ -91,6 +91,23 @@ figure {
   figure {
     box-shadow: none !important;
   }
+  .copy {
+    button {
+      width: 30px !important;
+      height: 30px !important;
+      margin: 5px !important;
+      border-radius: 25px !important;
+      display: none;
+    }
+  }
+  &:hover {
+    .copy {
+      button {
+        display: inline;
+      }
+    }
+  }
+  position: relative;
   overflow: scroll;
   display: grid;
   margin: 0;