Better spacing for codeblocks on docs (#8686)

* styling for codeblocks * add changeset * formatting * add changeset * changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Jul 3, 2024 · 64ac05b · 64ac05b
1 parent 6cc69bc
commit 64ac05b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/puny-bananas-prove.md b/.changeset/puny-bananas-prove.md
@@ -0,0 +1,5 @@
+---
+"website": patch
+---
+
+feat:Better spacing for codeblocks on docs
diff --git a/js/_website/src/lib/assets/style.css b/js/_website/src/lib/assets/style.css
@@ -147,6 +147,7 @@
 }
 code.language-python {
 	@apply !leading-7 !whitespace-pre-wrap !break-all;
+	line-height: 1 !important;
 }
 code.language-bash {
 	@apply !leading-7 !whitespace-pre-wrap !break-all;
@@ -249,10 +250,19 @@ li > ul {
 	padding-bottom: 0 !important;
 }
 
+code {
+	font-size: 0.9em;
+}
+
 pre > code {
 	font-weight: 500 !important;
 	border-radius: 0.25rem;
 	font-size: 0.9em !important;
+	line-height: 1 !important;
+}
+
+h3.header-tag {
+	margin-bottom: 10px;
 }
 
 h1 > code,
@@ -302,3 +312,7 @@ strong {
 .embedded-component .gradio-container footer {
 	display: none !important;
 }
+
+.obj .codeblock {
+	@apply my-4;
+}
diff --git a/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx b/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
@@ -40,9 +40,7 @@ demo = gr.ChatInterface(fn=echo, examples=["hello", "hola", "merhaba"], title="E
 demo.launch()
 ```
 
-**Custom Chatbot**: A `gr.ChatInterface` with a custom `gr.Chatbot` that includes a placeholder as well as upvote/downvote buttons. The upvote/downvote buttons are automatically added when a `.like()` event is attached to a `gr.Chatbot`. 
-
-In order to attach event listeners to your custom chatbot, wrap the `gr.Chatbot` as well as the `gr.ChatInterface` inside of a `gr.Blocks` like this:
+**Custom Chatbot**: A `gr.ChatInterface` with a custom `gr.Chatbot` that includes a placeholder as well as upvote/downvote buttons. The upvote/downvote buttons are automatically added when a `.like()` event is attached to a `gr.Chatbot`. In order to attach event listeners to your custom chatbot, wrap the `gr.Chatbot` as well as the `gr.ChatInterface` inside of a `gr.Blocks` like this:
 
 ```py
 import gradio as gr