diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 1074b4b76c..468ddc5ea8 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -87,7 +87,9 @@ An element or component can have multiple spread attributes, interspersed with r
### Text expressions
-* `{expression}`
+```sv
+{expression}
+```
---
@@ -101,7 +103,9 @@ Text can also contain JavaScript expressions:
### HTML expressions
-* `{@html expression}`
+```sv
+{@html expression}
+```
---
@@ -119,9 +123,15 @@ In a text expression, characters like `<` and `>` are escaped. With HTML express
### If blocks
-* `{#if expression}...{/if}`
-* `{#if expression}...{:else if expression}...{/if}`
-* `{#if expression}...{:else}...{/if}`
+```sv
+{#if expression}...{/if}
+```
+```sv
+{#if expression}...{:else if expression}...{/if}
+```
+```sv
+{#if expression}...{:else}...{/if}
+```
---
@@ -150,10 +160,18 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
### Each blocks
-* `{#each expression as name}...{/each}`
-* `{#each expression as name, index}...{/each}`
-* `{#each expression as name, index (key)}...{/each}`
-* `{#each expression as name}...{:else}...{/each}`
+```sv
+{#each expression as name}...{/each}
+```
+```sv
+{#each expression as name, index}...{/each}
+```
+```sv
+{#each expression as name, index (key)}...{/each}
+```
+```sv
+{#each expression as name}...{:else}...{/each}
+```
---
@@ -213,9 +231,15 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
### Await blocks
-* `{#await expression}...{:then name}...{:catch name}...{/await}`
-* `{#await expression}...{:then name}...{/await}`
-* `{#await expression then name}...{/await}`
+```sv
+{#await expression}...{:then name}...{:catch name}...{/await}
+```
+```sv
+{#await expression}...{:then name}...{/await}
+```
+```sv
+{#await expression then name}...{/await}
+```
---
@@ -261,8 +285,12 @@ If you don't care about the pending state, you can also omit the initial block.
### DOM events
-* `on:eventname={handler}`
-* `on:eventname|modifiers={handler}`
+```sv
+on:eventname={handler}
+```
+```sv
+on:eventname|modifiers={handler}
+```
---
@@ -326,7 +354,9 @@ If the `on:` directive is used without a value, the component will *forward* the
### Component events
-* `on:eventname={handler}`
+```sv
+on:eventname={handler}
+```
---
@@ -340,9 +370,15 @@ Components can emit events using [createEventDispatcher](docs#createeventdispatc
### Element bindings
-* `bind:property={variable}`
-* `bind:group={variable}`
-* `bind:this={dom_node}`
+```sv
+bind:property={variable}
+```
+```sv
+bind:group={variable}
+```
+```sv
+bind:this={dom_node}
+```
---
@@ -514,8 +550,12 @@ To get a reference to a DOM node, use `bind:this`.
### Component bindings
-* `bind:property={variable}`
-* `bind:this={component_instance}`
+```sv
+bind:property={variable}
+```
+```sv
+bind:this={component_instance}
+```
---
@@ -542,8 +582,12 @@ Components also support `bind:this`, allowing you to interact with component ins
### Classes
-* `class:name={value}`
-* `class:name`
+```sv
+class:name={value}
+```
+```sv
+class:name
+```
---
@@ -561,8 +605,12 @@ A `class:` directive provides a shorter way of toggling a class on an element.
### Actions
-* `use:action`
-* `use:action={parameters}`
+```sv
+use:action
+```
+```sv
+use:action={parameters}
+```
```js
action = (node: HTMLElement, parameters: any) => {
@@ -622,18 +670,43 @@ An action can have parameters. If the returned value has an `update` method, it
### Transitions
-* `transition:name`
-* `transition:name={params}`
-* `transition:name|local`
-* `transition:name|local={params}`
-* `in:name`
-* `in:name={params}`
-* `in:name|local`
-* `in:name|local={params}`
-* `out:name`
-* `out:name={params}`
-* `out:name|local`
-* `out:name|local={params}`
+```sv
+transition:name
+```
+```sv
+transition:name={params}
+```
+```sv
+transition:name|local
+```
+```sv
+transition:name|local={params}
+```
+```sv
+in:name
+```
+```sv
+in:name={params}
+```
+```sv
+in:name|local
+```
+```sv
+in:name|local={params}
+```
+```sv
+out:name
+```
+```sv
+out:name={params}
+```
+```sv
+out:name|local
+```
+```sv
+out:name|local={params}
+```
+
```js
transition = (node: HTMLElement, params: any) => {
@@ -764,10 +837,11 @@ A custom transition function can also return a `tick` function, which is called
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](tutorial/deferred-transitions) possible.
----
#### Transition events
+---
+
An element with transitions will dispatch the following events in addition to any standard DOM events:
* `introstart`
@@ -815,9 +889,15 @@ TODO i can't remember how any of this works
### Slots
-* ``
-* ``
-* ``
+```sv
+
+```
+```sv
+
+```
+```sv
+
+```
---
@@ -927,7 +1007,9 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
### <svelte:component>
-* ``
+```sv
+
+```
---
@@ -942,8 +1024,12 @@ If `this` is falsy, no component is rendered.
### <svelte:window>
-* ``
-* ``
+```sv
+
+```
+```sv
+
+```
---
@@ -980,7 +1066,9 @@ All except `scrollX` and `scrollY` are readonly.
### <svelte:body>
-* ``
+```sv
+
+```
---
@@ -996,7 +1084,9 @@ As with ``, this element allows you to add listeners to events on
### <svelte:head>
-* ``
+```sv
+
+```
---
@@ -1011,7 +1101,9 @@ This element makes it possible to insert elements into `document.head`. During s
### <svelte:options>
-* ``
+```sv
+
+```
---
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 20c0ce98dc..75f156aee1 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -9,8 +9,12 @@ The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [co
#### `onMount`
-* `onMount(callback: () => void)`
-* `onMount(callback: () => () => void)`
+```js
+onMount(callback: () => void)
+```
+```js
+onMount(callback: () => () => void)
+```
---
@@ -48,7 +52,9 @@ If a function is returned from `onMount`, it will be called when the component i
#### `beforeUpdate`
-`beforeUpdate(callback: () => void)`
+```js
+beforeUpdate(callback: () => void)
+```
---
@@ -68,7 +74,9 @@ Schedules a callback to run immediately before the component is updated after an
#### `afterUpdate`
-`afterUpdate(callback: () => void)`
+```js
+afterUpdate(callback: () => void)
+```
---
@@ -86,7 +94,9 @@ Schedules a callback to run immediately after the component has been updated.
#### `onDestroy`
-`onDestroy(callback: () => void)`
+```js
+onDestroy(callback: () => void)
+```
---
@@ -106,7 +116,9 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
#### `tick`
-`promise: Promise = tick()`
+```js
+promise: Promise = tick()
+```
---
@@ -126,7 +138,9 @@ Returns a promise that resolves once any pending state changes have been applied
#### `setContext`
-`setContext(key: any, context: any)`
+```js
+setContext(key: any, context: any)
+```
---
@@ -144,7 +158,9 @@ Like lifecycle functions, this must be called during component initialisation.
#### `getContext`
-`context: any = getContext(key: any)`
+```js
+context: any = getContext(key: any)
+```
---
@@ -201,8 +217,12 @@ Stores have special significance inside Svelte components. Their values can be r
#### `writable`
-* `store = writable(value: any)`
-* `store = writable(value: any, (set: (value: any) => void) => () => void)`
+```js
+store = writable(value: any)
+```
+```js
+store = writable(value: any, (set: (value: any) => void) => () => void)
+```
---
@@ -245,7 +265,9 @@ unsubscribe(); // logs 'no more subscribers'
#### `readable`
-`store = readable(value: any, (set: (value: any) => void) => () => void)`
+```js
+store = readable(value: any, (set: (value: any) => void) => () => void)
+```
---
@@ -267,10 +289,18 @@ const time = readable(new Date(), set => {
#### `derived`
-* `store = derived(a, callback: (a: any) => any)`
-* `store = derived(a, callback: (a: any, set: (value: any) => void) => void)`
-* `store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)`
-* `store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)`
+```js
+store = derived(a, callback: (a: any) => any)
+```
+```js
+store = derived(a, callback: (a: any, set: (value: any) => void) => void)
+```
+```js
+store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)
+```
+```js
+store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)
+```
---
@@ -312,7 +342,9 @@ const delayed = derived([a, b], ([$a, $b], set) => {
#### `get`
-`value: any = get(store)`
+```js
+value: any = get(store)
+```
---
@@ -333,7 +365,9 @@ The `svelte/motion` module exports two functions, `tweened` and `spring`, for cr
#### `tweened`
-`store = tweened(value: any, options)`
+```js
+store = tweened(value: any, options)
+```
Tweened stores update their values over a fixed duration. The following options are available:
@@ -405,7 +439,9 @@ The `interpolator` option allows you to tween between *any* arbitrary values. It
#### `spring`
-`store = spring(value: any, options)`
+```js
+store = spring(value: any, options)
+```
A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index d1c09faaba..2ad23be234 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -260,6 +260,17 @@
font-size: var(--h3);
color: var(--second);
margin: 6.4rem 0 1.6rem 0;
+ padding-left: 0;
+ background: transparent;
+ line-height: 1;
+ }
+
+ .content :global(h4 > code) {
+ font-weight: 700;
+ font-size: var(--h4);
+ color: var(--second);
+ margin: 6.4rem 0 1.6rem 0;
+ padding-left: 0;
background: transparent;
line-height: 1;
padding: 0;
@@ -298,13 +309,19 @@
}
section > :global(.code-block)> :global(pre) {
+ display: inline-block;
background: transparent;
color: white;
- padding: 0;
- border: none;
+ padding: 0.4em 0.8em;
+ margin: 0;
+ border: 1px solid #81b9e0;
box-shadow: none;
}
+ section > :global(.code-block)> :global(pre.language-markup) {
+ background: #f7fcff;
+ }
+
/* max line-length ~60 chars */
section > :global(p) {
max-width: var(--linemax)
diff --git a/site/src/utils/markdown.js b/site/src/utils/markdown.js
index cbb4e3cbcc..ea0f7d0b2a 100644
--- a/site/src/utils/markdown.js
+++ b/site/src/utils/markdown.js
@@ -38,6 +38,7 @@ export function extract_metadata(line, lang) {
export const langs = {
bash: 'bash',
html: 'markup',
+ sv: 'markup',
js: 'javascript',
- css: 'css',
-};
\ No newline at end of file
+ css: 'css'
+};