update all the readme's for expressive code (#8691)

Co-authored-by: HiDeoo <HiDeoo@users.noreply.github.com>
Co-authored-by: Genteure <Genteure@users.noreply.github.com>
Co-authored-by: Bryce Russell <brycetrussell@gmail.com>
Co-authored-by: Reuben Tier <TheOtterlord@users.noreply.github.com>
Co-authored-by: Hippo <hippotastic@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Kevin Zuniga Cuellar <kevinzunigacuellar@users.noreply.github.com>

packages/integrations/alpinejs/README.md

@@ -67,7 +67,10 @@ The Alpine.js integration does not give you control over how the script is loade
 
 **It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:
 
-```astro title="src/pages/index.astro"
+```astro
+---
+// src/pages/index.astro
+---
 <!-- Example: Load AlpineJS on a single page. -->
 <script>
   import Alpine from 'alpinejs';

packages/integrations/cloudflare/README.md

@@ -25,14 +25,14 @@ npm install @astrojs/cloudflare
 
 2. Add the following to your `astro.config.mjs` file:
 
-```js ins={3, 6-7}
+```diff lang="ts"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import cloudflare from '@astrojs/cloudflare';
++ import cloudflare from '@astrojs/cloudflare';
 
   export default defineConfig({
-  output: 'server',
-  adapter: cloudflare(),
++   output: 'server',
++   adapter: cloudflare(),
   });
 ```
 
@@ -61,7 +61,8 @@ In `directory` mode, the adapter will compile the client-side part of your app t
 
 To instead compile a separate bundle for each page, set the `functionPerPath` option in your Cloudflare adapter config. This option requires some manual maintenance of the `functions` folder. Files emitted by Astro will overwrite existing `functions` files with identical names, so you must choose unique file names for each file you manually add. Additionally, the adapter will never empty the `functions` folder of outdated files, so you must clean up the folder manually when you remove pages.
 
-```diff
+```diff lang="ts"
+  // astro.config.mjs
   import {defineConfig} from "astro/config";
   import cloudflare from '@astrojs/cloudflare';
 
@@ -147,7 +148,7 @@ If you want to use the automatic `_routes.json` generation, but want to exclude
 
 The following example automatically generates `_routes.json` while including and excluding additional routes. Note that that is only necessary if you have custom functions in the `functions` folder that are not handled by Astro.
 
-```diff
+```diff lang="ts"
   // astro.config.mjs
   export default defineConfig({
     adapter: cloudflare({
@@ -287,7 +288,7 @@ Whether or not to import `.wasm` files [directly as ES modules](https://github.c
 
 Add `wasmModuleImports: true` to `astro.config.mjs` to enable in both the Cloudflare build and the Astro dev server.
 
-```diff
+```diff lang="ts"
   // astro.config.mjs
   import {defineConfig} from "astro/config";
   import cloudflare from '@astrojs/cloudflare';
@@ -304,7 +305,7 @@ Once enabled, you can import a web assembly module in Astro with a `.wasm?module
 
 The following is an example of importing a Wasm module that then responds to requests by adding the request's number parameters together.
 
-```javascript
+```js
 // pages/add/[a]/[b].js
 import mod from '../util/add.wasm?module';
 
@@ -366,18 +367,19 @@ You can also check our [Astro Integration Documentation][astro-integration] for
 
 ### Meaningful error messages
 
-Currently, errors during running your application in Wrangler are not very useful, due to the minification of your code. For better debugging, you can add `vite.build.minify = false` setting to your `astro.config.js`
+Currently, errors during running your application in Wrangler are not very useful, due to the minification of your code. For better debugging, you can add `vite.build.minify = false` setting to your `astro.config.mjs`.
 
-```js
+```diff lang="js"
+  // astro.config.mjs
   export default defineConfig({
     adapter: cloudflare(),
     output: 'server',
 
-  vite: {
-    build: {
-      minify: false,
-    },
-  },
++   vite: {
++     build: {
++       minify: false,
++     },
++   },
   });
 ```
 

packages/integrations/lit/README.md

@@ -42,14 +42,15 @@ npm install lit @webcomponents/template-shadowroot
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "lit()"
+```diff lang="js" "lit()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import lit from '@astrojs/lit';
++ import lit from '@astrojs/lit';
 
   export default defineConfig({
     // ...
     integrations: [lit()],
+    //             ^^^^^
   });
 ```
 
@@ -121,7 +122,8 @@ These globals _can_ interfere with other libraries that might use the existence
 
 Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
 
-```diff
+```diff lang="js"
+  // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import vue from '@astrojs/vue';
   import lit from '@astrojs/lit';
@@ -138,7 +140,8 @@ The correct order might be different depending on the underlying cause of the pr
 
 When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
 
-```ini title=".npmrc"
+```ini
+# .npmrc
 public-hoist-pattern[]=*lit*
 ```
 

packages/integrations/markdoc/README.md

@@ -42,14 +42,14 @@ npm install @astrojs/markdoc
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "markdoc()"
+```diff lang="js" "markdoc()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import markdoc from '@astrojs/markdoc';
-
++ import markdoc from '@astrojs/markdoc';
   export default defineConfig({
     // ...
     integrations: [markdoc()],
+    //             ^^^^^^^^^
   });
 ```
 
@@ -443,14 +443,15 @@ By default, Markdoc will not recognize HTML markup as semantic content.
 
 To achieve a more Markdown-like experience, where HTML elements can be included alongside your content, set `allowHTML:true` as a `markdoc` integration option. This will enable HTML parsing in Markdoc markup.
 
-```js {7} "allowHTML: true"
+```diff lang="js" "allowHTML: true"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import markdoc from '@astrojs/markdoc';
 
   export default defineConfig({
     // ...
-  integrations: [markdoc({ allowHTML: true })],
++   integrations: [markdoc({ allowHTML: true })],
+    //                       ^^^^^^^^^^^^^^^
   });
 ```
 

packages/integrations/mdx/README.md

@@ -42,14 +42,15 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "mdx()"
+```diff lang="js" "mdx()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
++ import mdx from '@astrojs/mdx';
 
   export default defineConfig({
     // ...
     integrations: [mdx()],
+    //             ^^^^^
   });
 ```
 

packages/integrations/node/README.md

@@ -43,16 +43,16 @@ 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 ins={3, 6-9}
+   ```diff lang="js"
      // astro.config.mjs
      import { defineConfig } from 'astro/config';
-   import node from '@astrojs/node';
+   + import node from '@astrojs/node';
  
       export default defineConfig({
-     output: 'server',
-     adapter: node({
-       mode: 'standalone',
-     }),
+   +   output: 'server',
+   +   adapter: node({
+   +     mode: 'standalone',
+   +   }),
      });
    ```
 
@@ -67,6 +67,7 @@ Controls whether the adapter builds to `middleware` or `standalone` mode.
 - `middleware` mode allows the built output to be used as middleware for another Node.js server, like Express.js or Fastify.
 
   ```js
+  // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import node from '@astrojs/node';
 
@@ -91,6 +92,7 @@ The server entrypoint is built to `./dist/server/entry.mjs` by default. This mod
 For example, with Express:
 
 ```js
+// run-server.mjs
 import express from 'express';
 import { handler as ssrHandler } from './dist/server/entry.mjs';
 
@@ -107,6 +109,7 @@ app.listen(8080);
 Or, with Fastify (>4):
 
 ```js
+// run-server.mjs
 import Fastify from 'fastify';
 import fastifyMiddie from '@fastify/middie';
 import fastifyStatic from '@fastify/static';
@@ -128,6 +131,7 @@ app.listen({ port: 8080 });
 Additionally, you can also pass in an object to be accessed with `Astro.locals` or in Astro middleware:
 
 ```js
+// run-server.mjs
 import express from 'express';
 import { handler as ssrHandler } from './dist/server/entry.mjs';
 
@@ -192,20 +196,19 @@ export $(cat .env.runtime) && astro build
 
 You may see this when running the entry script if it was built with npm or Yarn. This is a known issue that may be fixed in a future release. As a workaround, add `"path-to-regexp"` to the `noExternal` array:
 
-```js ins={9-13}
+```diff lang="js"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-
   import node from '@astrojs/node';
 
   export default defineConfig({
     output: 'server',
     adapter: node(),
-  vite: {
-    ssr: {
-      noExternal: ['path-to-regexp'],
-    },
-  },
++   vite: {
++     ssr: {
++       noExternal: ['path-to-regexp'],
++     },
++   },
   });
 ```
 

packages/integrations/partytown/README.md

@@ -46,14 +46,15 @@ npm install @astrojs/partytown
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js
+```diff lang="js" "partytown()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import partytown from '@astrojs/partytown';
++ import partytown from '@astrojs/partytown';
 
   export default defineConfig({
     // ...
     integrations: [partytown()],
+    //             ^^^^^^^^^^^
   });
 ```
 
@@ -61,7 +62,7 @@ export default defineConfig({
 
 Partytown should be ready to go with zero config. If you have an existing 3rd party script on your site, try adding the `type="text/partytown"` attribute:
 
-```diff
+```diff lang="html"
 -  <script src="fancy-analytics.js"></script>
 +  <script type="text/partytown" src="fancy-analytics.js"></script>
 ```

packages/integrations/preact/README.md

@@ -53,14 +53,15 @@ npm install preact
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "preact()"
+```diff lang="js" "preact()"
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
++ import preact from '@astrojs/preact';
 
 export default defineConfig({
   // ...
   integrations: [preact()],
+  //             ^^^^^^^^
 });
 ```
 
@@ -93,6 +94,7 @@ import preact from '@astrojs/preact';
 
 export default defineConfig({
   integrations: [preact({ compat: true })],
+  //                      ^^^^^^^^^^^^
 });
 ```
 
@@ -100,8 +102,7 @@ With the `compat` option enabled, the Preact integration will render React compo
 
 When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.
 
-```json
-// package.json
+```json title="package.json"
 {
   "overrides": {
     "react": "npm:@preact/compat@latest",
@@ -126,6 +127,7 @@ Use the `include` (required) and `exclude` (optional) configuration options to s
 We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
 
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';

packages/integrations/prefetch/README.md

@@ -41,14 +41,15 @@ npm install @astrojs/prefetch
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "prefetch()"
+```diff lang="js" "prefetch()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import prefetch from '@astrojs/prefetch';
++ import prefetch from '@astrojs/prefetch';
 
   export default defineConfig({
     // ...
     integrations: [prefetch()],
+    //             ^^^^^^^^^^
   });
 ```
 

packages/integrations/react/README.md

@@ -42,14 +42,15 @@ npm install react react-dom
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "react()"
+```diff lang="js" "react()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import react from '@astrojs/react';
++ import react from '@astrojs/react';
 
   export default defineConfig({
     // ...
     integrations: [react()],
+    //             ^^^^^^^
   });
 ```
 
@@ -72,6 +73,7 @@ Use the `include` (required) and `exclude` (optional) configuration options to s
 We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
 
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';

packages/integrations/sitemap/README.md

@@ -48,14 +48,15 @@ npm install @astrojs/sitemap
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "sitemap()"
+```diff lang="js" "sitemap()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import sitemap from '@astrojs/sitemap';
++ import sitemap from '@astrojs/sitemap';
 
   export default defineConfig({
     // ...
     integrations: [sitemap()],
+    //             ^^^^^^^^^
   });
 ```
 
@@ -84,19 +85,19 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli-
 
 After verifying that the sitemaps are built, you can add them to your site's `<head>` and the `robots.txt` file for crawlers to pick up.
 
-```html ins={3}
+```diff lang="html"
   <!-- src/layouts/Layout.astro -->
   <head>
-  <link rel="sitemap" href="/sitemap-index.xml" />
++   <link rel="sitemap" href="/sitemap-index.xml" />
   </head>
 ```
 
-<!-- prettier-ignore -->
-```diff ins={4} title="public/robots.txt"
+```diff
+  # public/robots.txt
   User-agent: *
   Allow: /
 
-Sitemap: https://<YOUR SITE>/sitemap-index.xml
++ Sitemap: https://<YOUR SITE>/sitemap-index.xml
 ```
 
 ### Example of generated files for a two-page website

packages/integrations/solid/README.md

@@ -42,14 +42,15 @@ npm install solid-js
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "solid()"
+```diff lang="js" "solid()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import solid from '@astrojs/solid-js';
++ import solid from '@astrojs/solid-js';
 
   export default defineConfig({
     // ...
     integrations: [solid()],
+    //             ^^^^^^^
   });
 ```
 
@@ -72,6 +73,7 @@ Use the `include` (required) and `exclude` (optional) configuration options to s
 We recommend placing common framework components in the same folder (e.g. `/components/react/` and `/components/solid/`) to make specifying your includes easier, but this is not required:
 
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';

packages/integrations/svelte/README.md

@@ -42,14 +42,15 @@ npm install svelte
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "svelte()"
+```diff lang="js" "svelte()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import svelte from '@astrojs/svelte';
++ import svelte from '@astrojs/svelte';
 
   export default defineConfig({
     // ...
     integrations: [svelte()],
+    //             ^^^^^^^^
   });
 ```
 

packages/integrations/tailwind/README.md

@@ -50,14 +50,15 @@ npm install @astrojs/tailwind tailwindcss
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "tailwind()"
+```diff lang="js" "tailwind()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
++ import tailwind from '@astrojs/tailwind';
 
   export default defineConfig({
     // ...
     integrations: [tailwind()],
+    //             ^^^^^^^^^^
   });
 ```
 
@@ -69,11 +70,11 @@ npx tailwindcss init
 
 Finally, add this basic configuration to your `tailwind.config.cjs` file:
 
-```js ins={4} "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
+```diff lang="js" "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
   // tailwind.config.cjs
   /** @type {import('tailwindcss').Config} */
   module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
++   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
       extend: {},
     },

packages/integrations/vercel/README.md

@@ -45,14 +45,14 @@ 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 ins={3, 6-7}
+   ```diff lang="js"
      // astro.config.mjs
      import { defineConfig } from 'astro/config';
-   import vercel from '@astrojs/vercel/serverless';
+   + import vercel from '@astrojs/vercel/serverless';
 
      export default defineConfig({
-     output: 'server',
-     adapter: vercel(),
+   +   output: 'server',
+   +   adapter: vercel(),
      });
    ```
 

packages/integrations/vue/README.md

@@ -42,14 +42,15 @@ npm install vue
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "vue()"
+```diff lang="js" "vue()"
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
-import vue from '@astrojs/vue';
++ import vue from '@astrojs/vue';
 
   export default defineConfig({
     // ...
     integrations: [vue()],
+    //             ^^^^^
   });
 ```