chore: add expressive code (#768)

Author: ascorbic

docs/astro.config.mjs

@@ -5,7 +5,7 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import { imageService } from "@unpic/astro/service";
 import icon from "astro-icon";
-
+import expressiveCode from "astro-expressive-code";
 import netlify from "@astrojs/netlify";
 
 // https://astro.build/config
@@ -33,17 +33,14 @@ export default defineConfig({
         "src/components/CodeEditor/index.tsx",
       ],
     }),
+    expressiveCode({
+      themes: ["one-dark-pro"],
+    }),
     mdx(),
     sitemap(),
     icon(),
   ],
 
-  markdown: {
-    shikiConfig: {
-      theme: "one-dark-pro",
-    },
-  },
-
   site: `https://unpic.pics`,
   adapter: netlify(),
 });

docs/package.json

@@ -32,10 +32,11 @@
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@unpic/astro": "^",
+    "@unpic/astro": "workspace:^",
     "@unpic/placeholder": "^0.1.2",
     "@unpic/react": "workspace:^",
     "astro": "^5.1.7",
+    "astro-expressive-code": "^0.40.1",
     "astro-icon": "^1.1.5",
     "bluesky-comments-tag": "^0.0.2",
     "blurhash": "^2.0.5",
@@ -52,4 +53,4 @@
     "@types/pako": "^2.0.3",
     "html-escaper": "^3.0.3"
   }
-}
+}

docs/src/content/blog/unpic-1.mdx

@@ -54,7 +54,7 @@ for each provider separately.
 
 <Image alt="Auto-complete of provider operations" src={operationsImg} />
 
-```tsx
+```tsx {3}
 <Image
   src={imgUrl}
   operations={{ imgix: { flip: "h" }, bunny: { flop: true } }}
@@ -106,7 +106,7 @@ logic. You can provide your own transformer, or use a single, tree-shakable
 provider import. This is useful if you are using a single provider, or if you
 are building a custom component based on Unpic.
 
-```tsx
+```tsx {2,4,9}
 // Import from the `/base` subpath
 import { Image } from "@unpic/react/base";
 // Import the transformer for the provider you are using