diff --git a/documentation/docs/04-runtime/02-context.md b/documentation/docs/04-runtime/02-context.md
index 0833d3d9bc..6314a32740 100644
--- a/documentation/docs/04-runtime/02-context.md
+++ b/documentation/docs/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/documentation/docs/04-runtime/03-lifecycle-hooks.md b/documentation/docs/04-runtime/03-lifecycle-hooks.md
index f08cbd910e..dc5465ee09 100644
--- a/documentation/docs/04-runtime/03-lifecycle-hooks.md
+++ b/documentation/docs/04-runtime/03-lifecycle-hooks.md
@@ -110,23 +110,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) {
@@ -135,7 +133,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 			});
 		}
 
--		updatingMessages = false;
+		---updatingMessages = false;---
 	});
 
 	function handleKeydown(event) {
@@ -143,7 +141,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 = '';
 		}
@@ -161,12 +159,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/documentation/docs/05-misc/02-testing.md b/documentation/docs/05-misc/02-testing.md
index e159b3818b..7ed110dc80 100644
--- a/documentation/docs/05-misc/02-testing.md
+++ b/documentation/docs/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/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index e40e062520..e2ac86be2f 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/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/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 5e198c2d55..bfa75ac7f0 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -74,24 +74,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