---
title: "Markdown"
slug: "markdown"
updated: 2026-01-21T10:29:10Z
published: 2026-01-21T10:29:10Z
canonical: "docs.sightmachine.com/markdown"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sightmachine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```python
{
    "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:

```python
# 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:

![](https://cdn.us.document360.io/c65001f1-30e3-4f1d-b335-57abf64ebd31/Images/Documentation/image(227).png)

### Features

- Supports **standard Markdown syntax**, including headers, lists, bold/italic text, links, and code blocks.
- Allows **inline HTML** for advanced formatting (e.g. `&lt;span&gt;` 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

```python
# H1
## H2
### H3
```

#### Emphasis

```python
*Italic* or _Italic_

**Bold** or __Bold__

***Bold and Italic***
```

#### Lists

**Unordered List:**

```python
- Item 1
- Item 2
  - Subitem
```

**Ordered List:**

```python
1. First
2. Second
3. Third
```

#### Links

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

#### Images

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

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

#### Code

**Inline Code:**

```python
Use `print()` to output text.
```

**Code Block:**

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

#### Blockquotes

```python
> This is a blockquote.
```

#### Horizontal Rule

```python
---
```