Merge pull request #2388 from mindrones/site-code-blocks-formatting

Site: code blocks formatting

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}`
+```sv
-* `{#if expression}...{:else if expression}...{/if}`
+{#if expression}...{/if}
-* `{#if expression}...{:else}...{/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}`
+```sv
-* `{#each expression as name, index}...{/each}`
+{#each expression as name}...{/each}
-* `{#each expression as name, index (key)}...{/each}`
+```
-* `{#each expression as name}...{:else}...{/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}`
+```sv
-* `{#await expression}...{:then name}...{/await}`
+{#await expression}...{:then name}...{:catch name}...{/await}
-* `{#await expression then 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}`
+```sv
-* `on:eventname|modifiers={handler}`
+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}`
+```sv
-* `bind:group={variable}`
+bind:property={variable}
-* `bind:this={dom_node}`
+```
+```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}`
+```sv
-* `bind:this={component_instance}`
+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}`
+```sv
-* `class:name`
+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`
+```sv
-* `use:action={parameters}`
+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`
+```sv
-* `transition:name={params}`
+transition:name
-* `transition:name|local`
+```
-* `transition:name|local={params}`
+```sv
-* `in:name`
+transition:name={params}
-* `in:name={params}`
+```
-* `in:name|local`
+```sv
-* `in:name|local={params}`
+transition:name|local
-* `out:name`
+```
-* `out:name={params}`
+```sv
-* `out:name|local`
+transition:name|local={params}
-* `out: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
 
-* `<slot><!-- optional fallback --></slot>`
+```sv
-* `<slot name="x"><!-- optional fallback --></slot>`
+<slot><!-- optional fallback --></slot>
-* `<slot prop={value}></slot>`
+```
+```sv
+<slot name="x"><!-- optional fallback --></slot>
+```
+```sv
+<slot prop={value}></slot>
+```
 
 ---
 
@@ -927,7 +1007,9 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 
 ### &lt;svelte:component&gt;
 
-* `<svelte:component this={expression}>`
+```sv
+<svelte:component this={expression}>
+```
 
 ---
 
@@ -942,8 +1024,12 @@ If `this` is falsy, no component is rendered.
 
 ### &lt;svelte:window&gt;
 
-* `<svelte:window on:event={handler}/>`
+```sv
-* `<svelte:window bind:prop={value}/>`
+<svelte:window on:event={handler}/>
+```
+```sv
+<svelte:window bind:prop={value}/>
+```
 
 ---
 
@@ -980,7 +1066,9 @@ All except `scrollX` and `scrollY` are readonly.
 
 ### &lt;svelte:body&gt;
 
-* `<svelte:body on:event={handler}/>`
+```sv
+<svelte:body on:event={handler}/>
+```
 
 ---
 
@@ -996,7 +1084,9 @@ As with `<svelte:window>`, this element allows you to add listeners to events on
 
 ### &lt;svelte:head&gt;
 
-* `<svelte:head>`
+```sv
+<svelte:head>
+```
 
 ---
 
@@ -1011,7 +1101,9 @@ This element makes it possible to insert elements into `document.head`. During s
 
 ### &lt;svelte:options&gt;
 
-* `<svelte:options option={value}>`
+```sv
+<svelte:options option={value}>
+```
 
 ---
 

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)`
+```js
-* `onMount(callback: () => () => void)`
+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)`
+```js
-* `store = writable(value: any, (set: (value: any) => void) => () => void)`
+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)`
+```js
-* `store = derived(a, callback: (a: any, set: (value: any) => void) => void)`
+store = derived(a, callback: (a: any) => any)
-* `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, 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:
 

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;
+		padding: 0.4em 0.8em;
-		border: none;
+		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)

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