Fix markdown link rendering in docs descriptions (#11774)

* fix link rendering

* add changeset

* autorecognize links

* revert login button changes

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: aliabd

.changeset/fast-garlics-lay.md

@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Fix markdown link rendering in docs descriptions

gradio/components/login_button.py

@@ -27,7 +27,7 @@ class LoginButton(Button):
     retrieve a signed-in user's profile by adding a parameter of type `gr.OAuthProfile`
     to any Gradio function. This will only work if this Gradio app is running in a
     Hugging Face Space. Permissions for the OAuth app can be configured in the Spaces
-    README file, as described here: <a href="https://huggingface.co/docs/hub/en/spaces-oauth" target="_blank">Spaces OAuth Docs</a>.
+    README file, as described here: https://huggingface.co/docs/hub/en/spaces-oauth.
     For local development, instead of OAuth, the local Hugging Face account that is
     logged in (via `hf auth login`) will be available through the `gr.OAuthProfile`
     object.

js/_website/src/lib/text.ts

@@ -1,6 +1,7 @@
 const regex_italic = /\*(.*?)\*/g;
 const regex_code = /`(.*?)`/g;
 const regex_curly_brackets = /\{(.*?)\}/g;
+const regex_auto_links = /\b(https?:\/\/\S+)/g;
 
 export function style_formatted_text(formatted_text: string | null): string {
 	if (!formatted_text) return "";
@@ -15,7 +16,7 @@ export function style_formatted_text(formatted_text: string | null): string {
 			"<code class='text-orange-500' style='font-family: monospace; font-size: 0.9em;'>$1</code>"
 		)
 		.replace(
-			/\[(.*?)\]\((.*?)\)/g,
-			"<a href='$2' class= 'text-orange-500'>$1</a>"
+			regex_auto_links,
+			"<a href='$1' target='_blank' class='text-orange-500'>$1</a>"
 		);
 }