gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
33.41k stars 2.53k forks source link

Highlight text which contains both text and code. #6397

Closed IssacH closed 10 months ago

IssacH commented 11 months ago

Hi guys, I am fairly new to this library and I am wondering if there is a native way to correctly highlight the raw text which contains both text and code. Or I need to extract the code part and the text part, and use gr.Highlightedtext and gr.Code seperately.

My raw content with text and code is like below:

Based on given input, please check your python test script.

```python
def say_hi():
   print("hi")

Any suggestions will be much appreciated, thanks a lot!

abidlabs commented 11 months ago

Hi @IssacH thanks for asking. Not really at the moment. Perhaps this issue is relevant: https://github.com/gradio-app/gradio/issues/5872

We've also made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

* A "Rich Textbox" that allows you to write bold/italics/colored text: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox
* A "Folium Map Viewer" component that allows you to use interactive maps: https://huggingface.co/spaces/freddyaboulton/gradio_folium

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. If you'd like to get started, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help.

abidlabs commented 10 months ago

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).