-
+
{row.name}
{row.hex}
{row.rgb}
diff --git a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md
index c117ad4ce..ea4e6a572 100644
--- a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md
+++ b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md
@@ -20,8 +20,8 @@ It's useful for things like this folder tree view, where folders can contain _ot
```svelte
/// file: Folder.svelte
{#if file.files}
- +++
+++
+ +++
+++
{:else}
-
+
{/if}
```
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte
index 1cc7d1737..85be476d6 100644
--- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte
+++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte
@@ -26,13 +26,13 @@
on:ended={() => {
time = 0;
}}
- />
+ >
paused = !paused}
- />
+ >
@@ -68,7 +68,7 @@
});
}}
>
-
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte
index acafe1bbc..ffdb485d8 100644
--- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte
+++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte
@@ -38,13 +38,13 @@
on:ended={() => {
time = 0;
}}
- />
+ >
paused = !paused}
- />
+ >
@@ -80,7 +80,7 @@
});
}}
>
-
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte
index 0eaa4a16e..323286b79 100644
--- a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte
+++ b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte
@@ -42,13 +42,13 @@
on:ended={() => {
time = 0;
}}
- />
+ >
paused = !paused}
- />
+ >
@@ -84,7 +84,7 @@
});
}}
>
-
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md
index e7812fead..79898d168 100644
--- a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md
+++ b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md
@@ -14,7 +14,7 @@ src/routes/
└ +page.svelte
```
-...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `
` element is where the page content will be rendered:
+...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `
` element is where the page content will be rendered:
```svelte
/// file: src/routes/+layout.svelte
@@ -23,7 +23,7 @@ src/routes/
about
-
+
```
A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth.
diff --git a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md
index 0ea2b69c5..a96aab1ad 100644
--- a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md
+++ b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md
@@ -19,7 +19,7 @@ Now, add a sidebar in the layout for the post page:
-
+
+++
diff --git a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/README.md b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/README.md
index 83a3048cb..cd83beefa 100644
--- a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/README.md
+++ b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/README.md
@@ -50,7 +50,7 @@ Next, we want to create a form for each todo, complete with a hidden ` ` t
+++ +++
{/each}
diff --git a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.svelte
index 7896e68b9..f5cf596ce 100644
--- a/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/02-named-form-actions/app-b/src/routes/+page.svelte
@@ -21,7 +21,7 @@
{/each}
diff --git a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
index 8346527df..ae217b114 100644
--- a/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/03-form-validation/app-b/src/routes/+page.svelte
@@ -28,7 +28,7 @@
{/each}
diff --git a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
index f45a7a244..dba733d18 100644
--- a/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte
@@ -31,7 +31,7 @@
{/each}
diff --git a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
index a7770b986..51c5b9251 100644
--- a/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/06-forms/05-customizing-use-enhance/app-b/src/routes/+page.svelte
@@ -56,7 +56,7 @@
>
{todo.description}
-
+
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
index 76c6e3156..2d6b71bae 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-a/src/routes/+page.svelte
@@ -42,7 +42,7 @@
on:click={async (e) => {
// TODO handle delete
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
index 58a6ad1e6..50ed0a9c0 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/app-b/src/routes/+page.svelte
@@ -55,7 +55,7 @@
on:click={async (e) => {
// TODO handle delete
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
index 24357d492..499744d03 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
+++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/README.md
@@ -56,6 +56,6 @@ We can now interact with this endpoint inside our event handlers:
data.todos = data.todos.filter((t) => t !== todo);+++
}}
- />
+ >
```
diff --git a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
index 3d4a5929a..f5b26108a 100644
--- a/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
+++ b/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/app-b/src/routes/+page.svelte
@@ -65,7 +65,7 @@
data.todos = data.todos.filter((t) => t !== todo);
}}
- />
+ >
{/each}
diff --git a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
index bfac69ec8..dddb21220 100644
--- a/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
+++ b/content/tutorial/03-sveltekit/08-stores/01-page-store/README.md
@@ -6,13 +6,13 @@ As we learned [earlier](writable-stores), Svelte stores are a place to put data
SvelteKit makes three readonly stores available via the `$app/stores` module — `page`, `navigating` and `updated`. The one you'll use most often is [`page`](https://kit.svelte.dev/docs/types#public-types-page), which provides information about the current page:
-* `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
-* `params` — the current page's [parameters](params)
-* `route` — an object with an `id` property representing the current route
-* `status` — the HTTP status code of the current page
-* `error` — the error object of the current page, if any (you'll learn more about error handling in [later](error-basics) [exercises](handleerror))
-* `data` — the data for the current page, combining the return values of all `load` functions
-* `form` — the data returned from a [form action](the-form-element)
+- `url` — the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) of the current page
+- `params` — the current page's [parameters](params)
+- `route` — an object with an `id` property representing the current route
+- `status` — the HTTP status code of the current page
+- `error` — the error object of the current page, if any (you'll learn more about error handling in [later](error-basics) [exercises](handleerror))
+- `data` — the data for the current page, combining the return values of all `load` functions
+- `form` — the data returned from a [form action](the-form-element)
As with any other store, you can reference its value in a component by prefixing its name with the `$` symbol. For example, we can access the current pathname as `$page.url.pathname`:
@@ -32,5 +32,5 @@ As with any other store, you can reference its value in a component by prefixing
-
+
```
diff --git a/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md b/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
index 163496f24..6da1d963e 100644
--- a/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
+++ b/content/tutorial/03-sveltekit/08-stores/02-navigating-store/README.md
@@ -31,5 +31,5 @@ It can be used to show a loading indicator for long-running navigations. In this
{/if}+++
-
+
```
diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md
index 4733237b8..1acf11565 100644
--- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md
+++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/04-route-groups/README.md
@@ -27,7 +27,7 @@ We can also add some UI to these two routes by adding a `src/routes/(authed)/+la
```svelte
/// file: src/routes/(authed)/+layout.svelte
-
+