diff --git a/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md b/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
index a6e07242ec..580507114f 100644
--- a/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
+++ b/apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md
@@ -66,18 +66,18 @@ You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelt
 
 In a Rollup project, that would look like this — note that we also need to install `@rollup/plugin-typescript` so that Rollup can handle `.ts` files:
 
-```diff
-+ import autoPreprocess from 'svelte-preprocess';
-+ import typescript from '@rollup/plugin-typescript';
+```js
++++import autoPreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';+++
 
 export default {
-  ...,
-  plugins: [
-    svelte({
-+       preprocess: autoPreprocess()
-    }),
-+   typescript({ sourceMap: !production })
-  ]
+	// ...,
+	plugins: [
+		svelte({
+			+++preprocess: autoPreprocess()+++
+		}),
+		+++typescript({ sourceMap: !production })+++
+	]
 }
 ```
 
diff --git a/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md b/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
index f7e53d122c..998b4a1cdb 100644
--- a/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
+++ b/apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md
@@ -28,7 +28,7 @@ const database = {
 	}
 };
 // ---cut---
-// src/routes/blog/[slug]/+page.server.ts
+/// file: src/routes/blog/[slug]/+page.server.ts
 import type { ServerLoadEvent } from '@sveltejs/kit';
 
 export async function load(event: ServerLoadEvent) {
@@ -42,16 +42,16 @@ This works, but we can do better. Notice that we accidentally wrote `event.param
 
 This is where our automatic type generation comes in. Every route directory has a hidden `$types.d.ts` file with route-specific types:
 
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { ServerLoadEvent } from '@sveltejs/kit';
-+import type { PageServerLoadEvent } from './$types';
+```js
+/// file: src/routes/blog/[slug]/+page.server.ts
+---import type { ServerLoadEvent } from '@sveltejs/kit';---
++++import type { PageServerLoadEvent } from './$types';+++
 
 export async function load(event: PageServerLoadEvent) {
-    return {
--        post: await database.getPost(event.params.post)
-+        post: await database.getPost(event.params.slug)
-    };
+	return {
+		---post: await database.getPost(event.params.post)---
+		+++post: await database.getPost(event.params.slug)+++
+	};
 }
 ```
 
@@ -60,7 +60,7 @@ This reveals our typo, as it now errors on the `params.post` property access. Be
 After we have loaded our data, we want to display it in our `+page.svelte`. The same type generation mechanism ensures that the type of `data` is correct:
 
 ```svelte
-<!-- src/routes/blog/[slug]/+page.svelte -->
+/// file: src/routes/blog/[slug]/+page.svelte
 <script lang="ts">
 	import type { PageData } from './$types';
 
@@ -78,7 +78,7 @@ When running the dev server or the build, types are auto-generated. Thanks to th
 
 ```ts
 // @errors: 2344 2694 2307
-// $types.d.ts
+/// file: $types.d.ts
 import type * as Kit from '@sveltejs/kit';
 
 // types inferred from the routing tree
@@ -100,7 +100,7 @@ export type PageData = Kit.ReturnType<
 
 We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no-one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
 
-```
+```tree
 // on disk:
 .svelte-kit/
 ├ types/
@@ -115,8 +115,9 @@ src/
 │ │ ├ [slug]/
 │ │ │ ├ +page.server.ts
 │ │ │ └ +page.svelte
+```
 
-
+```tree
 // what TypeScript sees:
 src/
 ├ routes/
@@ -131,24 +132,23 @@ src/
 
 Thanks to the automatic type generation we get advanced type safety. Wouldn't it be great though if we could just omit writing the types at all? As of today you can do exactly that:
 
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { PageServerLoadEvent } from './$types';
+```js
+/// file: src/routes/blog/[slug]/+page.server.ts
+---import type { PageServerLoadEvent } from './$types';---
 
--export async function load(event: PageServerLoadEvent) {
-+export async function load(event) {
-    return {
-        post: await database.getPost(event.params.post)
-    };
+export async function load(event---: PageServerLoadEvent---) {
+	return {
+		post: await database.getPost(event.params.post)
+	};
 }
 ```
 
-```diff
-<!-- src/routes/blog/[slug]/+page.svelte -->
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
 <script lang="ts">
--    import type { PageData } from './$types';
--    export let data: PageData;
-+    export let data;
+	---import type { PageData } from './$types';---
+	---export let data: PageData;---
+	+++export let data;+++
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/blog/2023-08-31-view-transitions.md b/apps/svelte.dev/content/blog/2023-08-31-view-transitions.md
index 1d934dd1f4..6e1fc58a10 100644
--- a/apps/svelte.dev/content/blog/2023-08-31-view-transitions.md
+++ b/apps/svelte.dev/content/blog/2023-08-31-view-transitions.md
@@ -14,7 +14,7 @@ However, until now, you couldn’t easily use this API in a SvelteKit app, since
 You can trigger a view transition by calling `document.startViewTransition` and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.
 
 ```js
-// @errors: 2339
+// @errors: 2339 2304
 const domUpdate = async () => {};
 // ---cut---
 document.startViewTransition(async () => {
@@ -162,7 +162,7 @@ Now, the header will not transition in and out on navigation, but the rest of th
 > [!DETAILS] Fixing the types
 > Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
 >
-> ```ts
+> ```dts
 > declare global {
 > 	// preserve any customizations you have here
 > 	namespace App {
diff --git a/apps/svelte.dev/content/blog/2023-09-20-runes.md b/apps/svelte.dev/content/blog/2023-09-20-runes.md
index 09da6b024c..b4e719895d 100644
--- a/apps/svelte.dev/content/blog/2023-09-20-runes.md
+++ b/apps/svelte.dev/content/blog/2023-09-20-runes.md
@@ -54,11 +54,11 @@ Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses
 
 For example, to declare a piece of reactive state, we can use the `$state` rune:
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
--	let count = 0;
-+	let count = $state(0);
+	---let count = 0;---
+	+++let count = $state(0);+++
 
 	function increment() {
 		count += 1;
@@ -94,24 +94,24 @@ export function createCounter() {
 
 Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
 /// file: App.svelte
-+	import { createCounter } from './counter.js';
-+
-+	const counter = createCounter();
--	let count = 0;
--
--	function increment() {
--		count += 1;
--	}
++++	import { createCounter } from './counter.js';
+
+	const counter = createCounter();+++
+---	let count = 0;
+
+	function increment() {
+		count += 1;
+	}---
 </script>
 
--<button on:click={increment}>
--	clicks: {count}
-+<button on:click={counter.increment}>
-+	clicks: {$counter}
+---<button on:click={increment}>
+	clicks: {count}---
++++<button on:click={counter.increment}>
+	clicks: {$counter}+++
 </button>
 ```
 
@@ -119,35 +119,34 @@ This works, but it's pretty weird! We've found that the store API can get rather
 
 With runes, things get much simpler:
 
-```diff
+```js
 /// file: counter.svelte.js
--import { writable } from 'svelte/store';
+---import { writable } from 'svelte/store';---
 
 export function createCounter() {
--	const { subscribe, update } = writable(0);
-+	let count = $state(0);
+	---const { subscribe, update } = writable(0);---
+	+++let count = $state(0);+++
 
 	return {
--		subscribe,
--		increment: () => update((n) => n + 1)
-+		get count() { return count },
-+		increment: () => count += 1
-   };
+		---subscribe,---
+		---increment: () => update((n) => n + 1)---
+		+++get count() { return count },+++
+		+++increment: () => count += 1+++
+	};
 }
 ```
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
--	import { createCounter } from './counter.js';
-+	import { createCounter } from './counter.svelte.js';
+	import { createCounter } from './counter+++.svelte+++.js';
 
 	const counter = createCounter();
 </script>
 
 <button on:click={counter.increment}>
--	clicks: {$counter}
-+	clicks: {counter.count}
+	---clicks: {$counter}---
+	+++clicks: {counter.count}+++
 </button>
 ```
 
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
index 46d8deec2f..4d1959e557 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md
@@ -110,26 +110,26 @@ export async function load() {
 
 Data returned from layout `load` functions is available to child `+layout.svelte` components and the `+page.svelte` component as well as the layout that it 'belongs' to.
 
-```diff
+```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
-+	import { page } from '$app/stores';
+	+++import { page } from '$app/stores';+++
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-+	// we can access `data.posts` because it's returned from
-+	// the parent layout `load` function
-+	$: index = data.posts.findIndex(post => post.slug === $page.params.slug);
-+	$: next = data.posts[index - 1];
++++	// we can access `data.posts` because it's returned from
+	// the parent layout `load` function
+	$: index = data.posts.findIndex(post => post.slug === $page.params.slug);
+	$: next = data.posts[index - 1];+++
 </script>
 
 <h1>{data.post.title}</h1>
 <div>{@html data.post.content}</div>
 
-+{#if next}
-+	<p>Next post: <a href="/blog/{next.slug}">{next.title}</a></p>
-+{/if}
++++{#if next}
+	<p>Next post: <a href="/blog/{next.slug}">{next.title}</a></p>
+{/if}+++
 ```
 
 > [!NOTE] If multiple `load` functions return data with the same key, the last one 'wins' — the result of a layout `load` returning `{ a: 1, b: 2 }` and a page `load` returning `{ b: 3, c: 4 }` would be `{ a: 1, b: 3, c: 4 }`.
@@ -381,16 +381,21 @@ In `+page.js` or `+layout.js` it will return data from parent `+layout.js` files
 
 Take care not to introduce waterfalls when using `await parent()`. Here, for example, `getData(params)` does not depend on the result of calling `parent()`, so we should call it first to avoid a delayed render.
 
-```diff
+```js
 /// file: +page.js
+// @filename: ambient.d.ts
+declare function getData(params: Record<string, string>): Promise<{ meta: any }>
+
+// @filename: index.js
+// ---cut---
 /** @type {import('./$types').PageLoad} */
 export async function load({ params, parent }) {
--	const parentData = await parent();
+	---const parentData = await parent();---
 	const data = await getData(params);
-+	const parentData = await parent();
+	+++const parentData = await parent();+++
 
 	return {
-		...data
+		...data,
 		meta: { ...parentData.meta, ...data.meta }
 	};
 }
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
index b5bb6ea5cf..ce23f7c43d 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md
@@ -54,17 +54,17 @@ We can also invoke the action from other pages (for example if there's a login w
 
 Instead of one `default` action, a page can have as many named actions as it needs:
 
-```diff
+```js
 /// file: src/routes/login/+page.server.js
 /** @type {import('./$types').Actions} */
 export const actions = {
--	default: async (event) => {
-+	login: async (event) => {
+---	default: async (event) => {---
++++	login: async (event) => {+++
 		// TODO log the user in
 	},
-+	register: async (event) => {
-+		// TODO register the user
-+	}
++++	register: async (event) => {
+		// TODO register the user
+	}+++
 };
 ```
 
@@ -82,10 +82,9 @@ To invoke a named action, add a query parameter with the name prefixed by a `/`
 
 As well as the `action` attribute, we can use the `formaction` attribute on a button to `POST` the same form data to a different action than the parent `<form>`:
 
-```diff
+```svelte
 /// file: src/routes/login/+page.svelte
--<form method="POST">
-+<form method="POST" action="?/login">
+<form method="POST" +++action="?/login"+++>
 	<label>
 		Email
 		<input name="email" type="email">
@@ -95,7 +94,7 @@ As well as the `action` attribute, we can use the `formaction` attribute on a bu
 		<input name="password" type="password">
 	</label>
 	<button>Log in</button>
-+	<button formaction="?/register">Register</button>
+	+++<button formaction="?/register">Register</button>+++
 </form>
 ```
 
@@ -106,8 +105,14 @@ As well as the `action` attribute, we can use the `formaction` attribute on a bu
 Each action receives a `RequestEvent` object, allowing you to read the data with `request.formData()`. After processing the request (for example, logging the user in by setting a cookie), the action can respond with data that will be available through the `form` property on the corresponding page and through `$page.form` app-wide until the next update.
 
 ```js
-// @errors: 2304
 /// file: src/routes/login/+page.server.js
+// @filename: ambient.d.ts
+declare module '$lib/server/db';
+
+// @filename: index.js
+// ---cut---
+import * as db from '$lib/server/db';
+
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ cookies }) {
 	const user = await db.getUserFromSession(cookies.get('sessionid'));
@@ -153,9 +158,15 @@ export const actions = {
 
 If the request couldn't be processed because of invalid data, you can return validation errors — along with the previously submitted form values — back to the user so that they can try again. The `fail` function lets you return an HTTP status code (typically 400 or 422, in the case of validation errors) along with the data. The status code is available through `$page.status` and the data through `form`:
 
-```diff
+```js
 /// file: src/routes/login/+page.server.js
-+import { fail } from '@sveltejs/kit';
+// @filename: ambient.d.ts
+declare module '$lib/server/db';
+
+// @filename: index.js
+// ---cut---
++++import { fail } from '@sveltejs/kit';+++
+import * as db from '$lib/server/db';
 
 /** @type {import('./$types').Actions} */
 export const actions = {
@@ -164,15 +175,15 @@ export const actions = {
 		const email = data.get('email');
 		const password = data.get('password');
 
-+		if (!email) {
-+			return fail(400, { email, missing: true });
-+		}
++++		if (!email) {
+			return fail(400, { email, missing: true });
+		}+++
 
 		const user = await db.getUser(email);
 
-+		if (!user || user.password !== hash(password)) {
-+			return fail(400, { email, incorrect: true });
-+		}
++++		if (!user || user.password !== db.hash(password)) {
+			return fail(400, { email, incorrect: true });
+		}+++
 
 		cookies.set('sessionid', await db.createSession(user), { path: '/' });
 
@@ -186,15 +197,14 @@ export const actions = {
 
 > [!NOTE] Note that as a precaution, we only return the email back to the page — not the password.
 
-```diff
+```svelte
 /// file: src/routes/login/+page.svelte
 <form method="POST" action="?/login">
-+	{#if form?.missing}<p class="error">The email field is required</p>{/if}
-+	{#if form?.incorrect}<p class="error">Invalid credentials!</p>{/if}
++++	{#if form?.missing}<p class="error">The email field is required</p>{/if}
+	{#if form?.incorrect}<p class="error">Invalid credentials!</p>{/if}+++
 	<label>
 		Email
--		<input name="email" type="email">
-+		<input name="email" type="email" value={form?.email ?? ''}>
+		<input name="email" type="email" +++value={form?.email ?? ''}+++>
 	</label>
 	<label>
 		Password
@@ -211,13 +221,20 @@ The returned data must be serializable as JSON. Beyond that, the structure is en
 
 Redirects (and errors) work exactly the same as in [`load`](load#redirects):
 
-```diff
+```js
+// @errors: 2345
 /// file: src/routes/login/+page.server.js
-+import { fail, redirect } from '@sveltejs/kit';
+// @filename: ambient.d.ts
+declare module '$lib/server/db';
+
+// @filename: index.js
+// ---cut---
+import { fail, +++redirect+++ } from '@sveltejs/kit';
+import * as db from '$lib/server/db';
 
 /** @type {import('./$types').Actions} */
 export const actions = {
-+	login: async ({ cookies, request, url }) => {
+	login: async ({ cookies, request, +++url+++ }) => {
 		const data = await request.formData();
 		const email = data.get('email');
 		const password = data.get('password');
@@ -227,15 +244,15 @@ export const actions = {
 			return fail(400, { email, missing: true });
 		}
 
-		if (user.password !== hash(password)) {
+		if (user.password !== db.hash(password)) {
 			return fail(400, { email, incorrect: true });
 		}
 
 		cookies.set('sessionid', await db.createSession(user), { path: '/' });
 
-+		if (url.searchParams.has('redirectTo')) {
-+			redirect(303, url.searchParams.get('redirectTo'));
-+		}
++++		if (url.searchParams.has('redirectTo')) {
+			redirect(303, url.searchParams.get('redirectTo'));
+		}+++
 
 		return { success: true };
 	},
@@ -317,16 +334,16 @@ In the preceding sections we built a `/login` action that [works without client-
 
 The easiest way to progressively enhance a form is to add the `use:enhance` action:
 
-```diff
+```svelte
 /// file: src/routes/login/+page.svelte
 <script>
-+	import { enhance } from '$app/forms';
+	+++import { enhance } from '$app/forms';+++
 
 	/** @type {import('./$types').ActionData} */
 	export let form;
 </script>
 
-+<form method="POST" use:enhance>
+<form method="POST" +++use:enhance+++>
 ```
 
 > [!NOTE] Yes, it's a little confusing that the `enhance` action and `<form action>` are both called 'action'. These docs are action-packed. Sorry.
@@ -366,10 +383,10 @@ You can use these functions to show and hide loading UI, and so on.
 
 If you return a callback, you may need to reproduce part of the default `use:enhance` behaviour, but without invalidating all data on a successful response. You can do so with `applyAction`:
 
-```diff
+```svelte
 /// file: src/routes/login/+page.svelte
 <script>
-+	import { enhance, applyAction } from '$app/forms';
+	import { enhance, +++applyAction+++ } from '$app/forms';
 
 	/** @type {import('./$types').ActionData} */
 	export let form;
@@ -378,14 +395,13 @@ If you return a callback, you may need to reproduce part of the default `use:enh
 <form
 	method="POST"
 	use:enhance={({ formElement, formData, action, cancel }) => {
-
 		return async ({ result }) => {
 			// `result` is an `ActionResult` object
-+			if (result.type === 'redirect') {
-+				goto(result.location);
-+			} else {
-+				await applyAction(result);
-+			}
++++			if (result.type === 'redirect') {
+				goto(result.location);
+			} else {
+				await applyAction(result);
+			}+++
 		};
 	}}
 >
@@ -445,13 +461,13 @@ Note that you need to `deserialize` the response before processing it further us
 
 If you have a `+server.js` alongside your `+page.server.js`, `fetch` requests will be routed there by default. To `POST` to an action in `+page.server.js` instead, use the custom `x-sveltekit-action` header:
 
-```diff
+```js
 const response = await fetch(this.action, {
 	method: 'POST',
 	body: data,
-+	headers: {
-+		'x-sveltekit-action': 'true'
-+	}
++++	headers: {
+		'x-sveltekit-action': 'true'
+	}+++
 });
 ```
 
@@ -460,7 +476,7 @@ const response = await fetch(this.action, {
 Form actions are the preferred way to send data to the server, since they can be progressively enhanced, but you can also use [`+server.js`](routing#server) files to expose (for example) a JSON API. Here's how such an interaction could look like:
 
 ```svelte
-<!--- file: send-message/+page.svelte --->
+<!--- file: src/routes/send-message/+page.svelte --->
 <script>
 	function rerun() {
 		fetch('/api/ci', {
@@ -474,8 +490,7 @@ Form actions are the preferred way to send data to the server, since they can be
 
 ```js
 // @errors: 2355 1360 2322
-/// file: api/ci/+server.js
-
+/// file: src/routes/api/ci/+server.js
 /** @type {import('./$types').RequestHandler} */
 export function POST() {
 	// do something
diff --git a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
index a09c5b1879..0a955e0869 100644
--- a/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
+++ b/apps/svelte.dev/content/docs/kit/20-core-concepts/50-state-management.md
@@ -64,14 +64,15 @@ export async function load({ fetch }) {
 
 As with the previous example, this puts one user's information in a place that is shared by _all_ users. Instead, just return the data...
 
-```diff
+```js
 /// file: +page.js
+/** @type {import('./$types').PageServerLoad} */
 export async function load({ fetch }) {
 	const response = await fetch('/api/user');
 
-+	return {
-+		user: await response.json()
-+	};
++++	return {
+		user: await response.json()
+	};+++
 }
 ```
 
@@ -144,14 +145,14 @@ When you navigate around your application, SvelteKit reuses existing layout and
 
 Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):
 
-```diff
+```svelte
 /// file: src/routes/blog/[slug]/+page.svelte
 <script>
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-+	$: wordCount = data.content.split(' ').length;
-+	$: estimatedReadingTime = wordCount / 250;
++++	$: wordCount = data.content.split(' ').length;
+	$: estimatedReadingTime = wordCount / 250;+++
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
index 4cf211adbf..b701f711d8 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/10-building-your-app.md
@@ -12,13 +12,13 @@ Secondly, an _adapter_ takes this production build and tunes it for your target
 
 SvelteKit will load your `+page/layout(.server).js` files (and all files they import) for analysis during the build. Any code that should _not_ be executed at this stage must check that `building` from [`$app/environment`]($app-environment) is `false`:
 
-```diff
-+import { building } from '$app/environment';
+```js
++++import { building } from '$app/environment';+++
 import { setupMyDatabase } from '$lib/server/database';
 
-+if (!building) {
++++if (!building) {+++
 	setupMyDatabase();
-+}
++++}+++
 
 export function load() {
 	// ...
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
index fe5aba9e68..2a4fe7a038 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md
@@ -50,16 +50,14 @@ npm install dotenv
 
 ...and invoke it before running the built app:
 
-```diff
-- node build
-+ node -r dotenv/config build
+```bash
+node +++-r dotenv/config+++ build
 ```
 
 If you use Node.js v20.6+, you can use the [`--env-file`](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs) flag instead:
 
-```diff
-- node build
-+ node --env-file=.env build
+```bash
+node +++--env-file=.env+++ build
 ```
 
 ### `PORT`, `HOST` and `SOCKET_PATH`
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
index d92575aed1..f6c700b251 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md
@@ -48,12 +48,12 @@ Some platforms have zero-config support (more to come in future):
 
 On these platforms, you should omit the adapter options so that `adapter-static` can provide the optimal configuration:
 
-```diff
+```js
+// @errors: 2304
 /// file: svelte.config.js
 export default {
 	kit: {
--		adapter: adapter({...})
-+		adapter: adapter()
+		adapter: adapter(---{...}---)
 	}
 };
 ```
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
index 303689e660..f8adaa8acf 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md
@@ -84,15 +84,15 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```diff
+```dts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
 		interface Platform {
-+			env?: {
-+				YOUR_KV_NAMESPACE: KVNamespace;
-+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
-+			};
++++			env?: {
+				YOUR_KV_NAMESPACE: KVNamespace;
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};+++
 		}
 	}
 }
diff --git a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
index ec936f3933..b6d2af071f 100644
--- a/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
+++ b/apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md
@@ -105,15 +105,15 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```diff
+```dts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
 		interface Platform {
-+			env?: {
-+				YOUR_KV_NAMESPACE: KVNamespace;
-+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
-+			};
++++			env?: {
+				YOUR_KV_NAMESPACE: KVNamespace;
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};+++
 		}
 	}
 }
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
index 0ba9d2f6a7..064631457c 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/10-advanced-routing.md
@@ -28,7 +28,7 @@ If the number of route segments is unknown, you can use rest syntax — for exam
 
 Rest parameters also allow you to render custom 404s. Given these routes...
 
-```
+```tree
 src/routes/
 ├ marx-brothers/
 │ ├ chico/
@@ -40,10 +40,10 @@ src/routes/
 
 ...the `marx-brothers/+error.svelte` file will _not_ be rendered if you visit `/marx-brothers/karl`, because no route was matched. If you want to render the nested error page, you should create a route that matches any `/marx-brothers/*` request, and return a 404 from it:
 
-```diff
+```tree
 src/routes/
 ├ marx-brothers/
-+| ├ [...path]/
++++| ├ [...path]/+++
 │ ├ chico/
 │ ├ harpo/
 │ ├ groucho/
@@ -87,9 +87,8 @@ export function match(param) {
 
 ...and augmenting your routes:
 
-```diff
--src/routes/fruits/[page]
-+src/routes/fruits/[page=fruit]
+```
+src/routes/fruits/[page+++=fruit+++]
 ```
 
 If the pathname doesn't match, SvelteKit will try to match other routes (using the sort order specified below), before eventually returning a 404.
@@ -176,13 +175,13 @@ By default, the _layout hierarchy_ mirrors the _route hierarchy_. In some cases,
 
 Perhaps you have some routes that are 'app' routes that should have one layout (e.g. `/dashboard` or `/item`), and others that are 'marketing' routes that should have a different layout (`/about` or `/testimonials`). We can group these routes with a directory whose name is wrapped in parentheses — unlike normal directories, `(app)` and `(marketing)` do not affect the URL pathname of the routes inside them:
 
-```diff
+```tree
 src/routes/
-+│ (app)/
++++│ (app)/+++
 │ ├ dashboard/
 │ ├ item/
 │ └ +layout.svelte
-+│ (marketing)/
++++│ (marketing)/+++
 │ ├ about/
 │ ├ testimonials/
 │ └ +layout.svelte
@@ -202,13 +201,13 @@ In the example above, the `/admin` route does not inherit either the `(app)` or
 
 Pages can break out of the current layout hierarchy on a route-by-route basis. Suppose we have an `/item/[id]/embed` route inside the `(app)` group from the previous example:
 
-```diff
+```tree
 src/routes/
 ├ (app)/
 │ ├ item/
 │ │ ├ [id]/
 │ │ │ ├ embed/
-+│ │ │ │ └ +page.svelte
++++│ │ │ │ └ +page.svelte+++
 │ │ │ └ +layout.svelte
 │ │ └ +layout.svelte
 │ └ +layout.svelte
@@ -222,13 +221,13 @@ Ordinarily, this would inherit the root layout, the `(app)` layout, the `item` l
 - `+page@(app).svelte` - inherits from `src/routes/(app)/+layout.svelte`
 - `+page@.svelte` - inherits from `src/routes/+layout.svelte`
 
-```diff
+```tree
 src/routes/
 ├ (app)/
 │ ├ item/
 │ │ ├ [id]/
 │ │ │ ├ embed/
-+│ │ │ │ └ +page@(app).svelte
++++│ │ │ │ └ +page@(app).svelte+++
 │ │ │ └ +layout.svelte
 │ │ └ +layout.svelte
 │ └ +layout.svelte
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
index 4ec8fca2f1..75f39a4716 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md
@@ -53,18 +53,32 @@ This throws an exception that SvelteKit catches, causing it to set the response
 
 You can add extra properties to the error object if needed...
 
-```diff
+```js
+import { error } from '@sveltejs/kit';
+
+declare global {
+	namespace App {
+		interface Error {
+			message: string;
+			code: string;
+		}
+	}
+}
+
+// ---cut---
 error(404, {
 	message: 'Not found',
-+	code: 'NOT_FOUND'
+	+++code: 'NOT_FOUND'+++
 });
 ```
 
 ...otherwise, for convenience, you can pass a string as the second argument:
 
-```diff
--error(404, { message: 'Not found' });
-+error(404, 'Not found');
+```js
+import { error } from '@sveltejs/kit';
+// ---cut---
+---error(404, { message: 'Not found' });---
++++error(404, 'Not found');+++
 ```
 
 > [!NOTE] [In SvelteKit 1.x](migrating-to-sveltekit-2#redirect-and-error-are-no-longer-thrown-by-you) you had to `throw` the `error` yourself
@@ -112,13 +126,13 @@ The exception is when the error occurs inside the root `+layout.js` or `+layout.
 
 If you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'):
 
-```diff
+```dts
 /// file: src/app.d.ts
 declare global {
 	namespace App {
 		interface Error {
-+			code: string;
-+			id: string;
++++			code: string;
+			id: string;+++
 		}
 	}
 }
diff --git a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
index 82978d0a7f..9d093d8008 100644
--- a/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
+++ b/apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
@@ -188,27 +188,27 @@ Ensure that you add [aliases](configuration#alias) via `svelte.config.js` (not `
 
 You should think carefully about whether or not the changes you make to your package are a bug fix, a new feature, or a breaking change, and update the package version accordingly. Note that if you remove any paths from `exports` or any `export` conditions inside them from your existing library, that should be regarded as a breaking change.
 
-```diff
+```json
 {
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 // changing `svelte` to `default` is a breaking change:
--			"svelte": "./dist/index.js"
-+			"default": "./dist/index.js"
+---			"svelte": "./dist/index.js"---
++++			"default": "./dist/index.js"+++
 		},
 // removing this is a breaking change:
--		"./foo": {
--			"types": "./dist/foo.d.ts",
--			"svelte": "./dist/foo.js",
--			"default": "./dist/foo.js"
--		},
+---		"./foo": {
+			"types": "./dist/foo.d.ts",
+			"svelte": "./dist/foo.js",
+			"default": "./dist/foo.js"
+		},---
 // adding this is ok:
-+		"./bar": {
-+			"types": "./dist/bar.d.ts",
-+			"svelte": "./dist/bar.js",
-+			"default": "./dist/bar.js"
-+		}
++++		"./bar": {
+			"types": "./dist/bar.d.ts",
+			"svelte": "./dist/bar.js",
+			"default": "./dist/bar.js"
+		}+++
 	}
 }
 ```
@@ -235,9 +235,9 @@ npm publish
 
 All relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means that for a file like `src/lib/something/index.js`, you must include the filename with the extension:
 
-```diff
--import { something } from './something';
-+import { something } from './something/index.js';
+```js
+// @errors: 2307
+import { something } from './something+++/index.js+++';
 ```
 
 If you are using TypeScript, you need to import `.ts` files the same way, but using a `.js` file ending, _not_ a `.ts` file ending. (This is a TypeScript design decision outside our control.) Setting `"moduleResolution": "NodeNext"` in your `tsconfig.json` or `jsconfig.json` will help you with this.
diff --git a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
index c680b8f8c5..fe56629fb0 100644
--- a/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
+++ b/apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md
@@ -40,14 +40,14 @@ npm install --save-dev @sveltejs/enhanced-img
 
 Adjust `vite.config.js`:
 
-```diff
+```js
 import { sveltekit } from '@sveltejs/kit/vite';
-+import { enhancedImages } from '@sveltejs/enhanced-img';
++++import { enhancedImages } from '@sveltejs/enhanced-img';+++
 import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [
-+		enhancedImages(),
+		+++enhancedImages(),+++
 		sveltekit()
 	]
 });
diff --git a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
index ccb4d6763d..4ad0d10c12 100644
--- a/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
+++ b/apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md
@@ -10,12 +10,12 @@ We highly recommend upgrading to the most recent 1.x version before upgrading to
 
 Previously, you had to `throw` the values returned from `error(...)` and `redirect(...)` yourself. In SvelteKit 2 this is no longer the case — calling the functions is sufficient.
 
-```diff
+```js
 import { error } from '@sveltejs/kit'
 
-...
-- throw error(500, 'something went wrong');
-+ error(500, 'something went wrong');
+// ...
+---throw error(500, 'something went wrong');---
++++error(500, 'something went wrong');+++
 ```
 
 `svelte-migrate` will do these changes automatically for you.
@@ -28,11 +28,11 @@ When receiving a `Set-Cookie` header that doesn't specify a `path`, browsers wil
 
 As of SvelteKit 2.0, you need to set a `path` when calling `cookies.set(...)`, `cookies.delete(...)` or `cookies.serialize(...)` so that there's no ambiguity. Most of the time, you probably want to use `path: '/'`, but you can set it to whatever you like, including relative paths — `''` means 'the current path', `'.'` means 'the current directory'.
 
-```diff
+```js
+/** @type {import('./$types').PageServerLoad} */
 export function load({ cookies }) {
--    cookies.set(name, value);
-+    cookies.set(name, value, { path: '/' });
-    return { response }
+	cookies.set(name, value, +++{ path: '/' }+++);
+	return { response }
 }
 ```
 
@@ -44,25 +44,37 @@ In SvelteKit version 1, if the top-level properties of the object returned from
 
 As of version 2, SvelteKit no longer differentiates between top-level and non-top-level promises. To get back the blocking behavior, use `await` (with `Promise.all` to prevent waterfalls, where appropriate):
 
-```diff
+```js
+// @filename: ambient.d.ts
+declare const url: string;
+
+// @filename: index.js
+// ---cut---
 // If you have a single promise
-export function load({ fetch }) {
--    const response = fetch(...).then(r => r.json());
-+    const response = await fetch(...).then(r => r.json());
-    return { response }
+/** @type {import('./$types').PageServerLoad} */
+export +++async+++ function load({ fetch }) {
+	const response = +++await+++ fetch(url).then(r => r.json());
+	return { response }
 }
 ```
 
-```diff
+```js
+// @filename: ambient.d.ts
+declare const url1: string;
+declare const url2: string;
+
+// @filename: index.js
+// ---cut---
 // If you have multiple promises
-export function load({ fetch }) {
--    const a = fetch(...).then(r => r.json());
--    const b = fetch(...).then(r => r.json());
-+    const [a, b] = await Promise.all([
-+      fetch(...).then(r => r.json()),
-+      fetch(...).then(r => r.json()),
-+    ]);
-    return { a, b };
+/** @type {import('./$types').PageServerLoad} */
+export +++async+++ function load({ fetch }) {
+---	const a = fetch(url1).then(r => r.json());---
+---	const b = fetch(url2).then(r => r.json());---
++++	const [a, b] = await Promise.all([
+	  fetch(url1).then(r => r.json()),
+	  fetch(url2).then(r => r.json()),
+	]);+++
+	return { a, b };
 }
 ```
 
@@ -94,13 +106,13 @@ SvelteKit 1 included a function called `resolvePath` which allows you to resolve
 
 As such, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.
 
-```diff
--import { resolvePath } from '@sveltejs/kit';
--import { base } from '$app/paths';
-+import { resolveRoute } from '$app/paths';
+```js
+---import { resolvePath } from '@sveltejs/kit';
+import { base } from '$app/paths';---
++++import { resolveRoute } from '$app/paths';+++
 
--const path = base + resolvePath('/blog/[slug]', { slug });
-+const path = resolveRoute('/blog/[slug]', { slug });
+---const path = base + resolvePath('/blog/[slug]', { slug });---
++++const path = resolveRoute('/blog/[slug]', { slug });+++
 ```
 
 `svelte-migrate` will do the method replacement for you, though if you later prepend the result with `base`, you need to remove that yourself.
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
index 17e095d096..eebb6debe9 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
@@ -916,7 +916,7 @@ base?: '' | `/${string}`;
 
 </div>
 
-A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/$app-paths#base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
+A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
 
 </div>
 </div>
@@ -1232,7 +1232,7 @@ Not all navigations will result in an error though, for example if the JavaScrip
 </script>
 ```
 
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://kit.svelte.dev/docs/$app-stores#updated) store to `true` when it detects one.
+If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) store to `true` when it detects one.
 
 <div class="ts-block-property-children"><div class="ts-block-property">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
index 7848984863..a5da3e4d3c 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md
@@ -764,7 +764,7 @@ base?: '' | `/${string}`;
 
 </div>
 
-A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/$app-paths#base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
+A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
 
 </div>
 </div>
@@ -1097,7 +1097,7 @@ Not all navigations will result in an error though, for example if the JavaScrip
 </script>
 ```
 
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://kit.svelte.dev/docs/$app-stores#updated) store to `true` when it detects one.
+If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) store to `true` when it detects one.
 
 <div class="ts-block-property-children">
 
diff --git a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
index c65720ed6f..a556cd5805 100644
--- a/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
+++ b/apps/svelte.dev/content/docs/kit/98-reference/54-types.md
@@ -187,7 +187,7 @@ interface Locals {}
 
 ## PageData
 
-Defines the common shape of the [$page.data store](https://kit.svelte.dev/docs/$app-stores#page) - that is, the data that is shared between all pages.
+Defines the common shape of the [$page.data store](https://kit.svelte.dev/docs/modules#$app-stores-page) - that is, the data that is shared between all pages.
 The `Load` and `ServerLoad` functions in `./$types` will be narrowed accordingly.
 Use optional properties for data that is only present on specific pages. Do not add an index signature (`[key: string]: any`).
 
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/02-context.md b/apps/svelte.dev/content/docs/svelte/04-runtime/02-context.md
index 0833d3d9bc..6314a32740 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/02-context.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/02-context.md
@@ -10,8 +10,7 @@ Most state is component-level state that lives as long as its component lives. T
 The easiest way to do that is to create global state and just import that.
 
 ```ts
-/// file: state.svelte.ts
-
+/// file: state.svelte.js
 export const myGlobalState = $state({
 	user: {
 		/* ... */
diff --git a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
index 90d54d3f5f..2c60c7cad6 100644
--- a/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
+++ b/apps/svelte.dev/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
@@ -123,23 +123,21 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 - [Before](/#H4sIAAAAAAAAE31WXa_bNgz9K6yL1QmWOLlrC-w6H8MeBgwY9tY9NfdBtmlbiywZkpyPBfnvo2zLcZK28AWuRPGI5OGhkEuQc4EmiL9eAskqDOLg97oOZoE9125jDigs0t6oRqfOsjap5rXd7uTO8qpW2sIFEsyVxn_qjFmcAcstar-xPN3DFXKtKgi768IVgQku0ELj3Lgs_kZjWIEGNpAzYXDlHWyJFZI1zJjeh4O5uvl_DY8oUkVeVoFuJKYls-_CGYS25Aboj0EtWNqel0wWoBoLTGZgmdgDS9zW4Uz4NsrswPHoyutN4xInkylstnBxdmIhh8m7xzqmoNE2Wq46n1RJQzEbq4g-JQSl7e-HDx-GdaTy3KD9E3lRWvj5Zu9QX1QN20dj7zyHz8s-1S6lW7Cpz3RnXTcm04hIlfdFuO8p2mQ5-3a06cqjrn559bF_2NHOnRZ5I1PLlXQNyQT-hedMHeUEDyjtdMxsa4n2eIbNhlTwhyRthaOKOmYtniwF6pwt0wXa6MBEg0OibZec27gz_dk3UrZ6hB2LLYoiv521Yd8Gt-foTrfhiCDP0lC9VUUhcDLU49Xe_9943cNvEArHfAjxeBTovvXiNpFynfEDpIIZs9kFbg52QbeNHWZzebz32s7xHco3nJAJl1nshmhz8dYOQJDyZetnbb2gTWe-vEeWlrfpZMavr56ldb29eNt6UXvgwgFbp_WC0tl2RK25rGk6lYz3nUI2lzvBXGHhPZPGWmKUXFNBKqdaW259wl_aHbiqoVIZdpE60Nax6IOujT0LbFFxIVTCxCRR2XloUcYNvSbnGHKBp763jHoj59xiZWJI0Wm0P_m3MSS985xkasn-cFq20xTDy3J5KFcjgUTD69BHdcHIjz431z28IqlxGcPSfdFnrGDZn6gD6lyo45zyHAD-btczf-98nhQxHEvKfeUtOVkSejD3q-9X7JbzjGtsdUxlKdFU8qGsT78uaw848syWMXz85Waq2Gnem4mAn3prweq4q6Y3JEpnqMmnPoFRgmd3ySW0LLRqSKlwYHriCvJvUs2yjMaaoA-XzTXLeGMe45zmhv_XAno3Mj0xF7USuqNvnE9H343QHlq-eAgxpbTPNR9yzUkgLjwSR0NK4wKoxy-jDg-9vy8sUSToakzW-9fX13Em9Q8T6Z26uZhBN36XUYo5q7ggLXBZoub2Ofv7g6GCZfTxe034NCjiudXj7Omla0eTfo7QBPOcYxbE7qG-vl3_B1G-_i_JCAAA)
 - [After](/#H4sIAAAAAAAAE31WXa-jNhD9K7PsdknUQJLurtRLPqo-VKrU1327uQ8GBnBjbGSb5KZR_nvHgMlXtyIS9njO-MyZGZRzUHCBJkhez4FkNQZJ8HvTBLPAnhq3MQcUFmlvVKszZ1mbTPPGbndyZ3ndKG3hDJZne7hAoVUNYY8JV-RBPgIt2AprhA18MpZZnIQ50_twuvLHNRrDSjRXj9fwiCJTBLIKdCsxq5j9EM4gtBU3QD8GjWBZd14xWYJqLTCZg2ViDyx1W4cz4dv0hsiB49FRHkyfsCgws3GjcTKZwmYLZ2feWc9o1W8zJQ2Fb62i5JUQRNRHgs-fx3WsisKg_RN5WVn4-WrvUd9VA9tH4-AcwbfFQIpkLWByvWzqSe2sk3kyjUlOec_XPU-3TRaz_75tuvKoi19e3OvipSpamVmupJM2F_gXnnJ1lBM8oLQjHceys8R7PMFms4HwD2lRhzeEe-EsvluSrHe2TJdo4wMTLY48XKwPzm0KGm2r5ajFtRYU4TWOY7-ddWHfxhDP0QkQhnf5PWRnVVkKnIx8fZsOb5dR16nwG4TCCRdCMphWQ7z1_DoOcp3zA2SCGbPZBa5jd0G_TRxmc36Me-mG6A7l60XIlMs8ce2-OXtrDyBItdz6qVjPadObzx-RZdV1nJjx64tXad1sz962njceOHfAzmk9JzrbXqg1lw3NkZL7vgE257t-uMDcO6attSSokpmgFqVMO2U93e_dDlzOUKsc-3t6zNZp6K9cG3sS2KGSUqiUiUmq8tNYoJwbmvpTAoXA96GyjCojI26xNglk6DpwOPm7NdRYp4ia0JL94bTqRiGB5WJxqFY37RGPoz3c6i4jP3rcUA7wmhqNywQW7om_YQ2L4UQdUBdCHSPiOQJ8bFcxHzeK0jKBY0XcV95SkCWlD9t-9eOM3TLKucauiyktJdpaPqT19ddF4wFHntsqgS-_XE01e48GMwnw02AtWZP02QyGVOkcNfk072CU4PkduZSWpVYt9SkcmJ64hPwHpWF5ziVls3wIFmmW89Y83vMeGf5PBxjcyPSkXNy10J18t3x6-a6CDtBq6SGklNKeazFyLahB3PVIGo2UbhOgGi9vKjzW_j6xVFFD17difXx5ebll0vwvkcGpn4sZ9MN3vqFYsJoL6gUuK9TcPrO_PxgzWMRfflSEr2NHPJf6lj1957rRpH8CNMG84JgHidUtXt4u_wK21LXERAgAAA==)
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 <script>
--	import { beforeUpdate, afterUpdate, tick } from 'svelte';
-+	import { tick } from 'svelte';
+	import { ---beforeUpdate, afterUpdate,--- tick } from 'svelte';
 
--	let updatingMessages = false;
--	let theme = 'dark';
--	let messages = [];
-+	let theme = $state('dark');
-+	let messages = $state([]);
+	---let updatingMessages = false;---
+	let theme = +++$state('dark')+++;
+	let messages = +++$state([])+++;
 
 	let viewport;
 
--	beforeUpdate(() => {
-+	$effect.pre(() => {
--		if (!updatingMessages) return;
-+		messages;
+	---beforeUpdate(() => {---
+	+++$effect.pre(() => {+++
+		---if (!updatingMessages) return;---
+		+++messages;+++
 		const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;
 
 		if (autoscroll) {
@@ -148,7 +146,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 			});
 		}
 
--		updatingMessages = false;
+		---updatingMessages = false;---
 	});
 
 	function handleKeydown(event) {
@@ -156,7 +154,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 			const text = event.target.value;
 			if (!text) return;
 
--			updatingMessages = true;
+			---updatingMessages = true;---
 			messages = [...messages, text];
 			event.target.value = '';
 		}
@@ -174,12 +172,8 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 		{/each}
 	</div>
 
--	<input on:keydown={handleKeydown} />
-+	<input onkeydown={handleKeydown} />
+	<input +++onkeydown+++={handleKeydown} />
 
--	<button on:click={toggle}>
-+	<button onclick={toggle}>
-		Toggle dark mode
-	</button>
+	<button +++onclick+++={toggle}> Toggle dark mode </button>
 </div>
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/05-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/05-misc/02-testing.md
index e159b3818b..7ed110dc80 100644
--- a/apps/svelte.dev/content/docs/svelte/05-misc/02-testing.md
+++ b/apps/svelte.dev/content/docs/svelte/05-misc/02-testing.md
@@ -16,10 +16,10 @@ npm install -D vitest
 
 Then adjust your `vite.config.js`:
 
-```diff
+<!-- prettier-ignore -->
+```js
 /// file: vite.config.js
-- import { defineConfig } from 'vite';
-+ import { defineConfig } from 'vitest/config';
+import { defineConfig } from +++'vitest/config'+++;
 
 export default defineConfig({ /* ... */ })
 ```
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
index e40e062520..e2ac86be2f 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-warnings.md
@@ -774,24 +774,27 @@ In some cases `<object.property>` syntax can be used as a replacement; a lowerca
 
 For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 {#each items as item}
--	<svelte:component this={item.condition ? Y : Z} />
-+	{@const Component = item.condition ? Y : Z}
-+	<Component />
+	---<svelte:component this={item.condition ? Y : Z} />---
+	+++{@const Component = item.condition ? Y : Z}+++
+	+++<Component />+++
 {/each}
 ```
 
 A derived value may be used in other contexts:
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 <script>
-	...
+	// ...
 	let condition = $state(false);
-+	const Component = $derived(condition ? Y : Z);
+	+++const Component = $derived(condition ? Y : Z);+++
 </script>
-- <svelte:component this={condition ? Y : Z} />
-+ <Component />
+
+---<svelte:component this={condition ? Y : Z} />---
++++<Component />+++
 ```
 
 ### svelte_element_invalid_this
diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
index 51d1d8d757..bd2bddc791 100644
--- a/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
+++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-warnings.md
@@ -794,24 +794,27 @@ In some cases `<object.property>` syntax can be used as a replacement; a lowerca
 
 For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 {#each items as item}
--	<svelte:component this={item.condition ? Y : Z} />
-+	{@const Component = item.condition ? Y : Z}
-+	<Component />
+	---<svelte:component this={item.condition ? Y : Z} />---
+	+++{@const Component = item.condition ? Y : Z}+++
+	+++<Component />+++
 {/each}
 ```
 
 A derived value may be used in other contexts:
 
-```diff
+<!-- prettier-ignore -->
+```svelte
 <script>
-	...
+	// ...
 	let condition = $state(false);
-+	const Component = $derived(condition ? Y : Z);
+	+++const Component = $derived(condition ? Y : Z);+++
 </script>
-- <svelte:component this={condition ? Y : Z} />
-+ <Component />
+
+---<svelte:component this={condition ? Y : Z} />---
++++<Component />+++
 ```
 
 ### svelte_element_invalid_this
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
index 2ed8817e83..0bb89f7c00 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/index.md
@@ -10,15 +10,15 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
 
 > Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files:
 >
-> ```diff
+> ```tree
 > src/routes/
 > ├ categories/
 > │ ├ animal/
 > │ ├ mineral/
 > │ ├ vegetable/
-> +│ ├ [...catchall]/
-> +│ │ ├ +error.svelte
-> +│ │ └ +page.server.js
+> +++│ ├ [...catchall]/
+> │ │ ├ +error.svelte
+> │ │ └ +page.server.js+++
 > ```
 >
 > Inside the `+page.server.js` file, `error(404)` inside `load`.
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
index afb46bea3e..950b6db98c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/content.server.ts
@@ -107,7 +107,6 @@ const languages = {
 	svelte: 'svelte',
 	js: 'javascript',
 	css: 'css',
-	diff: 'diff',
 	ts: 'typescript',
 	'': ''
 };
@@ -135,16 +134,6 @@ const default_renderer: Partial<Renderer> = {
 				options[key] = value;
 				return '';
 			})
-			.replace(/^([\-\+])?((?:    )+)/gm, (match, prefix = '', spaces) => {
-				if (prefix && lang !== 'diff') return match;
-
-				// for no good reason at all, marked replaces tabs with spaces
-				let tabs = '';
-				for (let i = 0; i < spaces.length; i += 4) {
-					tabs += '\t';
-				}
-				return prefix + tabs;
-			})
 			.replace(/(\+\+\+|---|:::)/g, (_, delimiter: keyof typeof delimiter_substitutes) => {
 				return delimiter_substitutes[delimiter];
 			})
@@ -158,37 +147,13 @@ const default_renderer: Partial<Renderer> = {
 
 		html += '</div>';
 
-		if (lang === 'diff') {
-			const lines = source.split('\n').map((content) => {
-				let type = null;
-				if (/^[\+\-]/.test(content)) {
-					type = content[0] === '+' ? 'inserted' : 'deleted';
-					content = content.slice(1);
-				}
-
-				return {
-					type,
-					content: escape_html(content)
-				};
-			});
-
-			html += `<pre class="language-diff"><code>${lines
-				.map((line) => {
-					if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
-					return line.content + '\n';
-				})
-				.join('')}</code></pre>`;
-		} else {
-			const plang = languages[lang as keyof typeof languages];
-			const highlighted = plang
-				? // TODO use shiki here rather than Prism?
-					PrismJS.highlight(source, PrismJS.languages[plang], lang)
-				: escape_html(source);
-
-			html += `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
-		}
+		const plang = languages[lang as keyof typeof languages];
+		const highlighted = plang
+			? // TODO use shiki here rather than Prism?
+				PrismJS.highlight(source, PrismJS.languages[plang], lang)
+			: escape_html(source);
 
-		html += '</div>';
+		html += `<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
 
 		return html
 			.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index c42752c328..3b88e41f35 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -300,8 +300,23 @@
 					border-left: 5px solid var(--sk-theme-2);
 				}
 
-				&.language-diff code {
-					color: var(--sk-code-diff-base);
+				.highlight {
+					--color: rgba(220, 220, 0, 0.2);
+					background: var(--color);
+					outline: 2px solid var(--color);
+					border-radius: 2px;
+
+					&.add {
+						--color: rgba(0, 255, 0, 0.18);
+					}
+
+					&.remove {
+						--color: rgba(255, 0, 0, 0.1);
+
+						:root.dark & {
+							--color: rgba(255, 0, 0, 0.27);
+						}
+					}
 				}
 			}
 		}
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index c166e3d295..2ec91cc8d5 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -7,7 +7,6 @@ import * as prettier from 'prettier';
 import { codeToHtml, createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
-import type { Modules } from './index';
 import { fileURLToPath } from 'node:url';
 
 interface SnippetOptions {
@@ -201,9 +200,24 @@ export async function render_content_markdown(
 			if (token.type === 'code') {
 				if (snippets.get(token.text)) return;
 
+				if (token.lang === 'diff') {
+					throw new Error('Use +++ and --- annotations instead of diff blocks');
+				}
+
 				let { source, options } = parse_options(token.text, token.lang);
 				source = adjust_tab_indentation(source, token.lang);
 
+				const match = /((?:[\s\S]+)\/\/ ---cut---\n)?([\s\S]+)/.exec(source)!;
+
+				const prelude = match[1];
+
+				source = match[2].replace(
+					/(\+\+\+|---|:::)/g,
+					(_, delimiter: keyof typeof delimiter_substitutes) => {
+						return delimiter_substitutes[delimiter];
+					}
+				);
+
 				const converted =
 					token.lang === 'js' || token.lang === 'svelte'
 						? await generate_ts_from_js(source, token.lang, options)
@@ -229,6 +243,7 @@ export async function render_content_markdown(
 				html += '</div>';
 
 				html += await syntax_highlight({
+					prelude,
 					filename,
 					language: token.lang,
 					source,
@@ -238,6 +253,7 @@ export async function render_content_markdown(
 
 				if (converted) {
 					html += await syntax_highlight({
+						prelude,
 						filename,
 						language: token.lang === 'js' ? 'ts' : token.lang,
 						source: converted,
@@ -316,7 +332,16 @@ async function generate_ts_from_js(
 		// config files have no .ts equivalent
 		if (options.file === 'svelte.config.js') return;
 
-		return await convert_to_ts(code.replace(/\/\/\/ file: .+?\n/, ''));
+		let [before, after] = code.split('// ---cut---\n');
+
+		if (!after) {
+			after = before;
+			before = '';
+		}
+
+		const converted = await convert_to_ts(after.replace(/\/\/\/ file: .+?\n/, ''));
+
+		return converted && [before, converted].join('// ---cut---\n');
 	}
 
 	// Assumption: no module blocks
@@ -328,7 +353,7 @@ async function generate_ts_from_js(
 
 	if (!ts) return;
 
-	return code.replace(outer, `<script lang="ts">\n\t${ts.trim()}\n</script>`);
+	return code.replace(outer, `<script lang="ts">${ts}</script>`);
 }
 
 function get_jsdoc(node: ts.Node) {
@@ -347,6 +372,15 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 		// *\/ appears in some JsDoc comments in d.ts files due to the JSDoc-in-JSDoc problem
 		.replace(/\*\\\//g, '*/');
 
+	// TODO temp
+	if (js_code.includes('// ---cut---')) {
+		throw new Error('unexpected cut directive');
+	}
+
+	if (js_code.includes('/// file:')) {
+		throw new Error('unexpected file directive');
+	}
+
 	const ast = ts.createSourceFile(
 		'filename.ts',
 		js_code,
@@ -390,7 +424,7 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 								);
 
 								code.appendLeft(node.body.getStart(), '=> ');
-								code.appendLeft(node.body.getEnd(), ')');
+								code.appendLeft(node.body.getEnd(), ');');
 
 								modified = true;
 							}
@@ -401,7 +435,9 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 							const variable_statement = node.declarationList.declarations[0];
 
 							if (variable_statement.name.getText() === 'actions') {
-								code.appendLeft(variable_statement.getEnd(), ` satisfies ${name}`);
+								let i = variable_statement.getEnd();
+								while (code.original[i - 1] !== '}') i -= 1;
+								code.appendLeft(i, ` satisfies ${name}`);
 							} else {
 								code.appendLeft(
 									variable_statement.name.getEnd(),
@@ -458,35 +494,23 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 				return `${indent}import type { ${Array.from(names).join(', ')} } from '${from}';`;
 			})
 			.join('\n');
-		const idxOfLastImport = [...ast.statements]
-			.reverse()
-			.find((statement) => ts.isImportDeclaration(statement))
-			?.getEnd();
-		const insertion_point = Math.max(
-			idxOfLastImport ? idxOfLastImport + 1 : 0,
-			js_code.includes('---cut---')
-				? js_code.indexOf('\n', js_code.indexOf('---cut---')) + 1
-				: js_code.includes('/// file:')
-					? js_code.indexOf('\n', js_code.indexOf('/// file:')) + 1
-					: 0
+
+		const last_import = [...ast.statements].findLast((statement) =>
+			ts.isImportDeclaration(statement)
 		);
-		code.appendLeft(insertion_point, offset + import_statements + '\n');
-	}
 
-	let transformed = await prettier.format(code.toString(), {
-		printWidth: 100,
-		parser: 'typescript',
-		useTabs: true,
-		singleQuote: true,
-		trailingComma: 'none'
-	});
+		if (last_import) {
+			let i = last_import.getEnd();
+			while (js_code[i] !== '\n') i += 1;
+			i += 1;
 
-	// Indent transformed's each line by 2
-	transformed = transformed
-		.replace(/\n$/, '')
-		.split('\n')
-		.map((line) => indent + line)
-		.join('\n');
+			code.appendLeft(i, import_statements + '\n');
+		} else {
+			code.prependLeft(0, offset + import_statements + '\n');
+		}
+	}
+
+	let transformed = code.toString();
 
 	return transformed === js_code ? undefined : transformed.replace(/\n\s*\n\s*\n/g, '\n\n');
 
@@ -599,10 +623,10 @@ function parse_options(source: string, language: string) {
  * This function turns them back into tabs (plus leftover spaces for e.g. `\t * some JSDoc`)
  */
 function adjust_tab_indentation(source: string, language: string) {
-	return source.replace(/^([\-\+])?((?:    )+)/gm, (match, prefix = '', spaces) => {
-		if ((prefix && language !== 'diff') || language === 'yaml') return match;
+	return source.replace(/^((?:    )+)/gm, (match, spaces) => {
+		if (language === 'yaml') return match;
 
-		return prefix + '\t'.repeat(spaces.length / 4) + ' '.repeat(spaces.length % 4);
+		return '\t'.repeat(spaces.length / 4) + ' '.repeat(spaces.length % 4);
 	});
 }
 
@@ -611,13 +635,28 @@ function replace_blank_lines(html: string) {
 	return html.replaceAll(/<div class='line'>(&nbsp;)?<\/div>/g, '<div class="line">\n</div>');
 }
 
+const delimiter_substitutes = {
+	'---': '             ',
+	'+++': '           ',
+	':::': '         '
+};
+
+function highlight_spans(content: string, classname: string) {
+	return content
+		.split('\n')
+		.map((line) => `<span class="${classname}">${line}</span>`)
+		.join('\n');
+}
+
 async function syntax_highlight({
+	prelude,
 	source,
 	filename,
 	language,
 	twoslashBanner,
 	options
 }: {
+	prelude: string;
 	source: string;
 	filename: string;
 	language: string;
@@ -633,24 +672,28 @@ async function syntax_highlight({
 				theme
 			})
 		);
-	} else if (/^(js|ts)$/.test(language)) {
-		try {
-			let banner = twoslashBanner?.(filename, source, language, options);
-
-			if (banner) {
-				banner = '// @filename: injected.d.ts\n' + banner;
-
-				if (source.includes('// @filename:')) {
-					source = source.replace('// @filename:', `${banner}\n\n// @filename:`);
-				} else {
-					source = source.replace(
-						/^(?!\/\/ @)/m,
-						`${banner}\n\n// @filename: index.${language}\n// ---cut---\n`
-					);
-				}
-			}
+	} else if (language === 'js' || language === 'ts') {
+		let banner = twoslashBanner?.(filename, source, language, options);
+
+		if (banner) {
+			banner = '// @filename: injected.d.ts\n' + banner;
+		}
+
+		prelude = (banner ?? '') + '\n' + (prelude ?? '// ---cut---\n');
+
+		if (language === 'ts') {
+			prelude = prelude.replace(/(\/\/ @filename: .+)\.js$/gm, '$1.ts');
+		}
 
-			html = await codeToHtml(source, {
+		/** We need to stash code wrapped in `---` highlights, because otherwise TS will error on e.g. bad syntax, duplicate declarations */
+		const redactions: string[] = [];
+
+		const redacted = source.replace(/( {13}(?:[^ ][^]+?) {13})/g, (_, content) => {
+			redactions.push(content);
+			return ' '.repeat(content.length);
+		});
+		try {
+			html = await codeToHtml(prelude + redacted, {
 				lang: 'ts',
 				theme,
 				transformers: [
@@ -663,33 +706,15 @@ async function syntax_highlight({
 					})
 				]
 			});
+
+			html = html.replace(/ {27,}/g, () => redactions.shift()!);
 		} catch (e) {
 			console.error((e as Error).message);
-			console.warn(source);
+			console.warn(prelude + redacted);
 			throw new Error(`Error compiling snippet in ${filename}`);
 		}
 
 		html = replace_blank_lines(html);
-	} else if (language === 'diff') {
-		const lines = source.split('\n').map((content) => {
-			let type = null;
-			if (/^[\+\-]/.test(content)) {
-				type = content[0] === '+' ? 'inserted' : 'deleted';
-				content = content.slice(1);
-			}
-
-			return {
-				type,
-				content: content.replace(/</g, '&lt;')
-			};
-		});
-
-		html = `<pre class="language-diff" style="background-color: var(--shiki-color-background)"><code>${lines
-			.map((line) => {
-				if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
-				return line.content + '\n';
-			})
-			.join('')}</code></pre>`;
 	} else {
 		const highlighted = await codeToHtml(source, {
 			lang: SHIKI_LANGUAGE_MAP[language as keyof typeof SHIKI_LANGUAGE_MAP],
@@ -699,6 +724,21 @@ async function syntax_highlight({
 		html = replace_blank_lines(highlighted);
 	}
 
+	// munge shiki output: put whitespace outside `<span>` elements, so that
+	// highlight delimiters fall outside tokens
+	html = html.replace(/(<span[^<]+?>)(\s+)/g, '$2$1').replace(/(\s+)(<\/span>)/g, '$2$1');
+
+	html = html
+		.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {
+			return highlight_spans(content, 'highlight remove');
+		})
+		.replace(/ {11}([^ ][^]+?) {11}/g, (_, content) => {
+			return highlight_spans(content, 'highlight add');
+		})
+		.replace(/ {9}([^ ][^]+?) {9}/g, (_, content) => {
+			return highlight_spans(content, 'highlight');
+		});
+
 	return indent_multiline_comments(html)
 		.replace(/\/\*…\*\//g, '…')
 		.replace('<pre', `<pre data-language="${language}"`);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index b76f6959c7..525c2089e1 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -10,7 +10,6 @@ export const SHIKI_LANGUAGE_MAP = {
 	js: 'javascript',
 	dts: 'typescript',
 	css: 'css',
-	diff: 'diff',
 	ts: 'typescript',
 	'': ''
 };
diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index 14604491c1..d94fc249c3 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -1,31 +1,5 @@
 /* TODO all this should probably be moved into Text.svelte */
 
-.language-diff :where(.inserted, .deleted) {
-	position: relative;
-}
-
-.language-diff :where(.inserted) {
-	color: var(--sk-code-diff-inserted);
-}
-
-.language-diff :where(.deleted) {
-	color: var(--sk-code-diff-removed);
-	user-select: none;
-}
-
-.language-diff :where(.inserted, .deleted)::before {
-	position: absolute;
-	left: -1ch;
-}
-
-.language-diff :where(.inserted)::before {
-	content: '+';
-}
-
-.language-diff :where(.deleted)::before {
-	content: '-';
-}
-
 /** make long comments wrap on mobile */
 :where(.token.comment.wrapped) {
 	display: block;
diff --git a/packages/site-kit/src/lib/styles/utils/twoslash.css b/packages/site-kit/src/lib/styles/utils/twoslash.css
index cee75a3e5f..2fefa12605 100644
--- a/packages/site-kit/src/lib/styles/utils/twoslash.css
+++ b/packages/site-kit/src/lib/styles/utils/twoslash.css
@@ -5,3 +5,8 @@
 		display: none;
 	}
 }
+
+.twoslash-error-line {
+	visibility: hidden;
+	height: 0;
+}