fix: use the unified() processor in remark/rehype recipes (#14046)

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

Author: 3 people

src/content/docs/en/recipes/external-links.mdx

@@ -16,45 +16,48 @@ Using a rehype plugin, you can identify and modify links in your Markdown files
 ## Recipe
 
 <Steps>
-1. Install the `rehype-external-links` plugin.
+1. Install both the [`rehype-external-links`](https://www.npmjs.com/package/rehype-external-links) plugin and [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark).
 
     <PackageManagerTabs>
         <Fragment slot="npm">
         ```shell
-        npm install rehype-external-links
+        npm install rehype-external-links @astrojs/markdown-remark
         ```
         </Fragment>
         <Fragment slot="pnpm">
         ```shell
-        pnpm add rehype-external-links
+        pnpm add rehype-external-links @astrojs/markdown-remark
         ```
         </Fragment>
         <Fragment slot="yarn">
         ```shell
-        yarn add rehype-external-links
+        yarn add rehype-external-links @astrojs/markdown-remark
         ```
         </Fragment>
       </PackageManagerTabs>
 
-2. Import the plugin into your `astro.config.mjs` file.
+2. Configure the plugin in your `astro.config.mjs` file.
 
-	Pass `rehypeExternalLinks` to the `rehypePlugins` array, along with an options object that includes a content property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to	`raw`.
+    Import `unified()` and define it as the Markdown processor to [support remark plugins](/en/guides/markdown-content/#using-remark-and-rehype-plugins). Then, pass to `rehypePlugins` an array containing your imported `rehypeExternalLinks` plugin and an options object with a `content` property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to	`raw`.
 
-    ```ts
-    // ...
+    ```js title="astro.config.mjs"
+    import { unified } from '@astrojs/markdown-remark';
+    import { defineConfig } from 'astro/config';
     import rehypeExternalLinks from 'rehype-external-links';
 
     export default defineConfig({
       // ...
       markdown: {
-        rehypePlugins: [
-          [
-            rehypeExternalLinks,
-            {
-              content: { type: 'text', value: ' 🔗' }
-            }
-          ],
-        ]
+        processor: unified({
+          rehypePlugins: [
+            [
+              rehypeExternalLinks,
+              {
+                content: { type: 'text', value: ' 🔗' }
+              }
+            ],
+          ]
+        }),
       },
     });
     ```
@@ -63,7 +66,3 @@ Using a rehype plugin, you can identify and modify links in your Markdown files
       The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone.
     :::
 </Steps>
-
-
-## Resources
-- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)

src/content/docs/en/recipes/modified-time.mdx

@@ -16,44 +16,22 @@ This recipe calculates time based on your repository’s Git history and may not
 ## Recipe
 
 <Steps>
-1. Install Helper Packages
-
-   Install [`Day.js`](https://www.npmjs.com/package/dayjs) to modify and format times:
-
-   <PackageManagerTabs>
-     <Fragment slot="npm">
-       ```shell
-       npm install dayjs
-       ```
-     </Fragment>
-     <Fragment slot="pnpm">
-       ```shell
-       pnpm add dayjs
-       ```
-     </Fragment>
-     <Fragment slot="yarn">
-       ```shell
-       yarn add dayjs
-       ```
-     </Fragment>
-   </PackageManagerTabs>
-
-   Install [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark) to use [the `unified()` processor](/en/guides/markdown-content/#using-remark-and-rehype-plugins):
+1. Install [`Day.js`](https://www.npmjs.com/package/dayjs) to modify and format times, and [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark) to use [the `unified()` processor](/en/guides/markdown-content/#using-remark-and-rehype-plugins):
 
    <PackageManagerTabs>
      <Fragment slot="npm">
        ```shell
-       npm install @astrojs/markdown-remark
+       npm install dayjs @astrojs/markdown-remark
        ```
      </Fragment>
      <Fragment slot="pnpm">
        ```shell
-       pnpm add @astrojs/markdown-remark
+       pnpm add dayjs @astrojs/markdown-remark
        ```
      </Fragment>
      <Fragment slot="yarn">
        ```shell
-       yarn add @astrojs/markdown-remark
+       yarn add dayjs @astrojs/markdown-remark
        ```
      </Fragment>
    </PackageManagerTabs>

src/content/docs/en/recipes/reading-time.mdx

@@ -12,26 +12,25 @@ Create a [remark plugin](https://github.com/remarkjs/remark) which adds a readin
 ## Recipe
 
 <Steps>
-1. Install Helper Packages
-
-    Install these two helper packages:
+1. Install the following packages:
     - [`reading-time`](https://www.npmjs.com/package/reading-time) to calculate minutes read
     - [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) to extract all text from your markdown
+    - [`@astrojs/markdown-remark`](https://www.npmjs.com/package/@astrojs/markdown-remark) to use [the `unified()` processor](/en/guides/markdown-content/#using-remark-and-rehype-plugins):
 
     <PackageManagerTabs>
       <Fragment slot="npm">
       ```shell
-    npm install reading-time mdast-util-to-string
+    npm install reading-time mdast-util-to-string @astrojs/markdown-remark
       ```
       </Fragment>
       <Fragment slot="pnpm">
       ```shell
-    pnpm add reading-time mdast-util-to-string
+    pnpm add reading-time mdast-util-to-string @astrojs/markdown-remark
       ```
       </Fragment>
       <Fragment slot="yarn">
       ```shell
-    yarn add reading-time mdast-util-to-string
+    yarn add reading-time mdast-util-to-string @astrojs/markdown-remark
       ```
       </Fragment>
     </PackageManagerTabs>
@@ -57,13 +56,16 @@ Create a [remark plugin](https://github.com/remarkjs/remark) which adds a readin
 
 3. Add the plugin to your config:
 
-    ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime],"
+    ```js title="astro.config.mjs" {1,3,7-9}
+    import { unified } from '@astrojs/markdown-remark';
     import { defineConfig } from 'astro/config';
     import { remarkReadingTime } from './remark-reading-time.mjs';
 
     export default defineConfig({
       markdown: {
-        remarkPlugins: [remarkReadingTime],
+        processor: unified({
+          remarkPlugins: [remarkReadingTime],
+        }),
       },
     });
     ```