Add shiki to config, set theme & tune theme bg with CSS

astro.config.mjs

@@ -5,4 +5,17 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 export default defineConfig({
   integrations: [tailwind()],
+  markdown: {
+    shikiConfig: {
+      // Choose from Shiki's built-in themes (or add your own)
+      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
+      theme: 'github-dark',
+      // Add custom languages
+      // Note: Shiki has countless langs built-in, including .astro!
+      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
+      langs: [],
+      // Enable word wrap to prevent horizontal scrolling
+      wrap: true,
+    },
+  },
 });

src/styles/code.scss

@@ -2,7 +2,6 @@ pre,
 code {
   font-family: "CMU Typewriter Text", monospace;
   font-size: 0.8em;
-  font-style: normal !important;
 }
 
 // Inline code styling
@@ -29,8 +28,12 @@ a > code {
 
 pre {
   background: rgb(25, 25, 25);
-  border-radius: 7px;
+  border-radius: 5px;
   padding: 1em;
+  
+  &.astro-code {
+    background-color: #191919 !important;
+  }
 
   code {
     font-size: 1em;