diff --git a/packages/svelte-markdown-preprocess/src/index.spec.ts b/packages/svelte-markdown-preprocess/src/index.spec.ts
index df049a92..2a05e466 100644
--- a/packages/svelte-markdown-preprocess/src/index.spec.ts
+++ b/packages/svelte-markdown-preprocess/src/index.spec.ts
@@ -139,6 +139,12 @@ describe(svelteMarkdownPreprocess.name, () => {
     it('should leave a component inside a code fence as code', async () => {
       await expect(render('```svelte\n<Markdown.Image src="a.webp" />\n```')).resolves.toContain('<Markdown.Code');
     });
+
+    it('should escape template syntax inside inline code', async () => {
+      await expect(render('Use `${PORT}:{PORT}`')).resolves.toContain(
+        '<Markdown.Code code={`' + String.raw`$\{PORT\}:\{PORT\}` + '`} />',
+      );
+    });
   });
 
   describe('images', () => {
diff --git a/packages/svelte-markdown-preprocess/src/markdown.ts b/packages/svelte-markdown-preprocess/src/markdown.ts
index 2c1b7072..05a78209 100644
--- a/packages/svelte-markdown-preprocess/src/markdown.ts
+++ b/packages/svelte-markdown-preprocess/src/markdown.ts
@@ -227,7 +227,7 @@ export const markedSvelte = (): MarkedExtension => ({
     },
 
     codespan({ text }) {
-      return `<Markdown.Code code={\`${text}\`} />`;
+      return `<Markdown.Code code={\`${escapeSvelteCode(text)}\`} />`;
     },
   },
 });
diff --git a/packages/ui/src/lib/components/Markdown/Heading.svelte b/packages/ui/src/lib/components/Markdown/Heading.svelte
index fd9ccd42..a7bd6236 100644
--- a/packages/ui/src/lib/components/Markdown/Heading.svelte
+++ b/packages/ui/src/lib/components/Markdown/Heading.svelte
@@ -38,4 +38,4 @@
   let { size, tag, class: className } = $derived(getSizeAndTag(level));
 </script>
 
-<Heading {size} {tag} class={cleanClass('flex items-center gap-1', className)} {id} {children} />
+<Heading {size} {tag} class={cleanClass('flex items-center flex-wrap gap-1 ', className)} {id} {children} />