Integration READMEs code block sweep 🧹 (#5455)

packages/integrations/alpinejs/README.md

@@ -44,7 +44,8 @@ npm install alpinejs @types/alpinejs
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
 
-```js title="astro.config.mjs" ins={2} "alpine()"
+```js ins={3} "alpine()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import alpine from '@astrojs/alpinejs';
 

packages/integrations/cloudflare/README.md

@@ -25,7 +25,8 @@ npm install @astrojs/cloudflare
 
 2. Add the following to your `astro.config.mjs` file:
 
-```js title="astro.config.mjs" ins={2, 5-6}
+```js ins={3, 6-7}
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import cloudflare from '@astrojs/cloudflare';
 

packages/integrations/deno/README.md

@@ -55,27 +55,26 @@ If you prefer to install the adapter manually instead, complete the following tw
     });
     ```
 
-Next, Update your `preview` script in `package.json` with the change below.
+Next, update your `preview` script in `package.json` to run `deno`:
 
-    ```json del={8} ins={9}
+```json ins={8}
-    // package.json
+// package.json
-    {
+{
   // ...
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
-        "preview": "astro preview"
     "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
   }
-    }
+}
-    ```
+```
 
-    You can now use this command to preview your production Astro site locally with Deno.
+You can now use this command to preview your production Astro site locally with Deno.
 
-    ```bash
+```bash
-    npm run preview
+npm run preview
-    ```
+```
   
 ## Usage
 

packages/integrations/image/README.md

@@ -75,12 +75,15 @@ export default {
 ### Installing `sharp` (optional)
 
 First, install the `sharp` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
+
 ```sh
 npm install sharp
 ```
+
 Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
-```astro title="astro.config.mjs"
+
----
+```js ins={2,7}
+// astro.config.mjs
 import image from '@astrojs/image';
 
 export default {
@@ -89,7 +92,6 @@ export default {
     serviceEntryPoint: '@astrojs/image/sharp'
   })],
 }
----
 ```
 
 ### Update `env.d.ts`

packages/integrations/netlify/README.md

@@ -46,7 +46,8 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 1. Add two new lines to your `astro.config.mjs` project configuration file.
 
-    ```js title="astro.config.mjs" ins={2, 5-6}
+    ```js ins={3, 6-7}
+    // astro.config.mjs
     import { defineConfig } from 'astro/config';
     import netlify from '@astrojs/netlify/functions';
 
@@ -58,18 +59,20 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 ### Edge Functions
 
-Netlify has two serverless platforms, Netlify Functions and [Netlify's experimental Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app). With Edge Functions your code is distributed closer to your users, lowering latency. You can use Edge Functions by changing the `netlify/functions` import in the Astro config file to use `netlify/edge-functions`.
+Netlify has two serverless platforms, Netlify Functions and [Netlify's experimental Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app). With Edge Functions your code is distributed closer to your users, lowering latency.
 
-      ```js title="astro.config.mjs" ins={3} del={2}
+To deploy with Edge Functions, use `netlify/edge-functions` in the Astro config file instead of `netlify/functions`.
-      import { defineConfig } from 'astro/config';
-      import netlify from '@astrojs/netlify/functions';
-      import netlify from '@astrojs/netlify/edge-functions';
 
-      export default defineConfig({
+```js ins={3}
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import netlify from '@astrojs/netlify/edge-functions';
+
+export default defineConfig({
   output: 'server',
   adapter: netlify(),
-      });
+});
-      ```
+```
 
 ## Usage
 
@@ -95,6 +98,7 @@ To configure this adapter, pass an object to the `netlify()` function call in `a
 We build to the `dist` directory at the base of your project. To change this, use the `dist` option:
 
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import netlify from '@astrojs/netlify/functions';
 
@@ -108,7 +112,7 @@ export default defineConfig({
 
 And then point to the dist in your `netlify.toml`:
 
-```toml
+```toml title="netlify.toml"
 [functions]
 directory = "dist/functions"
 ```
@@ -121,7 +125,9 @@ Netlify Functions requires binary data in the `body` to be base64 encoded. The `
 
 We check for common mime types for audio, image, and video files. To include specific mime types that should be treated as binary data, include the `binaryMediaTypes` option with a list of binary mime types.
 
-```js
+```js {12}
+// src/pages/image.jpg.ts
+
 import fs from 'node:fs';
 
 export function get() {

packages/integrations/node/README.md

@@ -42,7 +42,8 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 1. Add two new lines to your `astro.config.mjs` project configuration file.
 
-    ```js title="astro.config.mjs" ins={2, 5-8}
+    ```js ins={3, 6-9}
+    // astro.config.mjs
     import { defineConfig } from 'astro/config';
     import node from '@astrojs/node';
 
@@ -134,7 +135,8 @@ SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dis
 
 You may see this when running the entry script if it was built with npm or Yarn. This is a [known issue](https://github.com/withastro/astro/issues/4974) that will be fixed in a future release. As a workaround, add `"path-to-regexp"` to the `noExternal` array:
 
-```js title="astro.config.mjs" ins={8-12}
+```js ins={9-13}
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 
 import node from "@astrojs/node";

packages/integrations/tailwind/README.md

@@ -170,8 +170,9 @@ Certain Tailwind classes with modifiers rely on combining classes across multipl
 
 To fix this, you can use inline classes instead:
 
-```astro
+```html
 <p class="text-black group-hover:text-gray">Astro</p>
+```
 
 ### Others
 

packages/integrations/vercel/README.md

@@ -43,7 +43,8 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 1. Add two new lines to your `astro.config.mjs` project configuration file.
 
-    ```js title="astro.config.mjs" ins={2, 5-6}
+    ```js ins={3, 6-7}
+    // astro.config.mjs
     import { defineConfig } from 'astro/config';
     import vercel from '@astrojs/vercel/serverless';