Markdown

Introduction

The Markdown widget allows you to easily add and style your text using Markdown syntax. By using Markdown, you can add headings, lists, links, images, and more to enhance the presentation of your text content.

Function signature

Markdown(
    content="",
    height=300,
    widget_id=None,
)

Markdown preview

Parameters

Parameters	Type	Description
content	str	Markdown content text
height	Union[int, Literal["fit-content"]]	Widget height
show_border	bool	Display border around Markdown content
widget_id	str	ID of the widget

content

Determine input Markdown content.

type: str

default value: ""

markdown = Markdown(content="Some content")

content

height

Determine Widget height.

type: int

default value: 300

markdown = Markdown(content="Some content", height=30)

show_border

Determine Widget height.

type: bool

default value: True

markdown = Markdown(content="Lorem ipsum ...", show_border=False)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set_content(content: str)	Set Markdown data.
get_content()	Return Markdown data.
get_height()	Return Markdown height.
set_height(height: int)	Set Markdown height.

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/text-elements/005_markdown/src/main.py

Import libraries

import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Flexbox, Markdown, Button

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Initialize Button widgets, we will use

button_text = Button(text="Set md text")
button_clean = Button(text="Clean md")
button_readme = Button(text="Set md readme")
buttons_container = Flexbox(widgets=[button_text, button_clean, button_readme])

Initialize Markdown widget

md_path = "path/to/README.md"
md = ""
with open(md_path, "r") as f:
    md = f.read()

markdown = Markdown(height=400)

Create app layout

Prepare a layout for the app using Card widget with the content parameter and place widget that we've just created in the Container widget.

card = Card(title="Markdown", content=Container([markdown, buttons_container]))
layout = Container(widgets=[card], direction="vertical")

Create app using layout

Create an app object with the layout parameter.

app = sly.Application(layout=layout)

Handle button clicks

@button_text.click
def simple_content():
    markdown.set_content("### Title \n *some markdown text*")


@button_clean.click
def clear_content():
    markdown.set_content("")


@button_readme.click
def readme_content():
    markdown.set_content(md)

layout