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

ParametersTypeDescription

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")

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 MethodsDescription

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)

Last updated