Added diff

src/routes/blog/+layout.svelte

@@ -38,7 +38,7 @@ import Navbar from "$lib/components/Navbar.svelte";
   @apply p-0 relative block;
 
   &:has(.diff) {
-    @apply ml-8;
+    @apply ml-4;
   }
 }
 
@@ -58,12 +58,12 @@ import Navbar from "$lib/components/Navbar.svelte";
 :global(code .diff.add) {
   background: #526a4f;
   display: inline-block;
-  width: calc(100% + 64px);
-  @apply pr-4 -mr-4 pl-12 -ml-12;
+  width: calc(100% + 48px);
+  @apply pr-4 -mr-4 pl-8 -ml-8;
 
   &:before {
     position: absolute;
-    left: -32px;
+    left: -22px;
     content: '+';
   }
 }

src/routes/blog/this-blog/+page.svx

@@ -100,24 +100,24 @@ npm i -D mdsvex @mavrin/remark-typograf
 ```js
 // svelte.config.js
 import adapter from "@sveltejs/adapter-auto";
-import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
+import {vitePreprocess} from "@sveltejs/vite-plugin-svelte";
 import {mdsvex} from "mdsvex"; // [!code ++]
 import remarkTypograf from "@mavrin/remark-typograf"; // [!code ++]
 
 const config = {
-	extensions: [
+  extensions: [
     ".svelte",
     ".svx" // [!code ++]
   ],
-	preprocess: [
-		vitePreprocess(),
-		mdsvex({ // [!code ++]
-			remarkPlugins: [remarkTypograf] // [!code ++]
-		}) // [!code ++]
-	],
-	kit: {
-		adapter: adapter()
-	}
+  preprocess: [
+    vitePreprocess(),
+    mdsvex({ // [!code ++]
+      remarkPlugins: [remarkTypograf] // [!code ++]
+    }) // [!code ++]
+  ],
+  kit: {
+    adapter: adapter()
+  }
 };
 
 export default config;