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' +};