Add expressive code extension

astro.config.mjs

@@ -1,12 +1,12 @@
-import mdx from "@astrojs/mdx";
-import sitemap from "@astrojs/sitemap";
-import tailwind from "@astrojs/tailwind";
-import vercel from "@astrojs/vercel/serverless";
-import sentry from "@sentry/astro";
-import robotsTxt from "astro-robots-txt";
-import { defineConfig } from "astro/config";
-
-const isProduction = process.env.NODE_ENV === "production";
+import mdx from "@astrojs/mdx"
+import sitemap from "@astrojs/sitemap"
+import tailwind from "@astrojs/tailwind"
+import vercel from "@astrojs/vercel/serverless"
+import sentry from "@sentry/astro"
+import expressiveCode from "astro-expressive-code"
+import robotsTxt from "astro-robots-txt"
+import { defineConfig } from "astro/config"
+const isProduction = process.env.NODE_ENV === "production"
 
 // https://astro.build/config
 export default defineConfig({
@@ -16,6 +16,13 @@ export default defineConfig({
   integrations: [
     sitemap(),
     robotsTxt(),
+    expressiveCode({
+      themes: ["one-dark-pro"],
+      defaultProps: {
+        // Enable word wrap by default
+        wrap: true,
+      },
+    }),
     mdx(),
     sentry({
       dsn: "https://c8fc23d45a17004cddf52ecfee998bf2@o1115887.ingest.sentry.io/4506532148936704",
@@ -29,4 +36,4 @@ export default defineConfig({
     }),
     tailwind(),
   ],
-});
+})

package.json

@@ -27,6 +27,7 @@
     "@sentry/astro": "^7.102.1",
     "astro": "^4.4.5",
     "astro-embed": "^0.6.1",
+    "astro-expressive-code": "^0.33.4",
     "astro-og-canvas": "^0.4.2",
     "astro-robots-txt": "^1.0.0",
     "canvaskit-wasm": "^0.39.1",