tags: [gradio-custom-component, Markdown] title: gradio_somarkdown short_description: A custom Gradio component that renders Markdown with KaTeX math, SMILES chemical structures, mhchem equations, and syntax-highlighted code blocks. colorFrom: blue colorTo: yellow sdk: gradio pinned: false app_file: space.py

gradio_somarkdown

A custom Gradio component that replaces gr.Markdown with the SoMarkDown renderer — adding KaTeX math, SMILES chemical structures, mhchem chemical equations, syntax-highlighted code blocks, and Table of Contents generation.

Installation

pip install gradio_somarkdown

Usage

import gradio as gr
from gradio_somarkdown import SoMarkDown

example = r"""
## Math
$$ E = mc^2 $$  Inline: $e^{i\pi} + 1 = 0$

## Chemical Structure
$$ \smiles{CC(=O)Oc1ccccc1C(=O)O} $$

## Chemistry (mhchem)
$$ \ce{CO2 + C -> 2 CO} $$

## Code
```python
def fib(n):
    return n if n <= 1 else fib(n-1) + fib(n-2)

"""

with gr.Blocks() as demo: SoMarkDown(value=example, katex={"throwOnError": False})

demo.launch()

## `SoMarkDown`

### Initialization

| name | type | default | description |
|:-----|:-----|:--------|:------------|
| `value` | `str \| Callable \| None` | `None` | SoMarkdown content to render. Accepts a callable for dynamic values. |
| `linkify` | `bool` | `True` | Auto-convert URL-like text to links. |
| `typographer` | `bool` | `True` | Enable smart quotes and language-neutral typographic replacements. |
| `katex` | `dict \| None` | `None` | KaTeX options (e.g. `{"throwOnError": False}`). `trust` and `strict` are always forced to `True`/`False`. |
| `smiles` | `dict \| None` | `None` | SMILES renderer options (e.g. `{"disableColors": False, "width": 150, "height": 150}`). |
| `img_desc_enabled` | `bool` | `True` | Show image descriptions below images. |
| `rtl` | `bool` | `False` | Right-to-left text direction. |
| `height` | `int \| str \| None` | `None` | Fixed height; content scrolls when it overflows. |
| `max_height` | `int \| str \| None` | `None` | Maximum height; shrinks to content when shorter. |
| `min_height` | `int \| str \| None` | `None` | Minimum height; expands to content when taller. |
| `container` | `bool` | `False` | Wrap in a Gradio Block container. |
| `padding` | `bool` | `False` | Apply `--block-padding` CSS variable. |

Backward-compatibility parameters from `gr.Markdown` (`sanitize_html`, `header_links`, `line_breaks`, `buttons`, `latex_delimiters`) are accepted but ignored.

### Events

| name | description |
|:-----|:------------|
| `change` | Triggered when the value changes (user input or function update). |
| `copy` | Triggered when the user copies content. Carries copied text via `gradio.CopyData`. |

### User function

```python
def predict(value: str | None) -> str | None:
    return value