如何为Gradio中的Markdown组件添加标签？

Gradio的Markdown组件属于展示型组件，默认不会渲染label参数，这和Textbox这类表单交互组件的设计逻辑不同，因此直接设置label不会在UI中显示标签。以下是几种可行的解决方法：

方法1：单独使用Label组件 #

通过gr.Label创建独立的标签组件，放在Markdown上方，保持和原生组件一致的视觉风格：

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    # 添加独立标签
    gr.Label("Answer")
    answer = gr.Markdown(value='[StackOverflow](https://stackoverflow.com/)')
demo.launch(share=True)

方法2：自定义CSS强制显示label #

Markdown组件的label元素实际存在但被CSS隐藏了，可通过自定义CSS强制显示：

import gradio as gr
with gr.Blocks(css="""
    footer{display:none !important}
    /* 针对Markdown组件的label设置显示规则 */
    .gr-markdown label{
        display:block;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
""") as demo:
    answer = gr.Markdown(value='[StackOverflow](https://stackoverflow.com/)', label="Answer")
demo.launch(share=True)

方法3：直接将标签嵌入Markdown内容 #

如果不需要独立的标签样式，可直接把标签写在Markdown的内容里，用加粗格式区分：

import gradio as gr
with gr.Blocks(css="footer{display:none !important}") as demo:
    answer = gr.Markdown(value='**Answer**\n[StackOverflow](https://stackoverflow.com/)')
demo.launch(share=True)

内容的提问来源于stack exchange，提问作者Franck Dernoncourt