From 7efbda97af2e52d5555ed6088d348f1943efa5da Mon Sep 17 00:00:00 2001
From: Mark Spratt <72772558+Hopelezz@users.noreply.github.com>
Date: Fri, 26 Aug 2022 06:14:40 -0700
Subject: [PATCH] Edit Alpinejs content generation for Docs (#4466)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 packages/integrations/alpinejs/README.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md
index 63aadf9b1..d3b501f40 100644
--- a/packages/integrations/alpinejs/README.md
+++ b/packages/integrations/alpinejs/README.md
@@ -25,7 +25,7 @@ yarn astro add alpinejs
 pnpm astro add alpinejs
 ```
 
-Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
+Finally, in the terminal window running Astro, press `CTRL+C` and then type `npm run astro dev` to restart the dev server. 
 
 ### Manual Install
 
@@ -35,7 +35,7 @@ First, install the `@astrojs/alpinejs` package using your package manager. If yo
 npm install @astrojs/alpinejs
 ```
 
-Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to install Alpine.js yourself:
+Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:
 
 ```sh
 npm install alpinejs @types/alpinejs
@@ -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
+```js title="astro.config.mjs" ins={2} "alpine()"
 import { defineConfig } from 'astro/config';
 import alpine from '@astrojs/alpinejs';
 
@@ -59,7 +58,7 @@ Finally, restart the dev server.
 
 ## Usage
 
-Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directivers and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.
+Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.
 
 Check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
@@ -69,7 +68,7 @@ The Apline.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
+```astro title="src/pages/index.astro"
 <!-- Example: Load AlpineJS on a single page. -->
 <script>
   import Alpine from 'alpinejs';