added too big copy button

astro.config.mjs

@@ -10,14 +10,23 @@ import rehypePrettyCode from "rehype-pretty-code";
 import codeTheme from "./src/styles/moonlight-ii.json";
 import mdx from "@astrojs/mdx";
 import lighthouse from "astro-lighthouse";
-
 import icon from "astro-icon";
 
+import expressiveCode from "astro-expressive-code";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [minify(), metaTags(), mdx(), lighthouse(), icon()],
+  integrations: [
+    minify(),
+    metaTags(),
+    expressiveCode({ themes: [codeTheme] }),
+    mdx(),
+    lighthouse(),
+    icon(),
+  ],
   markdown: {
-    syntaxHighlight: false, // Disable syntax built-in syntax hightlighting from astro
+    syntaxHighlight: false,
+    // Disable syntax built-in syntax hightlighting from astro
     rehypePlugins: [
       rehypeSlug,
       [
@@ -43,8 +52,5 @@ export default defineConfig({
         },
       ],
     ],
-    shikiConfig: {
-      theme: "dracula",
-    },
   },
 });

package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "@astrojs/markdown-remark": "^4.2.1",
     "@astrojs/mdx": "^2.1.1",
+    "@expressive-code/plugin-shiki": "^0.32.4",
     "@microflash/remark-callout-directives": "^2.0.0",
     "astro": "^4.2.6",
+    "astro-expressive-code": "^0.32.4",
     "astro-icon": "^1.1.0",
     "astro-lighthouse": "^0.1.3",
     "astro-meta-tags": "^0.2.1",

src/styles/main.scss

@@ -79,16 +79,24 @@ figure {
   margin: 0;
 }
 
-pre {
+.expressive-code {
   code {
     background-color: transparent;
   }
+  pre {
+    background-color: transparent !important;
+    border: transparent !important;
+    background: none !important;
+  }
+  figure {
+    box-shadow: none !important;
+  }
   overflow: scroll;
   display: grid;
-  padding: 15px;
   margin: 0;
-  border-radius: 25px;
   max-width: 50vw;
+  background-color: #282a36;
+  border-radius: 25px;
 }
 
 code {