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={3} "alpine()"
-
+// astro.config.mjs
-```js ins={2} "alpine()"
 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={3} "image()"
-
+// astro.config.mjs
-```js ins={2} "image()"
 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={8}
-
+// astro.config.mjs
-```js ins={7}
 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={3} "lit()"
-
+// astro.config.mjs
-```js ins={2} "lit()"
 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={3} "markdoc()"
-
+// astro.config.mjs
-```js ins={2} "markdoc()"
 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={3} "mdx()"
-
+// astro.config.mjs
-```js ins={2} "mdx()"
 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={3} "preact()"
-
+// astro.config.mjs
-```js ins={2} "preact()"
 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={3} "prefetch()"
-
+// astro.config.mjs
-```js ins={2} "prefetch()"
 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={3} "react()"
-
+// astro.config.mjs
-```js ins={2} "react()"
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 

packages/integrations/sitemap/README.md

@@ -46,9 +46,8 @@ npm install @astrojs/sitemap
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+```js ins={3} "sitemap()"
-
+// astro.config.mjs
-```js ins={2} "sitemap()"
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -62,9 +61,8 @@ export default defineConfig({
 
 `@astrojs/sitemap` requires a deployment / site URL for generation. Add your site's URL under your `astro.config.*` using the `site` property. This must begin with `http:` or `https:`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -85,14 +83,14 @@ 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}
-// src/layouts/Layout.astro
+<!-- src/layouts/Layout.astro -->
 <head>
   <link rel="sitemap" href="/sitemap-index.xml" />
 </head>
 ```
 
 <!-- prettier-ignore -->
-``` ins={4} title="public/robots.txt"
+```diff ins={4} title="public/robots.txt"
 User-agent: *
 Allow: /
 
@@ -101,9 +99,7 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml
 
 ### Example of generated files for a two-page website
 
-**`sitemap-index.xml`**
+```xml title="sitemap-index.xml"
-
-```xml
 <?xml version="1.0" encoding="UTF-8"?>
   <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <sitemap>
@@ -112,9 +108,7 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml
 </sitemapindex>
 ```
 
-**`sitemap-0.xml`**
+```xml title="sitemap-0.xml"
-
-```xml
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
   <url>
@@ -130,9 +124,8 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml
 
 To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -149,9 +142,8 @@ export default defineConfig({
 
 All pages are included in your sitemap by default. By adding a custom `filter` function, you can filter included pages by URL.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 // ...
 sitemap({
   filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge',
@@ -162,9 +154,8 @@ The function will be called for every page on your site. The `page` function par
 
 To filter multiple pages, add arguments with target URLs.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 // ...
 sitemap({
   filter: (page) =>
@@ -179,9 +170,8 @@ sitemap({
 
 In some cases, a page might be part of your deployed site but not part of your Astro project. If you'd like to include a page in your sitemap that _isn't_ created by Astro, you can use this option.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 // ...
 sitemap({
   customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
@@ -192,9 +182,8 @@ sitemap({
 
 The maximum number entries per sitemap file. The default value is 45000. A sitemap index and multiple sitemaps are created if you have more entries. See this [explanation of splitting up a large sitemap](https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps).
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -217,9 +206,8 @@ Note that `changefreq` and `priority` are ignored by Google.
 > **Note**
 > Due to limitations of Astro's [Integration API](https://docs.astro.build/en/reference/integrations-reference/), this integration can't analyze a given page's source code. This configuration option can set `changefreq`, `lastmod` and `priority` on a _site-wide_ basis; see the next option **serialize** for how you can set these values on a per-page basis.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -255,9 +243,8 @@ The `serialize` function should return `SitemapItem`, touched or not.
 
 The example below shows the ability to add sitemap specific properties individually.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 
@@ -294,9 +281,8 @@ This object has two required properties:
 
 [Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines).
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
 

packages/integrations/solid/README.md

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

packages/integrations/svelte/README.md

@@ -42,9 +42,8 @@ npm install svelte
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+```js ins={3} "svelte()"
-
+// astro.config.mjs
-```js ins={2} "svelte()"
 import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
 
@@ -97,9 +96,8 @@ Providing your own `preprocess` options **will** override the [`vitePreprocess()
 
 You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
 
@@ -108,9 +106,8 @@ export default defineConfig({
 });
 ```
 
-**`svelte.config.js`**
-
 ```js
+// svelte.config.js
 export default {
   preprocess: [],
 };
@@ -122,9 +119,8 @@ export default {
 
 If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files.
 
-**`svelte.config.js`**
-
 ```js
+// svelte.config.js
 import { vitePreprocess } from '@astrojs/svelte';
 
 export default {

packages/integrations/tailwind/README.md

@@ -50,9 +50,8 @@ npm install @astrojs/tailwind tailwindcss
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+```js ins={3} "tailwind()"
-
+// astro.config.mjs
-```js ins={2} "tailwind()"
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
@@ -91,9 +90,8 @@ If you want to use a different Tailwind configuration file instead of the defaul
 > **Warning**
 > Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 
@@ -122,9 +120,8 @@ By default, the integration imports a basic `base.css` file on every page of you
 
 To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({

packages/integrations/vue/README.md

@@ -42,9 +42,8 @@ npm install vue
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
+```js ins={3} "vue()"
-
+// astro.config.mjs
-```js ins={2} "vue()"
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
@@ -79,9 +78,8 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
 
 This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue) for more details.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
@@ -107,9 +105,8 @@ You can extend the Vue `app` instance setting the `appEntrypoint` option to a ro
 
 The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
@@ -118,9 +115,8 @@ export default defineConfig({
 });
 ```
 
-**`src/pages/_app.ts`**
-
 ```js
+// src/pages/_app.ts
 import type { App } from 'vue';
 import i18nPlugin from 'my-vue-i18n-plugin';
 
@@ -133,9 +129,8 @@ export default (app: App) => {
 
 You can use Vue JSX by setting `jsx: true`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 
@@ -146,9 +141,8 @@ export default defineConfig({
 
 This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) for more details.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';