3 年之前 · 7f9ad14f47
--- a/packages/docs/src/en/advanced/async.md
+++ b/packages/docs/src/en/advanced/async.md
@@ -14,7 +14,7 @@ function getLabel() {
 
															     return 'Hello World!'
														
 
															 }
														
 
															 ```
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-text="getLabel()"></span>
														
 
															 ```
														
@@ -29,12 +29,12 @@ async function getLabel() {
 
															     return await response.text()
														
 
															 }
														
 
															 ```
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-text="await getLabel()"></span>
														
 
															 ```
														
 
															 Additionally, if you prefer calling methods in Alpine without the trailing parenthesis, you can leave them out and Alpine will detect that the provided function is async and handle it accordingly. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-text="getLabel"></span>
														
 
															 ```
														
--- a/packages/docs/src/en/advanced/csp.md
+++ b/packages/docs/src/en/advanced/csp.md
@@ -19,7 +19,7 @@ Like all Alpine extensions, you can include this either via `<script>` tag or mo
 
															 <a name="script-tag"></a>
														
 
															 ### Script tag
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															     <script src="alpinejs/alpinejs-csp/cdn.js" defer></script>
														
 
															 </html>
														
@@ -44,7 +44,7 @@ Due to this limitation, you must use `Alpine.data` to register your `x-data` obj
 
															 For example, an inline component like this will not work.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Bad -->
														
 
															 <div x-data="{ count: 1 }">
														
 
															     <button @click="count++">Increment</button>
														
@@ -55,7 +55,7 @@ For example, an inline component like this will not work.
 
															 However, breaking out the expressions into external APIs, the following is valid with the CSP build:
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Good -->
														
 
															 <div x-data="counter">
														
 
															     <button @click="increment">Increment</button>
														
--- a/packages/docs/src/en/advanced/extending.md
+++ b/packages/docs/src/en/advanced/extending.md
@@ -22,7 +22,7 @@ If you are including Alpine via a script tag, you will need to register any cust
 
															 Here's an example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															     <script src="/js/alpine.js" defer></script>
														
@@ -38,7 +38,7 @@ Here's an example:
 
															 If you want to extract your extension code into an external file, you will need to make sure that file's `<script>` tag is located BEFORE Alpine's like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															     <script src="/js/foo.js" defer></script>
														
 
															     <script src="/js/alpine.js" defer></script>
														
@@ -96,7 +96,7 @@ Alpine.directive('uppercase', el => {
 
															     el.textContent = el.textContent.toUpperCase()
														
 
															 })
														
 
															 ```
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data>
														
 
															     <span x-uppercase>Hello World!</span>
														
 
															 </div>
														
@@ -109,7 +109,7 @@ When registering a custom directive, you may want to evaluate a user-supplied Ja
 
															 For example, let's say you wanted to create a custom directive as a shortcut to `console.log()`. Something like:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ message: 'Hello World!' }">
														
 
															     <div x-log="message"></div>
														
 
															 </div>
														
@@ -138,7 +138,7 @@ Building on the `x-log` example from before, let's say we wanted `x-log` to log
 
															 Given the following template:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ message: 'Hello World!' }">
														
 
															     <div x-log="message"></div>
														
@@ -252,7 +252,7 @@ Alpine.magic('now', () => {
 
															     return (new Date).toLocaleTimeString()
														
 
															 })
														
 
															 ```
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-text="$now"></span>
														
 
															 ```
														
@@ -272,7 +272,7 @@ Alpine.magic('clipboard', () => {
 
															     return subject => navigator.clipboard.writeText(subject)
														
 
															 })
														
 
															 ```
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="$clipboard('hello world')">Copy "Hello World"</button>
														
 
															 ```
														
@@ -302,7 +302,7 @@ We'll start producing this plugin for consumption as a simple `<script>` tag alo
 
															 Let's start in reverse by looking at how our plugin will be included into a project:
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															     <script src="/js/foo.js" defer></script>
														
 
															     <script src="/js/alpine.js" defer></script>
														
--- a/packages/docs/src/en/advanced/reactivity.md
+++ b/packages/docs/src/en/advanced/reactivity.md
@@ -68,7 +68,7 @@ This is the mechanism that unlocks all of the reactivity at the core of Alpine.
 
															 To connect the dots further, let's look at a simple "counter" component example without using Alpine syntax at all, only using `Alpine.reactive` and `Alpine.effect`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button>Increment</button>
														
 
															 Count: <span></span>
														
--- a/packages/docs/src/en/directives/bind.md
+++ b/packages/docs/src/en/directives/bind.md
@@ -9,7 +9,7 @@ title: bind
 
															 For example, here's a component where we will use `x-bind` to set the placeholder value of an input.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ placeholder: 'Type here...' }">
														
 
															   <input type="text" x-bind:placeholder="placeholder">
														
 
															 </div>
														
@@ -20,7 +20,7 @@ For example, here's a component where we will use `x-bind` to set the placeholde
 
															 If `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For example, here is the same input element as above, but refactored to use the shorthand syntax.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" :placeholder="placeholder">
														
 
															 ```
														
@@ -31,7 +31,7 @@ If `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For
 
															 Here's a simple example of a simple dropdown toggle, but instead of using `x-show`, we'll use a "hidden" class to toggle an element.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															   <button x-on:click="open = ! open">Toggle Dropdown</button>
														
@@ -48,7 +48,7 @@ Now, when `open` is `false`, the "hidden" class will be added to the dropdown.
 
															 In cases like these, if you prefer a less verbose syntax you can use JavaScript's short-circuit evaluation instead of standard conditionals:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div :class="show ? '' : 'hidden'">
														
 
															 <!-- Is equivalent to: -->
														
 
															 <div :class="show || 'hidden'">
														
@@ -56,7 +56,7 @@ In cases like these, if you prefer a less verbose syntax you can use JavaScript'
 
															 The inverse is also available to you. Suppose instead of `open`, we use a variable with the opposite value: `closed`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div :class="closed ? 'hidden' : ''">
														
 
															 <!-- Is equivalent to: -->
														
 
															 <div :class="closed && 'hidden'">
														
@@ -67,7 +67,7 @@ The inverse is also available to you. Suppose instead of `open`, we use a variab
 
															 Alpine offers an additional syntax for toggling classes if you prefer. By passing a JavaScript object where the classes are the keys and booleans are the values, Alpine will know which classes to apply and which to remove. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div :class="{ 'hidden': ! show }">
														
 
															 ```
														
@@ -75,7 +75,7 @@ This technique offers a unique advantage to other methods. When using object-syn
 
															 For example, if you wanted to apply the "hidden" class to an element before Alpine loads, AND use Alpine to toggle its existence you can only achieve that behavior using object-syntax:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div class="hidden" :class="{ 'hidden': ! show }">
														
 
															 ```
														
@@ -88,7 +88,7 @@ In case that confused you, let's dig deeper into how Alpine handles `x-bind:clas
 
															 Consider the following case.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div class="opacity-50" :class="hide && 'hidden'">
														
 
															 ```
														
@@ -98,13 +98,13 @@ However, Alpine treats `class` bindings differently. It's smart enough to preser
 
															 For example, if `hide` is true, the above example will result in the following DOM element:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div class="opacity-50 hidden">
														
 
															 ```
														
 
															 If `hide` is false, the DOM element will look like:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div class="opacity-50">
														
 
															 ```
														
@@ -117,7 +117,7 @@ Similar to the special syntax for binding classes with JavaScript objects, Alpin
 
															 Just like the class objects, this syntax is entirely optional. Only use it if it affords you some advantage.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div :style="{ color: 'red', display: 'flex' }">
														
 
															 <!-- Will render: -->
														
@@ -126,7 +126,7 @@ Just like the class objects, this syntax is entirely optional. Only use it if it
 
															 One advantage of this approach is being able to mix it in with existing styles on an element:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }">
														
 
															 <!-- Will render: -->
														
@@ -135,7 +135,7 @@ One advantage of this approach is being able to mix it in with existing styles o
 
															 And like most expressions in Alpine, you can always use the result of a JavaScript expression as the reference:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ styles: { color: 'red', display: 'flex' }}">
														
 
															     <div :style="styles">
														
 
															 </div>
														
@@ -153,7 +153,7 @@ And like most expressions in Alpine, you can always use the result of a JavaScri
 
															 The object keys are the directives (can be any directive including modifiers), and the values are callbacks to be evaluated by Alpine.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown()">
														
 
															     <button x-bind="trigger">Open Dropdown</button>
														
--- a/packages/docs/src/en/directives/cloak.md
+++ b/packages/docs/src/en/directives/cloak.md
@@ -17,7 +17,7 @@ For `x-cloak` to work however, you must add the following CSS to the page.
 
															 Now, the following example will hide the `<span>` tag until Alpine has set its text content to the `message` property.
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-cloak x-text="message"></span>
														
 
															 ```
														
@@ -25,7 +25,7 @@ When Alpine loads on the page, it removes all `x-cloak` property from the elemen
 
															 If you'd like to achieve this same behavior, but avoid having to include a global style, you can use the following cool, but admittedly odd trick:
														
 
															-```html
														
 
															+```alpine
														
 
															 <template x-if="true">
														
 
															     <span x-text="message"></span>
														
 
															 </template>
														
--- a/packages/docs/src/en/directives/data.md
+++ b/packages/docs/src/en/directives/data.md
@@ -11,7 +11,7 @@ Everything in Alpine starts with the `x-data` directive.
 
															 Here's an example of a contrived dropdown component:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Toggle Content</button>
														
@@ -30,7 +30,7 @@ Properties defined in an `x-data` directive are available to all element childre
 
															 For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ foo: 'bar' }">
														
 
															     <span x-text="foo"><!-- Will output: "bar" --></span>
														
@@ -51,7 +51,7 @@ Because `x-data` is evaluated as a normal JavaScript object, in addition to stat
 
															 For example, let's extract the "Toggle Content" behavior into a method on  `x-data`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false, toggle() { this.open = ! this.open } }">
														
 
															     <button @click="toggle()">Toggle Content</button>
														
@@ -67,7 +67,7 @@ You'll also notice the usage of `this.` to access state on the object itself. Th
 
															 If you prefer, you can leave the calling parenthesis off of the `toggle` method completely. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Before -->
														
 
															 <button @click="toggle()">...</button>
														
@@ -84,7 +84,7 @@ Think of them like "computed properties" (although, they are not cached like Vue
 
															 Let's refactor our component to use a getter called `isOpen` instead of accessing `open` directly.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{
														
 
															   open: false,
														
 
															   get isOpen() { return this.open },
														
@@ -109,13 +109,13 @@ Occasionally, you want to create an Alpine component, but you don't need any dat
 
															 In these cases, you can always pass in an empty object.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{}"...
														
 
															 ```
														
 
															 However, if you wish, you can also eliminate the attribute value entirely if it looks better to you.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data...
														
 
															 ```
														
@@ -124,7 +124,7 @@ However, if you wish, you can also eliminate the attribute value entirely if it
 
															 Sometimes you may only have a single element inside your Alpine component, like the following:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: true }">
														
 
															     <button @click="open = false" x-show="open">Hide Me</button>
														
 
															 </div>
														
@@ -132,7 +132,7 @@ Sometimes you may only have a single element inside your Alpine component, like
 
															 In these cases, you can declare `x-data` directly on that single element:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data="{ open: true }" @click="open = false" x-show="open">
														
 
															     Hide Me
														
 
															 </button>
														
@@ -145,7 +145,7 @@ If you find yourself duplicating the contents of `x-data`, or you find the inlin
 
															 Here's a quick example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown">
														
 
															     <button @click="toggle">Toggle Content</button>
														
--- a/packages/docs/src/en/directives/effect.md
+++ b/packages/docs/src/en/directives/effect.md
@@ -9,7 +9,7 @@ title: effect
 
															 If this definition is confusing for you, that's ok. It's better explained through an example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
														
 
															     <button @click="label += ' World!'">Change Message</button>
														
 
															 </div>
														
--- a/packages/docs/src/en/directives/for.md
+++ b/packages/docs/src/en/directives/for.md
@@ -7,7 +7,7 @@ title: for
 
															 Alpine's `x-for` directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.
														
 
															-```html
														
 
															+```alpine
														
 
															 <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
														
 
															     <template x-for="color in colors">
														
 
															         <li x-text="color"></li>
														
@@ -35,7 +35,7 @@ There are two rules worth noting about `x-for`:
 
															 It is important to specify keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
														
 
															-```html
														
 
															+```alpine
														
 
															 <ul x-data="{ colors: [
														
 
															     { id: 1, label: 'Red' },
														
 
															     { id: 2, label: 'Orange' },
														
@@ -54,7 +54,7 @@ Now if the colors are added, removed, re-ordered, or their "id"s change, Alpine
 
															 If you need to access the index of each item in the iteration, you can do so using the `([item], [index]) in [items]` syntax like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
														
 
															     <template x-for="(color, index) in colors">
														
 
															         <li>
														
@@ -67,7 +67,7 @@ If you need to access the index of each item in the iteration, you can do so usi
 
															 You can also access the index inside a dynamic `:key` expression.
														
 
															-```html
														
 
															+```alpine
														
 
															 <template x-for="(color, index) in colors" :key="index">
														
 
															 ```
														
@@ -76,7 +76,7 @@ You can also access the index inside a dynamic `:key` expression.
 
															 If you need to simply loop `n` number of times, rather than iterate through an array, Alpine offers a short syntax.
														
 
															-```html
														
 
															+```alpine
														
 
															 <ul>
														
 
															     <template x-for="i in 10">
														
 
															         <li x-text="i"></li>
														
--- a/packages/docs/src/en/directives/html.md
+++ b/packages/docs/src/en/directives/html.md
@@ -12,7 +12,7 @@ title: html
 
															 Here's a basic example of using `x-html` to display a user's username.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ username: '<strong>calebporzio</strong>' }">
														
 
															     Username: <span x-html="username"></span>
														
 
															 </div>
														
--- a/packages/docs/src/en/directives/if.md
+++ b/packages/docs/src/en/directives/if.md
@@ -9,7 +9,7 @@ title: if
 
															 Because of this difference in behavior, `x-if` should not be applied directly to the element, but instead to a `<template>` tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.
														
 
															-```html
														
 
															+```alpine
														
 
															 <template x-if="open">
														
 
															     <div>Contents...</div>
														
 
															 </template>
														
--- a/packages/docs/src/en/directives/ignore.md
+++ b/packages/docs/src/en/directives/ignore.md
@@ -9,7 +9,7 @@ By default, Alpine will crawl and initialize the entire DOM tree of an element c
 
															 If for some reason, you don't want Alpine to touch a specific section of your HTML, you can prevent it from doing so using `x-ignore`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ label: 'From Alpine' }">
														
 
															     <div x-ignore>
														
 
															         <span x-text="label"></span>
														
--- a/packages/docs/src/en/directives/init.md
+++ b/packages/docs/src/en/directives/init.md
@@ -7,7 +7,7 @@ title: init
 
															 The `x-init` directive allows you to hook into the initialization phase of any element in Alpine.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-init="console.log('I\'m being initialized!')"></div>
														
 
															 ```
														
@@ -15,7 +15,7 @@ In the above example, "I\'m being initialized!" will be output in the console be
 
															 Consider another example where `x-init` is used to fetch some JSON and store it in `x-data` before the component is processed.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div
														
 
															     x-data="{ posts: [] }"
														
 
															     x-init="posts = await (await fetch('/posts')).json()"
														
@@ -31,7 +31,7 @@ This would be something like `useEffect(..., [])` in react, or `mount` in Vue.
 
															 By using Alpine's internal `$nextTick` magic, you can make this happen.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-init="$nextTick(() => { ... })"></div>
														
 
															 ```
														
@@ -40,7 +40,7 @@ By using Alpine's internal `$nextTick` magic, you can make this happen.
 
															 You can add `x-init` to any elements inside or outside an `x-data` HTML block. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data>
														
 
															     <span x-init="console.log('I can initialize')"></span>
														
 
															 </div>
														
@@ -53,7 +53,7 @@ You can add `x-init` to any elements inside or outside an `x-data` HTML block. F
 
															 If the `x-data` object of a component contains an `init()` method, it will be called automatically. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{
														
 
															     init() {
														
 
															         console.log('I am called automatically')
														
--- a/packages/docs/src/en/directives/model.md
+++ b/packages/docs/src/en/directives/model.md
@@ -9,7 +9,7 @@ title: model
 
															 Here's a simple example of using `x-model` to bind the value of a text field to a piece of data in Alpine.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ message: '' }">
														
 
															     <input type="text" x-model="message">
														
@@ -35,7 +35,7 @@ Now as the user types into the text field, the `message` will be reflected in th
 
															 We can use the same example as above but this time, we'll add a button to change the value of the `message` property.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ message: '' }">
														
 
															     <input type="text" x-model="message">
														
@@ -66,7 +66,7 @@ Now when the `<button>` is clicked, the input element's value will instantly be
 
															 <a name="text-inputs"></a>
														
 
															 ## Text inputs
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model="message">
														
 
															 <span x-text="message"></span>
														
@@ -85,7 +85,7 @@ Now when the `<button>` is clicked, the input element's value will instantly be
 
															 <a name="textarea-inputs"></a>
														
 
															 ## Textarea inputs
														
 
															-```html
														
 
															+```alpine
														
 
															 <textarea x-model="message"></textarea>
														
 
															 <span x-text="message"></span>
														
@@ -107,7 +107,7 @@ Now when the `<button>` is clicked, the input element's value will instantly be
 
															 <a name="single-checkbox-with-boolean"></a>
														
 
															 ### Single checkbox with boolean
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="checkbox" id="checkbox" x-model="show">
														
 
															 <label for="checkbox" x-text="show"></label>
														
@@ -126,7 +126,7 @@ Now when the `<button>` is clicked, the input element's value will instantly be
 
															 <a name="multiple-checkboxes-bound-to-array"></a>
														
 
															 ### Multiple checkboxes bound to array
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="checkbox" value="red" x-model="colors">
														
 
															 <input type="checkbox" value="orange" x-model="colors">
														
 
															 <input type="checkbox" value="yellow" x-model="colors">
														
@@ -149,7 +149,7 @@ Colors: <span x-text="colors"></span>
 
															 <a name="radio-inputs"></a>
														
 
															 ## Radio inputs
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="radio" value="yes" x-model="answer">
														
 
															 <input type="radio" value="no" x-model="answer">
														
@@ -174,7 +174,7 @@ Answer: <span x-text="answer"></span>
 
															 <a name="single-select"></a>
														
 
															 ### Single select
														
 
															-```html
														
 
															+```alpine
														
 
															 <select x-model="color">
														
 
															     <option>Red</option>
														
 
															     <option>Orange</option>
														
@@ -201,7 +201,7 @@ Color: <span x-text="color"></span>
 
															 <a name="single-select-with-placeholder"></a>
														
 
															 ### Single select with placeholder
														
 
															-```html
														
 
															+```alpine
														
 
															 <select x-model="color">
														
 
															     <option value="" disabled>Select A Color</option>
														
 
															     <option>Red</option>
														
@@ -231,7 +231,7 @@ Color: <span x-text="color"></span>
 
															 <a name="multiple-select"></a>
														
 
															 ### Multiple select
														
 
															-```html
														
 
															+```alpine
														
 
															 <select x-model="color" multiple>
														
 
															     <option>Red</option>
														
 
															     <option>Orange</option>
														
@@ -258,7 +258,7 @@ Colors: <span x-text="color"></span>
 
															 <a name="dynamically-populated-select-options"></a>
														
 
															 ### Dynamically populated Select Options
														
 
															-```html
														
 
															+```alpine
														
 
															 <select x-model="color">
														
 
															     <template x-for="color in ['Red', 'Orange', 'Yellow']">
														
 
															         <option x-text="color"></option>
														
@@ -292,7 +292,7 @@ On text inputs, by default, `x-model` updates the property on every key-stroke.
 
															 This is handy for things like real-time form-validation where you might not want to show an input validation error until the user "tabs" away from a field.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model.lazy="username">
														
 
															 <span x-show="username.length > 20">The username is too long.</span>
														
 
															 ```
														
@@ -302,7 +302,7 @@ This is handy for things like real-time form-validation where you might not want
 
															 By default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript number, add the `.number` modifier.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model.number="age">
														
 
															 <span x-text="typeof age"></span>
														
 
															 ```
														
@@ -314,13 +314,13 @@ By adding `.debounce` to `x-model`, you can easily debounce the updating of boun
 
															 This is useful for things like real-time search inputs that fetch new data from the server every time the search property changes.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model.debounce="search">
														
 
															 ```
														
 
															 The default debounce time is 250 milliseconds, you can easily customize this by adding a time modifier like so.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model.debounce.500ms="search">
														
 
															 ```
														
@@ -333,6 +333,6 @@ Similar to `.debounce` you can limit the property update triggered by `x-model`
 
															 The default throttle interval is 250 milliseconds, you can easily customize this by adding a time modifier like so.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" x-model.throttle.500ms="search">
														
 
															 ```
														
--- a/packages/docs/src/en/directives/on.md
+++ b/packages/docs/src/en/directives/on.md
@@ -9,7 +9,7 @@ title: on
 
															 Here's an example of simple button that shows an alert when clicked.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-on:click="alert('Hello World!')">Say Hi</button>
														
 
															 ```
														
@@ -20,7 +20,7 @@ If `x-on:` is too verbose for your tastes, you can use the shorthand syntax: `@`
 
															 Here's the same component as above, but using the shorthand syntax instead:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="alert('Hello World!')">Say Hi</button>
														
 
															 ```
														
@@ -29,13 +29,13 @@ Here's the same component as above, but using the shorthand syntax instead:
 
															 If you wish to access the native JavaScript event object from your expression, you can use Alpine's magic `$event` property.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="alert($event.target.getAttribute('message'))" message="Hello World">Say Hi</button>
														
 
															 ```
														
 
															 In addition, Alpine also passes the event object to any methods referenced without trailing parenthesis. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="handleClick">...</button>
														
 
															 <script>
														
@@ -52,7 +52,7 @@ Alpine makes it easy to listen for `keydown` and `keyup` events on specific keys
 
															 Here's an example of listening for the `Enter` key inside an input element.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" @keyup.enter="alert('Submitted!')">
														
 
															 ```
														
@@ -60,13 +60,13 @@ You can also chain these key modifiers to achieve more complex listeners.
 
															 Here's a listener that runs when the `Shift` key is held and `Enter` is pressed, but not when `Enter` is pressed alone.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" @keyup.shift.enter="alert('Submitted!')">
														
 
															 ```
														
 
															 You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input type="text" @keyup.page-down="alert('Submitted!')">
														
 
															 ```
														
@@ -93,7 +93,7 @@ Alpine event listeners are a wrapper for native DOM event listeners. Therefore,
 
															 Here's an example of a component that dispatches a custom DOM event and listens for it as well.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data @foo="alert('Button Was Clicked!')">
														
 
															 	<button @click="$event.target.dispatchEvent(new CustomEvent('foo', { bubbles: true }))">...</button>
														
 
															 </div>
														
@@ -105,7 +105,7 @@ Because the `.dispatchEvent` API is verbose, Alpine offers a `$dispatch` helper
 
															 Here's the same component re-written with the `$dispatch` magic property.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data @foo="alert('Button Was Clicked!')">
														
 
															   <button @click="$dispatch('foo')">...</button>
														
 
															 </div>
														
@@ -123,7 +123,7 @@ Alpine offers a number of directive modifiers to customize the behavior of your
 
															 `.prevent` is the equivalent of calling `.preventDefault()` inside a listener on the browser event object.
														
 
															-```html
														
 
															+```alpine
														
 
															 <form @submit.prevent="console.log('submitted')" action="/foo">
														
 
															     <button>Submit</button>
														
 
															 </form>
														
@@ -136,7 +136,7 @@ In the above example, with the `.prevent`, clicking the button will NOT submit t
 
															 Similar to `.prevent`, `.stop` is the equivalent of calling `.stopPropagation()` inside a listener on the browser event object.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @click="console.log('I will not get logged')">
														
 
															     <button @click.stop>Click Me</button>
														
 
															 </div>
														
@@ -149,7 +149,7 @@ In the above example, clicking the button WON'T log the message. This is because
 
															 `.outside` is a convenience helper for listening for a click outside of the element it is attached to. Here's a simple dropdown component example to demonstrate:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Toggle</button>
														
@@ -170,7 +170,7 @@ This is because `.outside` is listening for clicks that DONT originate from the
 
															 When the `.window` modifier is present, Alpine will register the event listener on the root `window` object on the page instead of the element itself.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @keyup.escape.window="...">...</div>
														
 
															 ```
														
@@ -188,7 +188,7 @@ Adding `.window` to listeners is extremely useful for these sorts of cases where
 
															 By adding `.once` to a listener, you are ensuring that the handler is only called ONCE.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click.once="console.log('I will only log once')">...</button>
														
 
															 ```
														
@@ -199,7 +199,7 @@ Sometimes it is useful to "debounce" an event handler so that it only is called
 
															 For example if you have a search field that fires network requests as the user types into it, adding a debounce will prevent the network requests from firing on every single keystroke.
														
 
															-```html
														
 
															+```alpine
														
 
															 <input @input.debounce="fetchResults">
														
 
															 ```
														
@@ -207,7 +207,7 @@ Now, instead of calling `fetchResults` after every keystroke, `fetchResults` wil
 
															 If you wish to lengthen or shorten the debounce time, you can do so by trailing a duration after the `.debounce` modifier like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <input @input.debounce.500ms="fetchResults">
														
 
															 ```
														
@@ -222,7 +222,7 @@ This is useful for cases where there may be repeated and prolonged event firing
 
															 For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @scroll.window.throttle="handleScroll">...</div>
														
 
															 ```
														
@@ -235,7 +235,7 @@ The above example is a great use case of throttling. Without `.throttle`, the `h
 
															 By adding `.self` to an event listener, you are ensuring that the event originated on the element it is declared on, and not from a child element.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click.self="handleClick">
														
 
															     Click Me
														
@@ -250,7 +250,7 @@ However, in this case, because we've added a `.self`, only clicking the button i
 
															 <a name="camel"></a>
														
 
															 ### .camel
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @custom-event.camel="handleCustomEvent">
														
 
															     ...
														
 
															 </div>
														
@@ -267,7 +267,7 @@ Browsers optimize scrolling on pages to be fast and smooth even when JavaScript
 
															 If you are listening for touch events, it's important to add `.passive` to your listeners to not block scroll performance.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @touchstart.passive="...">...</div>
														
 
															 ```
														
--- a/packages/docs/src/en/directives/ref.md
+++ b/packages/docs/src/en/directives/ref.md
@@ -7,7 +7,7 @@ title: ref
 
															 `x-ref` in combination with `$refs` is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like `getElementById` and `querySelector`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="$refs.text.remove()">Remove Text</button>
														
 
															 <span x-ref="text">Hello 👋</span>
														
--- a/packages/docs/src/en/directives/show.md
+++ b/packages/docs/src/en/directives/show.md
@@ -9,7 +9,7 @@ title: show
 
															 Here's an example of a simple dropdown component using `x-show`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button x-on:click="open = ! open">Toggle Dropdown</button>
														
@@ -28,7 +28,7 @@ When the "Toggle Dropdown" button is clicked, the dropdown will show and hide ac
 
															 If you want to apply smooth transitions to the `x-show` behavior, you can use it in conjunction with `x-transition`. You can learn more about that directive [here](/directives/transition), but here's a quick example of the same component as above, just with transitions applied.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button x-on:click="open = ! open">Toggle Dropdown</button>
														
--- a/packages/docs/src/en/directives/text.md
+++ b/packages/docs/src/en/directives/text.md
@@ -9,7 +9,7 @@ title: text
 
															 Here's a basic example of using `x-text` to display a user's username.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ username: 'calebporzio' }">
														
 
															     Username: <strong x-text="username"></strong>
														
 
															 </div>
														
--- a/packages/docs/src/en/directives/transition.md
+++ b/packages/docs/src/en/directives/transition.md
@@ -17,7 +17,7 @@ There are two primary ways to handle transitions in Alpine:
 
															 The simplest way to achieve a transition using Alpine is by adding `x-transition` to an element with `x-show` on it. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Toggle</button>
														
@@ -48,7 +48,7 @@ You can override these defaults with modifiers attached to `x-transition`. Let's
 
															 You can configure the duration you want for a transition with the `.duration` modifier:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.duration.500ms>
														
 
															 ```
														
@@ -56,7 +56,7 @@ The above `<div>` will transition for 500 milliseconds when entering, and 250 mi
 
															 This difference in duration generally desirable default. If you wish to customize the durations specifically for entering and leaving, you can do that like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ...
														
 
															     x-transition:enter.duration.500ms
														
 
															     x-transition:leave.duration.400ms
														
@@ -68,7 +68,7 @@ This difference in duration generally desirable default. If you wish to customiz
 
															 You can delay a transition using the `.delay` modifier like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.delay.50ms>
														
 
															 ```
														
@@ -81,7 +81,7 @@ By default, Alpine's `x-transition` applies both a scale and opacity transition
 
															 If you wish to only apply the opacity transition (no scale), you can accomplish that like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.opacity>
														
 
															 ```
														
@@ -90,13 +90,13 @@ If you wish to only apply the opacity transition (no scale), you can accomplish
 
															 Similar to the `.opacity` modifier, you can configure `x-transition` to ONLY scale (and not transition opacity as well) like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.scale>
														
 
															 ```
														
 
															 The `.scale` modifier also offers the ability to configure its scale values AND its origin values:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.scale.80>
														
 
															 ```
														
@@ -104,7 +104,7 @@ The above snippet will scale the element up and down by 80%.
 
															 Again, you may customize these values separately for enter and leaving transitions like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ...
														
 
															     x-transition:enter.scale.80
														
 
															     x-transition:leave.scale.90
														
@@ -113,7 +113,7 @@ Again, you may customize these values separately for enter and leaving transitio
 
															 To customize the origin of the scale transition, you can use the `.origin` modifier:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... x-transition.scale.origin.top>
														
 
															 ```
														
@@ -131,7 +131,7 @@ For direct control over exactly what goes into your transitions, you can apply C
 
															 > The following examples use [TailwindCSS](https://tailwindcss.com/docs/transition-property) utility classes.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Toggle</button>
														
--- a/packages/docs/src/en/essentials/events.md
+++ b/packages/docs/src/en/essentials/events.md
@@ -14,13 +14,13 @@ By using `x-on`, you can listen for browser events that are dispatched on or wit
 
															 Here's a basic example of listening for a click on a button:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-on:click="console.log('clicked')">...</button>
														
 
															 ```
														
 
															 As an alternative, you can use the event shorthand syntax if you prefer: `@`. Here's the same example as before, but using the shorthand syntax (which we'll be using from now on):
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="...">...</button>
														
 
															 ```
														
@@ -31,13 +31,13 @@ In addition to `click`, you can listen for any browser event by name. For exampl
 
															 Let's say you wanted to listen for the `enter` key to be pressed inside an `<input>` element. Alpine makes this easy by adding the `.enter` like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <input @keyup.enter="...">
														
 
															 ```
														
 
															 You can even combine key modifiers to listen for key combinations like pressing `enter` while holding `shift`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <input @keyup.shift.enter="...">
														
 
															 ```
														
@@ -48,7 +48,7 @@ When reacting to browser events, it is often necessary to "prevent default" (pre
 
															 For example, if you want to listen for a form submission but prevent the browser from submitting a form request, you can use `.prevent`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <form @submit.prevent="...">...</form>
														
 
															 ```
														
@@ -59,7 +59,7 @@ You can also apply `.stop` to achieve the equivalent of `event.stopPropagation()
 
															 Sometimes you may want to access the native browser event object inside your own code. To make this easy, Alpine automatically injects an `$event` magic variable:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="$event.target.remove()">Remove Me</button>
														
 
															 ```
														
@@ -70,7 +70,7 @@ In addition to listening for browser events, you can dispatch them as well. This
 
															 Alpine exposes a magic helper called `$dispatch` for this:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @foo="console.log('foo was dispatched')">
														
 
															     <button @click="$dispatch('foo')"></button>
														
 
															 </div>
														
@@ -86,7 +86,7 @@ Because of the nature of events in the browser, it is sometimes useful to listen
 
															 This allows you to communicate across components completely like the following example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data>
														
 
															     <button @click="$dispatch('foo')"></button>
														
 
															 </div>
														
--- a/packages/docs/src/en/essentials/installation.md
+++ b/packages/docs/src/en/essentials/installation.md
@@ -17,7 +17,7 @@ Either is perfectly valid. It all depends on the project's needs and the develop
 
															 This is by far the simplest way to get started with Alpine. Include the following `<script>` tag in the head of your HTML page.
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															   <head>
														
 
															     ...
														
@@ -32,7 +32,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
 
															 Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
														
 
															-```html
														
 
															+```alpine
														
 
															 <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
														
 
															 ```
														
--- a/packages/docs/src/en/essentials/lifecycle.md
+++ b/packages/docs/src/en/essentials/lifecycle.md
@@ -14,7 +14,7 @@ Another extremely useful lifecycle hook in Alpine is the `x-init` directive.
 
															 `x-init` can be added to any element on a page and will execute any JavaScript you call inside it when Alpine begins initializing that element.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-init="console.log('Im initing')">
														
 
															 ```
														
@@ -36,7 +36,7 @@ Alpine allows you to execute code when a piece of data (state) changes. It offer
 
															 <a name="watch"></a>
														
 
															 ### `$watch`
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
														
 
															 ```
														
@@ -53,7 +53,7 @@ Instead of specifying which data key you wish to watch, `x-effect` will call the
 
															 Here's the same bit of code from the `$watch` example rewritten using `x-effect`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }" x-effect="console.log(open)">
														
 
															 ```
														
--- a/packages/docs/src/en/essentials/state.md
+++ b/packages/docs/src/en/essentials/state.md
@@ -14,7 +14,7 @@ Alpine allows you to declare an HTML block's state in a single `x-data` attribut
 
															 Here's a basic example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     ...
														
 
															 </div>
														
@@ -29,7 +29,7 @@ Now any other Alpine syntax on or within this element will be able to access `op
 
															 Data is nestable in Alpine. For example, if you have two elements with Alpine data attached (one inside the other), you can access the parent's data from inside the child element.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <div x-data="{ label: 'Content:' }">
														
 
															         <span x-text="label"></span>
														
@@ -47,7 +47,7 @@ Like you may have guessed, if the child has a data property matching the name of
 
															 Although this may seem obvious to some, it's worth mentioning that Alpine data can be used within the same element. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data="{ label: 'Click Here' }" x-text="label"></button>
														
 
															 ```
														
@@ -56,7 +56,7 @@ Although this may seem obvious to some, it's worth mentioning that Alpine data c
 
															 Sometimes you may want to use Alpine functionality, but don't need any reactive data. In these cases, you can opt-out of passing an expression to `x-data` entirely. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data @click="alert('I\'ve been clicked!')">Click Me</button>
														
 
															 ```
														
@@ -81,7 +81,7 @@ Alpine.data('dropdown', () => ({
 
															 Now that you've registered the "dropdown" data, you can use it inside your markup in as many places as you like:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown">
														
 
															     <button @click="toggle">Expand</button>
														
@@ -116,7 +116,7 @@ Alpine.store('tabs', {
 
															 Now we can access or modify its data from anywhere on our page:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data>
														
 
															     <template x-for="tab in $store.tabs.items">
														
 
															         ...
														
--- a/packages/docs/src/en/essentials/templating.md
+++ b/packages/docs/src/en/essentials/templating.md
@@ -14,7 +14,7 @@ Let's cover a few of the basic templating directives here, but be sure to look t
 
															 Alpine makes it easy to control the text content of an element with the `x-text` directive.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ title: 'Start Here' }">
														
 
															     <h1 x-text="title"></h1>
														
 
															 </div>
														
@@ -30,7 +30,7 @@ Now, Alpine will set the text content of the `<h1>` with the value of `title` ("
 
															 Like all directives in Alpine, you can use any JavaScript expression you like. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <span x-text="1 + 2"></span>
														
 
															 ```
														
@@ -56,7 +56,7 @@ Alpine offers the `x-show` and `x-if` directives for toggling elements on a page
 
															 Here's a simple toggle component using `x-show`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Expand</button>
														
@@ -89,7 +89,7 @@ This works well for most cases, but sometimes you may want to completely add and
 
															 Here is the same toggle from before, but this time using `x-if` instead of `x-show`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Expand</button>
														
@@ -128,7 +128,7 @@ Alpine makes it simple to smoothly transition between "shown" and "hidden" state
 
															 Here is, again, the simple toggle example, but this time with transitions applied:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Expands</button>
														
@@ -152,7 +152,7 @@ Here is, again, the simple toggle example, but this time with transitions applie
 
															 Let's zoom in on the portion of the template dealing with transitions:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-show="open" x-transition>
														
 
															 ```
														
@@ -170,7 +170,7 @@ Let's take a look at each of these approaches:
 
															 Let's say you wanted to make the duration of the transition longer, you can manually specify that using the `.duration` modifier like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-show="open" x-transition.duration.500ms>
														
 
															 ```
														
@@ -190,7 +190,7 @@ Now the transition will last 500 milliseconds.
 
															 If you want to specify different values for in and out transitions, you can use `x-transition:enter` and `x-transition:leave`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div
														
 
															     x-show="open"
														
 
															     x-transition:enter.duration.500ms
														
@@ -212,7 +212,7 @@ If you want to specify different values for in and out transitions, you can use
 
															 Additionally, you can add either `.opacity` or `.scale` to only transition that property. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-show="open" x-transition.opacity>
														
 
															 ```
														
@@ -235,7 +235,7 @@ Additionally, you can add either `.opacity` or `.scale` to only transition that
 
															 If you need more fine-grained control over the transitions in your application, you can apply specific CSS classes at specific phases of the transition using the following syntax (this example uses [Tailwind CSS](https://tailwindcss.com/)):
														
 
															-```html
														
 
															+```alpine
														
 
															 <div
														
 
															     x-show="open"
														
 
															     x-transition:enter="transition ease-out duration-300"
														
@@ -277,7 +277,7 @@ You can add HTML attributes like `class`, `style`, `disabled`, etc... to element
 
															 Here is an example of a dynamically bound `class` attribute:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button
														
 
															     x-data="{ red: false }"
														
 
															     x-bind:class="red ? 'bg-red' : ''"
														
@@ -302,13 +302,13 @@ Here is an example of a dynamically bound `class` attribute:
 
															 As a shortcut, you can leave out the `x-bind` and use the shorthand `:` syntax directly:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button ... :class="red ? 'bg-red' : ''>"
														
 
															 ```
														
 
															 Toggling classes on and off based on data inside Alpine is a common need. Here's an example of toggling a class using Alpine's `class` binding object syntax: (Note: this syntax is only available for `class` attributes)
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: true }">
														
 
															     <span :class="{ 'hidden': ! open }">...</span>
														
 
															 </div>
														
@@ -321,7 +321,7 @@ Now the `hidden` class will be added to the element if `open` is false, and remo
 
															 Alpine allows for iterating parts of your template based on JavaScript data using the `x-for` directive. Here is a simple example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ statuses: ['open', 'closed', 'archived'] }">
														
 
															     <template x-for="status in statuses">
														
 
															         <div x-text="status"></div>
														
@@ -348,7 +348,7 @@ As you can see the new `status` variable is available in the scope of the iterat
 
															 Alpine makes it easy to control the HTML content of an element with the `x-html` directive.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ title: '<h1>Start Here</h1>' }">
														
 
															     <div x-html="title"></div>
														
 
															 </div>
														
--- a/packages/docs/src/en/globals/alpine-data.md
+++ b/packages/docs/src/en/globals/alpine-data.md
@@ -9,7 +9,7 @@ title: data()
 
															 Here's a contrived `dropdown` component for example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown">
														
 
															     <button @click="toggle">...</button>
														
@@ -62,7 +62,7 @@ export default () => ({
 
															 In addition to referencing `Alpine.data` providers by their name plainly (like `x-data="dropdown"`), you can also reference them as functions (`x-data="dropdown()"`). By calling them as functions directly, you can pass in additional parameters to be used when creating the initial data object like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown(true)">
														
 
															 ```
														
 
															 ```js
														
@@ -109,7 +109,7 @@ If you wish to re-use more than just the data object of a component, you can enc
 
															 The following is an example of extracting the templating details of our previous dropdown component using `x-bind`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="dropdown">
														
 
															     <button x-bind="trigger"></button>
														
--- a/packages/docs/src/en/globals/alpine-store.md
+++ b/packages/docs/src/en/globals/alpine-store.md
@@ -13,7 +13,7 @@ Alpine offers global state management through the `Alpine.store()` API.
 
															 You can either define an Alpine store inside of an `alpine:init` listener (in the case of including Alpine via a `<script>` tag), OR you can define it before manually calling `Alpine.start()` (in the case of importing Alpine into a build):
														
 
															 **From a script tag:**
														
 
															-```html
														
 
															+```alpine
														
 
															 <script>
														
 
															     document.addEventListener('alpine:init', () => {
														
 
															         Alpine.store('darkMode', {
														
@@ -47,19 +47,19 @@ Alpine.start()
 
															 You can access data from any store within Alpine expressions using the `$store` magic property:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
														
 
															 ```
														
 
															 You can also modify properties within the store and everything that depends on those properties will automatically react. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
														
 
															 ```
														
 
															 Additionally, you can access a store externally using `Alpine.store()` by omitting the second parameter like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <script>
														
 
															     Alpine.store('darkMode').toggle()
														
 
															 </script>
														
@@ -70,7 +70,7 @@ Additionally, you can access a store externally using `Alpine.store()` by omitti
 
															 If you provide `init()` method in an Alpine store, it will be executed right after the store is registered. This is useful for initializing any state inside the store with sensible starting values.
														
 
															-```html
														
 
															+```alpine
														
 
															 <script>
														
 
															     document.addEventListener('alpine:init', () => {
														
 
															         Alpine.store('darkMode', {
														
@@ -97,7 +97,7 @@ If you don't need an entire object for a store, you can set and use any kind of
 
															 Here's the example from above but using it more simply as a boolean value:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data @click="$store.darkMode = ! $store.darkMode">Toggle Dark Mode</button>
														
 
															 ...
														
--- a/packages/docs/src/en/magics/dispatch.md
+++ b/packages/docs/src/en/magics/dispatch.md
@@ -7,7 +7,7 @@ title: dispatch
 
															 `$dispatch` is a helpful shortcut for dispatching browser events.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @notify="alert('Hello World!')">
														
 
															     <button @click="$dispatch('notify')">
														
 
															         Notify
														
@@ -27,7 +27,7 @@ title: dispatch
 
															 You can also pass data along with the dispatched event if you wish. This data will be accessible as the `.detail` property of the event:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div @notify="alert($event.detail.message)">
														
 
															     <button @click="$dispatch('notify', { message: 'Hello World!' })">
														
 
															         Notify
														
@@ -52,7 +52,7 @@ Notice that, because of [event bubbling](https://en.wikipedia.org/wiki/Event_bub
 
															 **Example:**
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Won't work -->
														
 
															 <div x-data>
														
 
															     <span @notify="..."></span>
														
@@ -75,7 +75,7 @@ You can also take advantage of the previous technique to make your components ta
 
															 **Example:**
														
 
															-```html
														
 
															+```alpine
														
 
															 <div
														
 
															     x-data="{ title: 'Hello' }"
														
 
															     @set-title.window="title = $event.detail"
														
@@ -94,7 +94,7 @@ You can also take advantage of the previous technique to make your components ta
 
															 You can also use `$dispatch()` to trigger data updates for `x-model` data bindings. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ title: 'Hello' }">
														
 
															     <span x-model="title">
														
 
															         <button @click="$dispatch('input', 'Hello World!')">
														
--- a/packages/docs/src/en/magics/el.md
+++ b/packages/docs/src/en/magics/el.md
@@ -8,7 +8,7 @@ title: el
 
															 `$el` is a magic property that can be used to retrieve the current DOM node.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>
														
 
															 ```
														
--- a/packages/docs/src/en/magics/nextTick.md
+++ b/packages/docs/src/en/magics/nextTick.md
@@ -8,7 +8,7 @@ title: nextTick
 
															 `$nextTick` is a magic property that allows you to only execute a given expression AFTER Alpine has made its reactive DOM updates. This is useful for times you want to interact with the DOM state AFTER it's reflected any data updates you've made.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ title: 'Hello' }">
														
 
															     <button
														
 
															         @click="
														
--- a/packages/docs/src/en/magics/refs.md
+++ b/packages/docs/src/en/magics/refs.md
@@ -8,7 +8,7 @@ title: refs
 
															 `$refs` is a magic property that can be used to retrieve DOM elements marked with `x-ref` inside the component. This is useful when you need to manually manipulate DOM elements. It's often used as a more succinct, scoped, alternative to `document.querySelector`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <button @click="$refs.text.remove()">Remove Text</button>
														
 
															 <span x-ref="text">Hello 👋</span>
														
--- a/packages/docs/src/en/magics/store.md
+++ b/packages/docs/src/en/magics/store.md
@@ -8,7 +8,7 @@ title: store
 
															 You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](#). For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
														
 
															 ...
														
@@ -40,7 +40,7 @@ If you don't need an entire object for a store, you can set and use any kind of
 
															 Here's the example from above but using it more simply as a boolean value:
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-data @click="$store.darkMode = ! $store.darkMode">Toggle Dark Mode</button>
														
 
															 ...
														
--- a/packages/docs/src/en/magics/watch.md
+++ b/packages/docs/src/en/magics/watch.md
@@ -7,7 +7,7 @@ title: watch
 
															 You can "watch" a component property using the `$watch` magic method. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
														
 
															     <button @click="open = ! open">Toggle Open</button>
														
 
															 </div>
														
@@ -17,7 +17,7 @@ In the above example, when the button is pressed and `open` is changed, the prov
 
															 You can watch deeply nested properties using "dot" notation
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo.bar', value => console.log(value))">
														
 
															     <button @click="foo.bar = 'bob'">Toggle Open</button>
														
 
															 </div>
														
@@ -30,7 +30,7 @@ When the `<button>` is pressed, `foo.bar` will be set to "bob", and "bob" will b
 
															 `$watch` keeps track of the previous value of the property being watched, You can access it using the optional second argument to the callback like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">
														
 
															     <button @click="open = ! open">Toggle Open</button>
														
 
															 </div>
														
--- a/packages/docs/src/en/plugins/intersect.md
+++ b/packages/docs/src/en/plugins/intersect.md
@@ -20,7 +20,7 @@ You can use this plugin by either including it from a `<script>` tag or installi
 
															 You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Alpine Plugins -->
														
 
															 <script defer src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
														
@@ -54,7 +54,7 @@ The primary API for using this plugin is `x-intersect`. You can add `x-intersect
 
															 For example, in the following snippet, `shown` will remain `false` until the element is scrolled into view. At that point, the expression will execute and `shown` will become `true`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ shown: false }" x-intersect="shown = true">
														
 
															     <div x-show="shown" x-transition>
														
 
															         I'm in the viewport!
														
@@ -80,7 +80,7 @@ For example, in the following snippet, `shown` will remain `false` until the ele
 
															 You can opt to only trigger x-intersect when the element ENTERS the viewport by adding the `:enter` suffix to `x-intersect` like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-intersect:enter="shown = true">...</div>
														
 
															 ```
														
@@ -89,7 +89,7 @@ You can opt to only trigger x-intersect when the element ENTERS the viewport by
 
															 Similarly, you can add `:leave` to only trigger x-intersect when the element LEAVES the viewport:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-intersect:leave="shown = true">...</div>
														
 
															 ```
														
@@ -101,6 +101,6 @@ Similarly, you can add `:leave` to only trigger x-intersect when the element LEA
 
															 Sometimes it's useful to evaluate an expression only the first time an element enters the viewport and not subsequent times. For example when triggering "enter" animations. In these cases, you can add the `.once` modifier to `x-intersect` to achieve this.
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-intersect.once="shown = true">...</div>
														
 
															 ```
														
--- a/packages/docs/src/en/plugins/persist.md
+++ b/packages/docs/src/en/plugins/persist.md
@@ -20,7 +20,7 @@ You can use this plugin by either including it from a `<script>` tag or installi
 
															 You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Alpine Plugins -->
														
 
															 <script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
														
@@ -54,7 +54,7 @@ The primary API for using this plugin is the magic `$persist` method.
 
															 You can wrap any value inside `x-data` with `$persist` like below to persist its value across page loads:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ count: $persist(0) }">
														
 
															     <button x-on:click="count++">Increment</button>
														
@@ -90,7 +90,7 @@ You'll observe that by simply visiting this page, Alpine already set the value o
 
															 Now change the "count" in the following example and observe the changes made by Alpine to localStorage:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ count: $persist(0) }">
														
 
															     <button x-on:click="count++">Increment</button>
														
@@ -123,7 +123,7 @@ Alpine will have no way of differentiating between these components.
 
															 In these cases, you can set your own custom key for any persisted value using the `.as` modifier like so:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ count: $persist(0).as('other-count') }">
														
 
															     <button x-on:click="count++">Increment</button>
														
--- a/packages/docs/src/en/plugins/trap.md
+++ b/packages/docs/src/en/plugins/trap.md
@@ -20,7 +20,7 @@ You can use this plugin by either including it from a `<script>` tag or installi
 
															 You can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- Alpine Plugins -->
														
 
															 <script defer src="https://unpkg.com/@alpinejs/trap@3.x.x/dist/cdn.min.js"></script>
														
@@ -56,7 +56,7 @@ The primary API for using this plugin is the `x-trap` directive.
 
															 For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false}">
														
 
															     <button @click="open = true">Open Dialogue</button>
														
@@ -109,7 +109,7 @@ This mechanism is recursive, so you can trap focus within an already trapped ele
 
															 Here is nesting in action:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false}">
														
 
															     <button @click="open = true">Open Dialogue</button>
														
--- a/packages/docs/src/en/start-here.md
+++ b/packages/docs/src/en/start-here.md
@@ -9,7 +9,7 @@ Create a blank HTML file somewhere on your computer with a name like: `i-love-al
 
															 Using a text editor, fill the file with these contents:
														
 
															-```html
														
 
															+```alpine
														
 
															 <html>
														
 
															 <head>
														
 
															     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
														
@@ -39,7 +39,7 @@ Let's start with a simple "counter" component to demonstrate the basics of state
 
															 Insert the following into the `<body>` tag:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ count: 0 }">
														
 
															     <button x-on:click="count++">Increment</button>
														
@@ -63,7 +63,7 @@ Let's walk through what's happening briefly:
 
															 <a name="declaring-data"></a>
														
 
															 ### Declaring data
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ count: 0 }">
														
 
															 ```
														
@@ -78,7 +78,7 @@ Let's look at `x-on` and see how it can access and modify the `count` property f
 
															 <a name="listening-for-events"></a>
														
 
															 ### Listening for events
														
 
															-```html
														
 
															+```alpine
														
 
															 <button x-on:click="count++">Increment</button>
														
 
															 ```
														
@@ -95,7 +95,7 @@ When a `click` event happens, Alpine will call the associated JavaScript express
 
															 <a name="reacting-to-changes"></a>
														
 
															 ### Reacting to changes
														
 
															-```html
														
 
															+```alpine
														
 
															 <h1 x-text="count"></h1>
														
 
															 ```
														
@@ -114,7 +114,7 @@ Now that we've seen some basic functionality, let's keep going and look at an im
 
															 Insert the following code into the `<body>` tag:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{ open: false }">
														
 
															     <button @click="open = ! open">Toggle</button>
														
@@ -138,7 +138,7 @@ The `x-data` and `x-on` directives should be familiar to you from the previous e
 
															 <a name="toggling-elements"></a>
														
 
															 ### Toggling elements
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-show="open" ...>Contents...</div>
														
 
															 ```
														
@@ -149,7 +149,7 @@ The `x-data` and `x-on` directives should be familiar to you from the previous e
 
															 <a name="listening-for-a-click-outside"></a>
														
 
															 ### Listening for a click outside
														
 
															-```html
														
 
															+```alpine
														
 
															 <div ... @click.outside="open = false">Contents...</div>
														
 
															 ```
														
@@ -168,7 +168,7 @@ Let's now build a more complex component and introduce a handful of other direct
 
															 Insert the following code into the `<body>` tag:
														
 
															-```html
														
 
															+```alpine
														
 
															 <div
														
 
															     x-data="{
														
 
															         search: '',
														
@@ -230,7 +230,7 @@ The first thing I'd like to point out is that `x-data` now has a lot more going
 
															 <a name="binding-to-inputs"></a>
														
 
															 ### Binding to inputs
														
 
															-```html
														
 
															+```alpine
														
 
															 <input x-model="search" placeholder="Search...">
														
 
															 ```
														
@@ -293,7 +293,7 @@ Because Alpine is a "reactive" framework. Any time the value of `this.search` ch
 
															 Now that we understand the data part of our component, let's understand what's happening in the template that allows us to loop through `filteredItems` on the page.
														
 
															-```html
														
 
															+```alpine
														
 
															 <ul>
														
 
															     <template x-for="item in filteredItems">
														
 
															         <li x-text="item"></li>
														
--- a/packages/docs/src/en/upgrade-guide.md
+++ b/packages/docs/src/en/upgrade-guide.md
@@ -42,7 +42,7 @@ Upgrading from Alpine V2 to V3 should be fairly painless. In many cases, NOTHING
 
															 `$el` now always represents the element that an expression was executed on, not the root element of the component. This will replace most usages of `x-ref` and in the cases where you still want to access the root of a component, you can do so using `x-ref`. For example:
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data>
														
 
															     <button @click="console.log($el)"></button>
														
@@ -57,7 +57,7 @@ Upgrading from Alpine V2 to V3 should be fairly painless. In many cases, NOTHING
 
															 For a smoother upgrade experience, you can optionally replace all instances of `$el` with a custom magic called `$root`, then add the following code to your site to mimic the behavior:
														
 
															-```html
														
 
															+```alpine
														
 
															 <script>
														
 
															     document.addEventListener('alpine:init', () => {
														
 
															         Alpine.magic('root', el => {
														
@@ -82,7 +82,7 @@ A common pattern in V2 was to manually call an `init()` (or similarly named meth
 
															 In V3, Alpine will automatically call `init()` methods on data objects.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data="foo()" x-init="init()"></div>
														
@@ -126,7 +126,7 @@ Alpine.start()
 
															 All of the conveniences provided by `x-show.transition...` helpers are still available, but now from a more unified API: `x-transition`:
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-show.transition="open"></div>
														
 
															 <!-- ✅ After -->
														
@@ -158,7 +158,7 @@ This was a feature very few people even knew existed let alone used.
 
															 Because the transition system is complex, it makes more sense from a maintenance perspective to only support transitioning elements with `x-show`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <template x-if.transition="open">
														
 
															     <div>...</div>
														
@@ -175,7 +175,7 @@ Because the transition system is complex, it makes more sense from a maintenance
 
															 Scope defined in `x-data` is now available to all children unless overwritten by a nested `x-data` expression.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data="{ foo: 'bar' }">
														
 
															     <div x-data="{}">
														
@@ -198,7 +198,7 @@ Scope defined in `x-data` is now available to all children unless overwritten by
 
															 Before V3, if `x-init` received a return value that is `typeof` "function", it would execute the callback after Alpine finished initializing all other directives in the tree. Now, you must manually call `$nextTick()` to achieve that behavior. `x-init` is no longer "return value aware".
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data x-init="() => { ... }">...</div>
														
@@ -213,7 +213,7 @@ Before V3, if `x-init` received a return value that is `typeof` "function", it w
 
															 Alpine V2 observes a return value of `false` as a desire to run `preventDefault` on the event. This conforms to the standard behavior of native, inline listeners: `<... oninput="someFunctionThatReturnsFalse()">`. Alpine V3 no longer supports this API. Most people don't know it exists and therefore is surprising behavior.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data="{ blockInput() { return false } }">
														
 
															     <input type="text" @input="blockInput()">
														
@@ -232,7 +232,7 @@ Alpine V2 observes a return value of `false` as a desire to run `preventDefault`
 
															 One of Alpine's stories for re-using functionality is abstracting Alpine directives into objects and applying them to elements with `x-spread`. This behavior is still the same, except now `x-bind` (with no specified attribute) is the API instead of `x-spread`.
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data="dropdown()">
														
 
															     <button x-spread="trigger">Toggle</button>
														
@@ -271,7 +271,7 @@ One of Alpine's stories for re-using functionality is abstracting Alpine directi
 
															 <a name="use-global-events-now"></a>
														
 
															 ### Use global lifecycle events instead of `Alpine.deferLoadingAlpine()`
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <script>
														
 
															     window.deferLoadingAlpine = startAlpine => {
														
@@ -300,7 +300,7 @@ One of Alpine's stories for re-using functionality is abstracting Alpine directi
 
															 In Alpine V2 for below code
														
 
															-```html
														
 
															+```alpine
														
 
															 <div x-data="{options: [{value: 1}, {value: 2}, {value: 3}] }">
														
 
															     <div x-ref="0">0</div>
														
 
															     <template x-for="option in options">
														
@@ -328,7 +328,7 @@ The following 2 APIs will still work in V3, but are considered deprecated and ar
 
															 <a name="away-replace-with-outside"></a>
														
 
															 ### Event listener modifier `.away` should be replaced with `.outside`
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-show="open" @click.away="open = false">
														
 
															     ...
														
@@ -343,7 +343,7 @@ The following 2 APIs will still work in V3, but are considered deprecated and ar
 
															 <a name="alpine-data-instead-of-global-functions"></a>
														
 
															 ### Prefer `Alpine.data()` to global Alpine function data providers
														
 
															-```html
														
 
															+```alpine
														
 
															 <!-- 🚫 Before -->
														
 
															 <div x-data="dropdown()">
														
 
															     ...