Markdown

The markdown panel provides a way to create visualization for text, numbers, code, external links, and any common Markdown elements. It supports embedded HTML and inline styling to create rich, customizable summaries, annotations, or contextual information in your app.

Usage

A markdown panel is defined as a dictionary with the following structure:

{
    "id": "markdown-panel",
    "viz_type": "markdown",
    "viz_props": {
        "markdown": <your_markdown_here>
    }
}

Example

Below is an example of using the markdown panel to summarize output:

# calculate stats
total_output = df['Output'].sum()
shift_totals = df.groupby("Shift")["Output"].sum()
shift_with_highest_output = shift_totals.idxmax()
max_output = shift_totals.max()

# create markdown content
markdown = f"""
## Output Summary

<span style='color:#333;font-weight:bold;'>Key Observations:</span>
* Total output: {total_output}
* Highest output shift: <span style='color:#00A855;font-weight:600;'>{shift_with_highest_output} ({max_output})</span>
"""

# define panel
markdown_panel = {
    "id": "markdown-panel",
    "viz_type": "markdown",
    "viz_props": {
        "markdown": markdown
    }
}

The above creates:

Features

• Supports standard Markdown syntax, including headers, lists, bold/italic text, links, and code blocks.

• Allows inline HTML for advanced formatting (e.g. <span> for custom colors and font weights).

• Can display dynamic values from calculated python variables like statistics, dates, or other logic.

• Useful for summary panels, annotations, instructions, or even mini-reports.

Common Markdown Elements

Here are some frequently used Markdown elements with short examples:

Headers

# H1
## H2
### H3

Emphasis

*Italic* or _Italic_

**Bold** or __Bold__

***Bold and Italic***

Lists

Unordered List:

- Item 1
- Item 2
  - Subitem

Ordered List:

1. First
2. Second
3. Third

Links

[Google](https://google.com)

Images

![Alt Text](https://example.com/image.png)

<img src="https://example.com/image.png" width="200" height="200" alt="Alt Text">

Code

Inline Code:

Use `print()` to output text.

Code Block:

```python
def hello():
    print("Hello, world!")
```

Blockquotes

> This is a blockquote.

Horizontal Rule

---