(**3.57.0**, [#3310](https://github.com/sveltejs/svelte/issues/3310))
+- The `style:` directive will now take precedence over a `style=` attribute (**3.57.0**, [#7475](https://github.com/sveltejs/svelte/issues/7475))
+- CSS units are now supported in the `fly` and `blur` transitions (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](https://svelte.dev/docs#run-time-svelte-transition))
+
+For all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+## What's new in SvelteKit
+- You can now get all cookies for a request with `cookies.getAll` (**1.10.0**, [#9287](https://github.com/sveltejs/kit/pull/9287), [Docs](https://kit.svelte.dev/docs/types#public-types-cookies))
+- Easily manage the submission status of (multiple) forms with the new exposed `submitter` parameter in `use:enhance` (**1.12.0**, [#9425](https://github.com/sveltejs/kit/pull/9425), [Docs](https://kit.svelte.dev/docs/types#public-types-submitfunction))
+- The default error page now has dark mode styles (**1.13.0**, [#9460](https://github.com/sveltejs/kit/pull/9460))
+- You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the [announcement blog post](https://svelte.dev/blog/zero-config-type-safety)
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Peerbeer](https://peer.beer/) lets you share files peer-to-peer (p2p) without any third parties or data limits
+- [unplaneted](https://unplaneted.com/) is an interface for exploring very large space images
+- [PokeBook](https://github.com/pokegh0st/pokebook) is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
+- [papi](https://papi.run/) lets you create prompts for AI models and share them with others with a unique link
+- [Mathesar](https://github.com/centerofci/mathesar) is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
+- [SQLite Playground](https://neil.macmunn.com/sqlite#) lets you learn how SQLite runs and stores data in the browser
+- [svgl](https://github.com/pheralb/svgl) is a beautiful library with SVG logos
+- [Swehl](https://swehl.com/) is an eCommerce store, community and tutorial site for breastfeeding mothers
+- [Codeverter](https://github.com/TGlide/codeverter) is a GPT-powered code converter, allowing you to convert between different languages and frameworks
+- [Game On Or Not](https://gameonornot.com/) is a free web app that helps you organize sports with your friends
+- [Sveltia CMS](https://github.com/sveltia/sveltia-cms) is a Git-based lightweight headless CMS
+
+**Learning Resources**
+
+_Featuring Svelte Contributors and Ambassadors_
+- [Streaming, snapshots, and other new features since SvelteKit 1.0](https://svelte.dev/blog/streaming-snapshots-sveltekit) by Geoff Rich on the svelte.dev Blog
+- [Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023](https://www.youtube.com/watch?v=vgXgex5E-8g) from Svelte Society
+ - If you missed this one live, check out [the next one](https://www.youtube.com/watch?v=MJHO6FSioPI) - scheduled for April 5th
+- [Svelte Society - London February 2023](https://www.youtube.com/watch?v=RkQ_f7XxdMI)
+- Svelte Radio episodes from this month:
+ - [We all live in a Svelte Submarine](https://www.svelteradio.com/episodes/we-all-live-in-a-svelte-submarine)
+ - [Building furniture using Svelte with Bert Bengtson](https://www.svelteradio.com/episodes/building-furniture-using-svelte-with-bert-bengtson)
+ - [Svelte Hackathon Announcement](https://www.svelteradio.com/episodes/svelte-hackathon-announcement)
+ - [LevelUpTuts 6 months later with Scott Tolinski](https://www.svelteradio.com/episodes/leveluptuts-6-months-later-with-scott-tolinski)
+ - [I got a cold and had fever dreams about React 😱](https://www.svelteradio.com/episodes/i-got-a-cold-and-had-fever-dreams-about-react)
+- This Week In Svelte videos:
+ - [2023 March 10 - New prompts! Underline your links!](https://www.youtube.com/watch?v=WiCjQVoE-3k)
+ - [2023 March 17 - More a11y warnings! How to: Dynamic Form Actions!](https://www.youtube.com/watch?v=sRhZQ-2VxVU)
+ - [2023 March 23 - SvelteKit 1.13.0, Vitest and Playwright overview](https://www.youtube.com/watch?v=vpbhsbg2otg)
+
+_To Watch or Hear_
+- [Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0](https://www.youtube.com/watch?v=uAF4Yd-gddo) by Joy of Code
+- [Why Is Svelte.js so Popular?](https://www.youtube.com/watch?v=73Y8Yyg54zc) by Prismic
+- [Interactive Tables in SvelteKit with TanStack Table](https://www.youtube.com/watch?v=-Zuo3UWjjI8) by hartenfellerdev
+- [SvelteKit + GraphQL with Houdini](https://www.youtube.com/watch?v=ADnaRwQZfqw&list=PLm0ILX0LGQk_220vvpsbyXH2VesRlCm-E) by Aftab Alam
+
+
+_To Read_
+- [Thoughts on Svelte](https://tyhopp.com/notes/thoughts-on-svelte) by Ty Hopp
+- [Storybook](https://storybook.js.org/blog/storybook-for-sveltekit/) on why (and how) it supports SvelteKit
+- [Svelte Authentication Tutorial with Authorizer](https://thethinks.vercel.app/blog/svelte-authorizer) by The Thinks
+- [Use Zod to Validate Forms on the Server with SvelteKit](https://blog.robino.dev/posts/svelte-zod-error) by Ross Robino
+- [Do I need a sitemap for my SvelteKit app, and how do I create it?](https://maier.tech/posts/do-i-need-a-sitemap-for-my-sveltekit-app-and-how-do-i-create-it) and [Complement zero-effort type safety in SvelteKit with Zod for even more type safety](https://maier.tech/posts/complement-zero-effort-type-safety-in-sveltekit-with-zod-for-even-more-type-safety) and [Configuring Turborepo for a SvelteKit monorepo](https://maier.tech/posts/configuring-turborepo-for-a-sveltekit-monorepo) by Thilo Maier
+- [Adding page transitions in SvelteKit](https://joshcollinsworth.com/blog/sveltekit-page-transitions) by Josh Collinsworth
+- [E2E testing with SvelteKit and Playwright](https://www.okupter.com/blog/e2e-testing-with-sveltekit-and-playwright) and [Why you should use TypeScript in your next SvelteKit projects](https://www.okupter.com/blog/sveltekit-with-typescript) by Justin Ahinon
+- [Understanding the structure of a SvelteKit project](https://www.inow.dev/understanding-the-structure-of-a-svelte-kit-project/) by Igor Nowosad
+- [Secure Authentication in Svelte using Hooks](https://dev.to/brewhousedigital/secure-authentication-in-svelte-using-hooks-k5j) by Brewhouse Digital
+
+**Libraries, Tools & Components**
+- [@vavite/node-loader](https://github.com/cyco130/vavite/tree/main/packages/node-loader) is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
+- [Inlang](https://github.com/inlang/inlang) is building i18n for SvelteKit and is [looking for feedback](https://www.reddit.com/r/sveltejs/comments/11ydtui/sveltekit_and_i18n_lets_finally_solve_this_never/)
+- [Skeleton](https://www.skeleton.dev/) - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
+- [SvelteKit-integrated-WebSocket](https://github.com/suhaildawood/SvelteKit-integrated-WebSocket) provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
+- [Svelte Legos](https://github.com/ankurrsinghal/svelte-legos) is a collection of essential Svelte Composition Utilities
+- [svelte-stored-writable](https://github.com/efstajas/svelte-stored-writable) is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
+- [svelte-virtual](https://github.com/ghostebony/svelte-virtual) provides Svelte components for efficiently rendering large lists.
+- ChatGPT Clones and Starters
+ - [chatwithme.chat](https://github.com/kierangilliam/chatwithme.chat) is an open source ChatGPT UI
+ - [SlickGPT](https://github.com/ShipBit/slickgpt) is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte
+ - [AI Chat Bestie](https://github.com/KTruong008/aichatbestie) is an unofficial ChatGPT app
+ - [chatgpt-svelte](https://github.com/ichbtrv/chatgpt-svelte) is a simple UI for the ChatGPT Open AI API
+
+Thanks for reading! And don't forget to try your hand at the [Svelte Hackathon](https://hack.sveltesociety.dev/) 🧑💻
+
+As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+See ya next time!
diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md
index 2362925beb..753f571ebb 100644
--- a/site/content/docs/01-getting-started.md
+++ b/site/content/docs/01-getting-started.md
@@ -7,6 +7,7 @@ title: Getting started
To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte).
To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
+
```
npm create svelte@latest myapp
cd myapp
@@ -16,7 +17,7 @@ npm run dev
SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR.
-If you don't need a full-fledged app framework and instead want to build a simple frontend-only site/app, you can also use Svelte (without Kit) with Vite by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory.
+If you don't need a full-fledged app framework and instead want to build a simple frontend-only site/app, you can also use Svelte (without Kit) with Vite by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory.
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well.
diff --git a/site/content/docs/02-component-format.md b/site/content/docs/02-component-format.md
index d9f7a35662..90fbc3cd30 100644
--- a/site/content/docs/02-component-format.md
+++ b/site/content/docs/02-component-format.md
@@ -28,7 +28,7 @@ A `
```
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/template-syntax#component-directives-bind-this).
---
@@ -174,11 +174,11 @@ Only values which directly appear within the `$:` block will become dependencies
@@ -193,17 +193,18 @@ Total: {total}
```
---
+
It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
```sv
@@ -230,7 +231,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
---
-A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](/docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
+A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/run-time#svelte-store) contains minimal store implementations which fulfil this contract.
Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
@@ -238,7 +239,7 @@ Assignments to `$`-prefixed variables require that the variable be a writable st
Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.
-Local variables (that do not represent store values) must *not* have a `$` prefix.
+Local variables (that do not represent store values) must _not_ have a `$` prefix.
```sv
```
-
### <style>
---
@@ -336,11 +335,11 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
}
p:global(.red) {
- /* this will apply to all elements belonging to this
+ /* this will apply to all
elements belonging to this
component with a class of red, even if class="red" does
- not initially appear in the markup, and is instead
- added at runtime. This is useful when the class
- of the element is dynamically applied, for instance
+ not initially appear in the markup, and is instead
+ added at runtime. This is useful when the class
+ of the element is dynamically applied, for instance
when updating the element's classList property directly. */
}
@@ -352,9 +351,11 @@ If you want to make @keyframes that are accessible globally, you need to prepend
The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
-```html
+```svelte
```
@@ -366,7 +367,7 @@ However, it is possible to have `
```
-Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `
` elements elsewhere in your app, as we'll see in the next step.
+Importantly, these rules are _scoped to the component_. You won't accidentally change the style of `
` elements elsewhere in your app, as we'll see in the next step.
diff --git a/site/content/tutorial/01-introduction/05-nested-components/text.md b/site/content/tutorial/01-introduction/05-nested-components/text.md
index ae02296755..3259cedb20 100644
--- a/site/content/tutorial/01-introduction/05-nested-components/text.md
+++ b/site/content/tutorial/01-introduction/05-nested-components/text.md
@@ -10,7 +10,7 @@ Each `.svelte` file holds a component that is a reusable self-contained block of
Let's add a `
@@ -18,9 +18,9 @@ Let's add a `
```
-> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
\ No newline at end of file
+> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
diff --git a/site/content/tutorial/03-props/02-default-values/text.md b/site/content/tutorial/03-props/02-default-values/text.md
index 17b486d0ad..47a7502c06 100644
--- a/site/content/tutorial/03-props/02-default-values/text.md
+++ b/site/content/tutorial/03-props/02-default-values/text.md
@@ -4,15 +4,15 @@ title: Default values
We can easily specify default values for props in `Nested.svelte`:
-```html
+```svelte
```
-If we now add a second component *without* an `answer` prop, it will fall back to the default:
+If we now add a second component _without_ an `answer` prop, it will fall back to the default:
-```html
-
-
+```svelte
+
+
```
diff --git a/site/content/tutorial/03-props/03-spread-props/text.md b/site/content/tutorial/03-props/03-spread-props/text.md
index 1480ad8065..0730110754 100644
--- a/site/content/tutorial/03-props/03-spread-props/text.md
+++ b/site/content/tutorial/03-props/03-spread-props/text.md
@@ -4,8 +4,8 @@ title: Spread props
If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
-```html
-
+```svelte
+
```
> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
diff --git a/site/content/tutorial/03-props/meta.json b/site/content/tutorial/03-props/meta.json
index 7b9e0a2783..d03965c7cb 100644
--- a/site/content/tutorial/03-props/meta.json
+++ b/site/content/tutorial/03-props/meta.json
@@ -1,3 +1,3 @@
{
"title": "Props"
-}
\ No newline at end of file
+}
diff --git a/site/content/tutorial/04-logic/01-if-blocks/text.md b/site/content/tutorial/04-logic/01-if-blocks/text.md
index 33915070cb..9b45e65fc2 100644
--- a/site/content/tutorial/04-logic/01-if-blocks/text.md
+++ b/site/content/tutorial/04-logic/01-if-blocks/text.md
@@ -2,22 +2,18 @@
title: If blocks
---
-HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does.
+HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
To conditionally render some markup, we wrap it in an `if` block:
-```html
+```svelte
{#if user.loggedIn}
-
- Log out
-
+ Log out
{/if}
{#if !user.loggedIn}
-
- Log in
-
+ Log in
{/if}
```
-Try it — update the component, and click on the buttons.
\ No newline at end of file
+Try it — update the component, and click on the buttons.
diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md
index d25a7d3897..677ac477dc 100644
--- a/site/content/tutorial/04-logic/02-else-blocks/text.md
+++ b/site/content/tutorial/04-logic/02-else-blocks/text.md
@@ -4,16 +4,12 @@ title: Else blocks
Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
-```html
+```svelte
{#if user.loggedIn}
-
- Log out
-
+ Log out
{:else}
-
- Log in
-
+ Log in
{/if}
```
-> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
\ No newline at end of file
+> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/text.md b/site/content/tutorial/04-logic/03-else-if-blocks/text.md
index 18faeacfe6..15c3d08fe4 100644
--- a/site/content/tutorial/04-logic/03-else-if-blocks/text.md
+++ b/site/content/tutorial/04-logic/03-else-if-blocks/text.md
@@ -4,7 +4,7 @@ title: Else-if blocks
Multiple conditions can be 'chained' together with `else if`:
-```html
+```svelte
{#if x > 10}
{x} is greater than 10
{:else if 5 > x}
@@ -12,4 +12,4 @@ Multiple conditions can be 'chained' together with `else if`:
{:else}
{x} is between 5 and 10
{/if}
-```
\ No newline at end of file
+```
diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md
index c3a6c30d4e..8f53608b20 100644
--- a/site/content/tutorial/04-logic/04-each-blocks/text.md
+++ b/site/content/tutorial/04-logic/04-each-blocks/text.md
@@ -4,25 +4,29 @@ title: Each blocks
If you need to loop over lists of data, use an `each` block:
-```html
+```svelte
```
> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
-You can get the current *index* as a second argument, like so:
+You can get the current _index_ as a second argument, like so:
-```html
+```svelte
{#each cats as cat, i}
-
- {i + 1}: {cat.name}
-
+
+
+ {i + 1}: {cat.name}
+
+
{/each}
```
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
index 63821de5ec..e3f5f1afbd 100644
--- a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
@@ -2,20 +2,20 @@
title: Keyed each blocks
---
-By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
+By default, when you modify the value of an `each` block, it will add and remove items at the _end_ of the block, and update any values that have changed. That might not be what you want.
-It's easier to show why than to explain. Click to expand the `Console`, then click the 'Remove first thing' button a few times, and notice what happens: it does not remove the first `` component, but rather the *last* DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji.
+It's easier to show why than to explain. Click to expand the `Console`, then click the 'Remove first thing' button a few times, and notice what happens: it does not remove the first `` component, but rather the _last_ DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji.
Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected.
To do that, we specify a unique identifier (or "key") for the `each` block:
-```html
+```svelte
{#each things as thing (thing.id)}
-
+
{/each}
```
-Here, `(thing.id)` is the *key*, which tells Svelte how to figure out which DOM node to change when the component updates.
+Here, `(thing.id)` is the _key_, which tells Svelte how to figure out which DOM node to change when the component updates.
> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md
index 1814681341..9a528da102 100644
--- a/site/content/tutorial/04-logic/06-await-blocks/text.md
+++ b/site/content/tutorial/04-logic/06-await-blocks/text.md
@@ -2,9 +2,9 @@
title: Await blocks
---
-Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
+Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
-```html
+```svelte
{#await promise}
...waiting
{:then number}
@@ -18,7 +18,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte
If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
-```html
+```svelte
{#await promise then number}
the number is {number}
{/await}
diff --git a/site/content/tutorial/04-logic/meta.json b/site/content/tutorial/04-logic/meta.json
index 3ecf1ccee2..22e69b0c83 100644
--- a/site/content/tutorial/04-logic/meta.json
+++ b/site/content/tutorial/04-logic/meta.json
@@ -1,3 +1,3 @@
{
"title": "Logic"
-}
\ No newline at end of file
+}
diff --git a/site/content/tutorial/05-events/01-dom-events/text.md b/site/content/tutorial/05-events/01-dom-events/text.md
index 1c08c9159a..64cfa32170 100644
--- a/site/content/tutorial/05-events/01-dom-events/text.md
+++ b/site/content/tutorial/05-events/01-dom-events/text.md
@@ -4,8 +4,8 @@ title: DOM events
As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
-```html
+```svelte
The mouse position is {m.x} x {m.y}
-```
\ No newline at end of file
+```
diff --git a/site/content/tutorial/05-events/02-inline-handlers/text.md b/site/content/tutorial/05-events/02-inline-handlers/text.md
index 0ec177cb44..2fe1c48e2c 100644
--- a/site/content/tutorial/05-events/02-inline-handlers/text.md
+++ b/site/content/tutorial/05-events/02-inline-handlers/text.md
@@ -4,12 +4,12 @@ title: Inline handlers
You can also declare event handlers inline:
-```html
-
+```svelte
+
(m = { x: e.clientX, y: e.clientY })}>
The mouse position is {m.x} x {m.y}
```
The quote marks are optional, but they're helpful for syntax highlighting in some environments.
-> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
\ No newline at end of file
+> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
diff --git a/site/content/tutorial/05-events/03-event-modifiers/text.md b/site/content/tutorial/05-events/03-event-modifiers/text.md
index e9963b78e2..eea563fec2 100644
--- a/site/content/tutorial/05-events/03-event-modifiers/text.md
+++ b/site/content/tutorial/05-events/03-event-modifiers/text.md
@@ -2,29 +2,27 @@
title: Event modifiers
---
-DOM event handlers can have *modifiers* that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
+DOM event handlers can have _modifiers_ that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
-```html
+```svelte
-
- Click me
-
+
Click me
```
The full list of modifiers:
-* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
-* `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-* `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
-* `nonpassive` — explicitly set `passive: false`
-* `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
-* `once` — remove the handler after the first time it runs
-* `self` — only trigger handler if event.target is the element itself
-* `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
+- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
+- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+- `nonpassive` — explicitly set `passive: false`
+- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
+- `once` — remove the handler after the first time it runs
+- `self` — only trigger handler if event.target is the element itself
+- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
You can chain modifiers together, e.g. `on:click|once|capture={...}`.
diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md
index ba3cd5b9c4..0df2bc68f0 100644
--- a/site/content/tutorial/05-events/04-component-events/text.md
+++ b/site/content/tutorial/05-events/04-component-events/text.md
@@ -4,7 +4,7 @@ title: Component events
Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
-```html
+```svelte
-
+
```
But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
-```html
+```svelte
-
-```
\ No newline at end of file
+
+```
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
index be9ae77f89..de30272fd8 100644
--- a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
@@ -6,8 +6,6 @@ Event forwarding works for DOM events too.
We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the `` element in `CustomButton.svelte`:
-```html
-
- Click me
-
-```
\ No newline at end of file
+```svelte
+ Click me
+```
diff --git a/site/content/tutorial/05-events/meta.json b/site/content/tutorial/05-events/meta.json
index c5f088e208..42460e989b 100644
--- a/site/content/tutorial/05-events/meta.json
+++ b/site/content/tutorial/05-events/meta.json
@@ -1,3 +1,3 @@
{
"title": "Events"
-}
\ No newline at end of file
+}
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/text.md b/site/content/tutorial/06-bindings/01-text-inputs/text.md
index 7bfe4bb86c..68e0c2ff9c 100644
--- a/site/content/tutorial/06-bindings/01-text-inputs/text.md
+++ b/site/content/tutorial/06-bindings/01-text-inputs/text.md
@@ -2,14 +2,14 @@
title: Text inputs
---
-As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+As a general rule, data flow in Svelte is _top down_ — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
-Sometimes it's useful to break that rule. Take the case of the ` ` element in this component — we *could* add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+Sometimes it's useful to break that rule. Take the case of the ` ` element in this component — we _could_ add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
Instead, we can use the `bind:value` directive:
-```html
-
+```svelte
+
```
This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/text.md b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
index 1ede244301..a9b539e603 100644
--- a/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -6,7 +6,7 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
With `bind:value`, Svelte takes care of it for you:
-```html
-
-
-```
\ No newline at end of file
+```svelte
+
+
+```
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
index 621d9fbb7b..f2dd2e3c01 100644
--- a/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -4,6 +4,6 @@ title: Checkbox inputs
Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
-```html
-
-```
\ No newline at end of file
+```svelte
+
+```
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md
index b48b23921f..790e95ea83 100644
--- a/site/content/tutorial/06-bindings/04-group-inputs/text.md
+++ b/site/content/tutorial/06-bindings/04-group-inputs/text.md
@@ -6,31 +6,27 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
Add `bind:group` to each input:
-```html
-
+```svelte
+
```
In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `
@@ -14,10 +14,8 @@ Just as you can bind to DOM elements, you can bind to component instances themse
Now we can programmatically interact with this component using `field`.
-```html
-
- Focus field
-
+```svelte
+ field.focus()}> Focus field
```
> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.
diff --git a/site/content/tutorial/06-bindings/meta.json b/site/content/tutorial/06-bindings/meta.json
index 8bb0142ecc..b6b01225e3 100644
--- a/site/content/tutorial/06-bindings/meta.json
+++ b/site/content/tutorial/06-bindings/meta.json
@@ -1,3 +1,3 @@
{
"title": "Bindings"
-}
\ No newline at end of file
+}
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/text.md b/site/content/tutorial/07-lifecycle/01-onmount/text.md
index 6baa254e9f..517a9304df 100644
--- a/site/content/tutorial/07-lifecycle/01-onmount/text.md
+++ b/site/content/tutorial/07-lifecycle/01-onmount/text.md
@@ -2,13 +2,13 @@
title: onMount
---
-Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
+Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `` element after it had been rendered.
We'll add an `onMount` handler that loads some data over the network:
-```html
+```svelte
```
-While it's important to call lifecycle functions during the component's initialisation, it doesn't matter *where* you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
+While it's important to call lifecycle functions during the component's initialisation, it doesn't matter _where_ you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
```js
import { onDestroy } from 'svelte';
@@ -33,13 +33,13 @@ export function onInterval(callback, milliseconds) {
...and import it into our component:
-```html
+```svelte
```
-Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
\ No newline at end of file
+Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
diff --git a/site/content/tutorial/07-lifecycle/03-update/text.md b/site/content/tutorial/07-lifecycle/03-update/text.md
index 0255e845a8..3c791245b0 100644
--- a/site/content/tutorial/07-lifecycle/03-update/text.md
+++ b/site/content/tutorial/07-lifecycle/03-update/text.md
@@ -13,7 +13,7 @@ let div;
let autoscroll;
beforeUpdate(() => {
- autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+ autoscroll = div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
});
afterUpdate(() => {
diff --git a/site/content/tutorial/07-lifecycle/04-tick/text.md b/site/content/tutorial/07-lifecycle/04-tick/text.md
index 8f5603a361..a457247346 100644
--- a/site/content/tutorial/07-lifecycle/04-tick/text.md
+++ b/site/content/tutorial/07-lifecycle/04-tick/text.md
@@ -4,7 +4,7 @@ title: tick
The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
-When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next *microtask* to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
+When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next _microtask_ to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `