More file names

documentation/blog/2023-09-20-runes.md

@@ -8,6 +8,7 @@ authorURL: /
 In 2019, Svelte 3 turned JavaScript into a [reactive language](/blog/svelte-3-rethinking-reactivity). Svelte is a web UI framework that uses a compiler to turn declarative component code like this...
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = 0;
 
@@ -54,6 +55,7 @@ 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
+<!--- file: App.svelte --->
 <script>
 -	let count = 0;
 +	let count = $state(0);
@@ -93,7 +95,9 @@ 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
+<!--- file: App.svelte --->
 <script>
+/// file: App.svelte
 +	import { createCounter } from './counter.js';
 +
 +	const counter = createCounter();
@@ -133,6 +137,7 @@ export function createCounter() {
 ```
 
 ```diff
+<!--- file: App.svelte --->
 <script>
 	import { createCounter } from './counter.js';