Move code block titles into comments to match docs (#7543)

Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>

packages/integrations/alpinejs/README.md

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

packages/integrations/deno/README.md

@@ -96,9 +96,8 @@ deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs
 
 To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import deno from '@astrojs/deno';
 

packages/integrations/image/README.md

@@ -63,9 +63,8 @@ npm install @astrojs/image
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "image()"
+```js ins={3} "image()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -85,9 +84,8 @@ npm install sharp
 
 Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
 
-**`astro.config.mjs`**
-
-```js ins={7}
+```js ins={8}
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -478,9 +476,8 @@ The integration can be configured to run with a different image service, either
 
 The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -498,9 +495,8 @@ export default defineConfig({
 
 The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -523,9 +519,8 @@ Local images will be cached for 1 year and invalidated when the original image f
 
 By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 

packages/integrations/lit/README.md

@@ -42,9 +42,8 @@ npm install lit @webcomponents/template-shadowroot
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "lit()"
+```js ins={3} "lit()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import lit from '@astrojs/lit';
 
@@ -66,9 +65,8 @@ However, there's a key difference with Lit _custom elements_ over conventional _
 
 Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
 
-**`src/components/my-element.js`**
-
 ```js
+// src/components/my-element.js
 import { LitElement, html } from 'lit';
 
 const tagName = 'my-element';
@@ -86,10 +84,9 @@ customElements.define(tagName, MyElement);
 
 In your Astro template import this component as a side-effect and use the element.
 
-**`src/pages/index.astro`**
-
 ```astro
 ---
+// src/pages/index.astro
 import { MyElement } from '../components/my-element.js';
 ---
 

packages/integrations/markdoc/README.md

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

packages/integrations/mdx/README.md

@@ -42,9 +42,8 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "mdx()"
+```js ins={3} "mdx()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -95,9 +94,8 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -132,9 +130,8 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -160,9 +157,8 @@ export default defineConfig({
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -194,9 +190,8 @@ This is an optional configuration setting to optimize the MDX output for faster
 
 This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -230,9 +225,8 @@ import Heading from '../Heading.astro';
 
 To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 

packages/integrations/partytown/README.md

@@ -46,9 +46,8 @@ npm install @astrojs/partytown
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import partytown from '@astrojs/partytown';
 
@@ -73,9 +72,8 @@ If you open the "Network" tab from [your browser's dev tools](https://developer.
 
 To configure this integration, pass a 'config' object to the `partytown()` function call in `astro.config.mjs`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 // ...
 export default defineConfig({
   integrations: [
@@ -96,9 +94,8 @@ Partytown ships with a `debug` mode; enable or disable it by passing `true` or `
 
 If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 export default defineConfig({
   integrations: [
     partytown({
@@ -117,9 +114,8 @@ To solve this, Partytown can "patch" variables to the global window object and f
 
 You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events)
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 export default defineConfig({
   integrations: [
     partytown({

packages/integrations/preact/README.md

@@ -53,9 +53,8 @@ npm install preact
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "preact()"
+```js ins={3} "preact()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 
@@ -87,9 +86,8 @@ You can enable `preact/compat`, Preact’s compatibility layer for rendering Rea
 
 To do so, pass an object to the Preact integration and set `compat: true`.
 
-**`astro.config.mjs`**
-
 ```js "compat: true"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 

packages/integrations/prefetch/README.md

@@ -41,9 +41,8 @@ npm install @astrojs/prefetch
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "prefetch()"
+```js ins={3} "prefetch()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 
@@ -65,9 +64,8 @@ The Astro Prefetch integration handles which links on the site are prefetched an
 
 By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 
@@ -86,9 +84,8 @@ export default defineConfig({
 
 By default the prefetch script will only prefetch one link at a time. This behavior can be changed in your `astro.config.*` file to increase the limit for concurrent downloads.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import prefetch from '@astrojs/prefetch';
 

packages/integrations/react/README.md

@@ -42,9 +42,8 @@ npm install react react-dom
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "react()"
+```js ins={3} "react()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';