Skip to content

Commit c295281

Browse files
committed
remove backticks from headers, now that they are getting rendered
1 parent b504a44 commit c295281

File tree

10 files changed

+42
-42
lines changed

10 files changed

+42
-42
lines changed

documentation/docs/01-introduction/03-reactivity-fundamentals.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Runes are function-like symbols that provide instructions to the Svelte compiler
1212

1313
The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
1414

15-
## `$state`
15+
## $state
1616

1717
Reactive state is declared with the `$state` rune:
1818

@@ -53,7 +53,7 @@ class Todo {
5353
> </button>
5454
> ```
5555
56-
## `$derived`
56+
## $derived
5757
5858
Derived state is declared with the `$derived` rune:
5959
@@ -92,7 +92,7 @@ As with `$state`, you can mark class fields as `$derived`.
9292
>
9393
> This only worked at the top level of a component.
9494
95-
## `$effect`
95+
## $effect
9696
9797
To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
9898

documentation/docs/02-template-syntax/08-bindings.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ If you're using `bind:` directives together with `on` event attributes, the bind
7474

7575
Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
7676

77-
## Binding `<select>` value
77+
## Binding <select> value
7878

7979
A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
8080

documentation/docs/02-template-syntax/09-special-elements.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: Special elements
66

77
Some of Svelte's concepts need special elements. Those are prefixed with `svelte:` and listed here.
88

9-
## `<svelte:self>`
9+
## <svelte:self>
1010

1111
The `<svelte:self>` element allows a component to include itself, recursively.
1212

@@ -25,7 +25,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
2525
{/if}
2626
```
2727

28-
## `<svelte:component>`
28+
## <svelte:component>
2929

3030
```svelte
3131
<svelte:component this={expression} />
@@ -39,7 +39,7 @@ If `this` is falsy, no component is rendered.
3939
<svelte:component this={currentSelection.component} foo={bar} />
4040
```
4141

42-
## `<svelte:element>`
42+
## <svelte:element>
4343

4444
```svelte
4545
<svelte:element this={expression} />
@@ -69,7 +69,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
6969
<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
7070
```
7171

72-
## `<svelte:window>`
72+
## <svelte:window>
7373

7474
```svelte
7575
<svelte:window onevent={handler} />
@@ -112,7 +112,7 @@ All except `scrollX` and `scrollY` are readonly.
112112

113113
> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
114114
115-
## `<svelte:document>`
115+
## <svelte:document>
116116

117117
```svelte
118118
<svelte:document onevent={handler} />
@@ -139,7 +139,7 @@ You can also bind to the following properties:
139139

140140
All are readonly.
141141

142-
## `<svelte:body>`
142+
## <svelte:body>
143143

144144
```svelte
145145
<svelte:body onevent={handler} />
@@ -153,7 +153,7 @@ As with `<svelte:window>` and `<svelte:document>`, this element may only appear
153153
<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
154154
```
155155

156-
## `<svelte:head>`
156+
## <svelte:head>
157157

158158
```svelte
159159
<svelte:head>...</svelte:head>
@@ -170,7 +170,7 @@ As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element
170170
</svelte:head>
171171
```
172172

173-
## `<svelte:options>`
173+
## <svelte:options>
174174

175175
```svelte
176176
<svelte:options option={value} />

documentation/docs/03-runes/01-state.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity i
66

77
Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
88

9-
## `$state`
9+
## $state
1010

1111
The `$state` rune is the at the heart of the runes API. It is used to declare reactive state:
1212

@@ -62,7 +62,7 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
6262

6363
> Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
6464
65-
## `$state.raw`
65+
## $state.raw
6666

6767
State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
6868

@@ -84,7 +84,7 @@ person = {
8484

8585
This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
8686

87-
## `$state.snapshot`
87+
## $state.snapshot
8888

8989
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
9090

@@ -101,7 +101,7 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
101101

102102
This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
103103

104-
## `$derived`
104+
## $derived
105105

106106
Derived state is declared with the `$derived` rune:
107107

@@ -122,7 +122,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
122122

123123
As with `$state`, you can mark class fields as `$derived`.
124124

125-
## `$derived.by`
125+
## $derived.by
126126

127127
Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
128128

documentation/docs/03-runes/02-side-effects.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Side effects
77

88
Side effects play a crucial role in applications. They are triggered by state changes and can then interact with external systems, like logging something, setting up a server connection or synchronize with a third-party library that has no knowledge of Svelte's reactivity model.
99

10-
## `$effect` fundamentals
10+
## $effect fundamentals
1111

1212
To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
1313

@@ -63,7 +63,7 @@ You can return a function from `$effect`, which will run immediately before the
6363
<button onclick={() => (milliseconds /= 2)}>faster</button>
6464
```
6565

66-
## `$effect` dependencies
66+
## $effect dependencies
6767

6868
`$effect` automatically picks up any reactivy values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
6969

@@ -139,7 +139,7 @@ $effect(() => {
139139
});
140140
```
141141

142-
## When not to use `$effect`
142+
## When not to use $effect
143143

144144
In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
145145

@@ -254,7 +254,7 @@ If you need to use bindings, for whatever reason (for example when you want some
254254

255255
If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
256256

257-
## `$effect.pre`
257+
## $effect.pre
258258

259259
In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
260260

@@ -291,7 +291,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
291291

292292
Apart from the timing, `$effect.pre` works exactly like [`$effect`](#$effect) — refer to its documentation for more info.
293293

294-
## `$effect.tracking`
294+
## $effect.tracking
295295

296296
The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
297297

@@ -355,7 +355,7 @@ export default function readable<T>(
355355
}
356356
```
357357

358-
## `$effect.root`
358+
## $effect.root
359359

360360
The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
361361
nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.

documentation/docs/04-runtime/01-stores.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Stores are still a good solution when you have complex asynchronous data streams
4444

4545
The `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.
4646

47-
### `writable`
47+
### writable
4848

4949
Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
5050

@@ -89,7 +89,7 @@ unsubscribe(); // logs 'no more subscribers'
8989

9090
Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
9191

92-
### `readable`
92+
### readable
9393

9494
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
9595

@@ -115,7 +115,7 @@ const ticktock = readable('tick', (set, update) => {
115115
});
116116
```
117117

118-
### `derived`
118+
### derived
119119

120120
Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
121121

@@ -229,7 +229,7 @@ const delayed = derived([a, b], ([$a, $b], set) => {
229229
});
230230
```
231231

232-
### `readonly`
232+
### readonly
233233

234234
This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
235235

@@ -246,7 +246,7 @@ writableStore.set(2); // console: 2
246246
readableStore.set(2); // ERROR
247247
```
248248

249-
### `get`
249+
### get
250250

251251
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
252252

documentation/docs/04-runtime/03-lifecycle-hooks.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ title: Lifecycle hooks
99

1010
In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
1111

12-
## `onMount`
12+
## onMount
1313

1414
The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
1515

@@ -43,7 +43,7 @@ If a function is returned from `onMount`, it will be called when the component i
4343

4444
> This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
4545
46-
## `onDestroy`
46+
## onDestroy
4747

4848
> EXPORT_SNIPPET: svelte#onDestroy
4949
@@ -61,7 +61,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
6161
</script>
6262
```
6363

64-
## `tick`
64+
## tick
6565

6666
While there's no "after update" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
6767

@@ -77,7 +77,7 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
7777
</script>
7878
```
7979

80-
## Deprecated: `beforeUpdate` / `afterUpdate`
80+
## Deprecated: beforeUpdate/afterUpdate
8181

8282
Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.
8383

documentation/docs/04-runtime/04-imperative-component-api.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ better title needed?
1212

1313
Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.
1414

15-
## `mount`
15+
## mount
1616

1717
Instantiates a component and mounts it to the given target:
1818

@@ -31,7 +31,7 @@ You can mount multiple components per page, and you can also mount from within y
3131

3232
Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.
3333

34-
## `unmount`
34+
## unmount
3535

3636
Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
3737

@@ -46,7 +46,7 @@ const app = mount(App, {...});
4646
unmount(app);
4747
```
4848

49-
## `render`
49+
## render
5050

5151
Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
5252

@@ -62,7 +62,7 @@ result.body; // HTML for somewhere in this <body> tag
6262
result.head; // HTML for somewhere in this <head> tag
6363
```
6464

65-
## `hydrate`
65+
## hydrate
6666

6767
Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#server-render) function) inside the target and make it interactive:
6868

documentation/docs/05-misc/01-debugging.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Debugging
77

88
Svelte provides two built-in ways to debug your application.
99

10-
## `$inspect`
10+
## $inspect
1111

1212
The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its
1313
argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object

documentation/docs/05-misc/03-typescript.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ title: TypeScript
1010

1111
You can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
1212

13-
## `<script lang="ts">`
13+
## <script lang="ts">
1414

1515
To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
1616

@@ -77,7 +77,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
7777

7878
> If you're starting a new project, we recommend using SvelteKit or Vite instead
7979
80-
## Typing `$props`
80+
## Typing $props
8181

8282
Type `$props` just like a regular object with certain properties.
8383

@@ -107,7 +107,7 @@ Type `$props` just like a regular object with certain properties.
107107
</button>
108108
```
109109

110-
## Generic `$props`
110+
## Generic $props
111111

112112
Components can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that reveives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:
113113

@@ -130,7 +130,7 @@ Components can declare a generic relationship between their properties. One exam
130130

131131
The content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.
132132

133-
## Typing `$state`
133+
## Typing $state
134134

135135
You can type `$state` like any other variable.
136136

@@ -157,7 +157,7 @@ class Counter {
157157
}
158158
```
159159

160-
## The `Component` type
160+
## The Component type
161161

162162
Svelte components or of type `Component`. You can use it and its related types to express a variety of constraints.
163163

0 commit comments

Comments
 (0)