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>
This commit is contained in:
Ali Abdalla 2024-07-03 16:46:23 -07:00 committed by GitHub
parent 6cc69bc6ae
commit 64ac05b111
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 3 deletions

View File

@ -0,0 +1,5 @@
---
"website": patch
---
feat:Better spacing for codeblocks on docs

View File

@ -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;
}

View File

@ -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