From 17fb116492f951ab66e3a39b5fdfb598f5446b6f Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Sun, 11 Feb 2024 13:16:50 -0500
Subject: [PATCH] Fixes gr.Markdown() does not render spaces around links
 correctly (#7361)

* fix

* remove console

* add changeset

* fix

* storybook

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .changeset/chatty-lizards-share.md     | 6 ++++++
 js/markdown/Markdown.stories.svelte    | 8 ++++++++
 js/markdown/shared/MarkdownCode.svelte | 1 +
 3 files changed, 15 insertions(+)
 create mode 100644 .changeset/chatty-lizards-share.md

diff --git a/.changeset/chatty-lizards-share.md b/.changeset/chatty-lizards-share.md
new file mode 100644
index 0000000000000..8521084e3b0a0
--- /dev/null
+++ b/.changeset/chatty-lizards-share.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": patch
+"gradio": patch
+---
+
+fix:Fixes gr.Markdown() does not render spaces around links correctly
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
index f0c667c348191..6913bb3cd3461 100644
--- a/js/markdown/Markdown.stories.svelte
+++ b/js/markdown/Markdown.stories.svelte
@@ -62,3 +62,11 @@ in two separate lines.`
 		latex_delimiters: [{ left: "$", right: "$", display: false }]
 	}}
 />
+
+<Story
+	name="Markdown with header links"
+	args={{
+		value: "# Visit [Gradio](https://gradio.app) for more information",
+		header_links: true
+	}}
+/>
diff --git a/js/markdown/shared/MarkdownCode.svelte b/js/markdown/shared/MarkdownCode.svelte
index bfb581952621d..5d5cd63489909 100644
--- a/js/markdown/shared/MarkdownCode.svelte
+++ b/js/markdown/shared/MarkdownCode.svelte
@@ -169,5 +169,6 @@
 	span :global(h6) {
 		display: flex;
 		align-items: center;
+		white-space-collapse: break-spaces;
 	}
 </style>