Markdown

Upgraded gradio Markdown.

Supports output of multimodal content (audio, video, voice, files, text)
Supports custom rendering components and interaction with Python-side events

How to Use

Basic Usage

Multimodal & Support for Local File Display

Support for Accordion Content Display

Include the accordion tag in the returned content for more usage details, see accordion

Support for User Selection Interaction

Include the select-box tag in the returned content for more usage details, see select-box

Custom Tags (Advanced Usage, Requires Frontend Knowledge)

Importing js

The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example: custom_select.js

<file src="./resources/custom_components/custom_select.js"></file>

Interaction with Python Side

In js, you can use cc.dispatch to trigger the custom event listened to on the Python side. Taking the previous custom_select.js as an example, when we call cc.dispatch(options[i]) on the frontend, a notification will be sent to the Python side simultaneously.

API and Parameter List

The following APIs are additional extended parameters beyond the original gradio Markdown.

props

Attribute	Type	Default Value	Description
enable_base64	bool	False	Whether to support rendering content as base64, since rendering base64 directly can pose security issues, the default is False.
preview	bool	True	Whether to enable image preview functionality.
custom_components	dict[str, CustomComponentDict] CustomComponentDict definition below	None	Supports user-defined custom tags and controls tag rendering styles and triggers Python events through js.

CustomComponent definition is as follows:

class CustomComponentDict(TypedDict):
    props: Optional[List[str]]
    template: Optional[str]
    js: Optional[str]

Built-in Custom Tags

select-box
accordion

Event Listeners

Event	Description
`mgr.Markdown.custom(fn, ···)`	Triggered when a custom tag event occurs. EventData is: - index: The index tuple of the current message ([message index, user group(index 0) or bot group(index 1), user/bot group index]). - tag: The current tag that triggered the event. - tag_index: The index of the current triggered tag, re-calculated based on the message’s index tuple. - value: The custom value passed in.