pip install gradio_somarkdown

import gradio as gr
from gradio_somarkdown import SoMarkDown

# Example content from https://github.com/SoMarkAI/SoMarkDown/blob/main/example/example_data.js
EXAMPLE_MARKDOWN = r"""
# SoMarkDown Demo

## Image with description (For AI understaning display)
: **Figure 1:** The Stormtroopocat.

![The Stormtroopocat is sitting in the pic.](https://octodex.github.com/images/stormtroopocat.jpg)

## Tables

: **Table 1:** This is a table example in HTML syntax, only HTML format support spanning cells.

<table>
  <tr>
    <td colspan="4">
      **🚀 SoMarkDown Overview**

      Compatible with CommonMark, supporting components such as mathematics, chemistry, and code highlighting.
    </td>
  </tr>
  <tr>
    <td>
      **📦 Installation**

      `npm install somarkdown`
    </td>
    <td>
      **📐 Display Formula**

      %%%LATEX_BLOCK_0%%%
    </td>
    <td>
      **🧪 SMILES Aspirin**

      %%%LATEX_BLOCK_1%%%
    </td>
    <td>
      **✨ Features**

      Paragraph mapping, high-speed rendering, multiple themes.
    </td>
  </tr>
  <tr>
    <td rowspan="2">
      **🖼️ Image Example**

      ![A random example image](https://picsum.photos/250/250?random=1)
    </td>
    <td>
      **🔢 Inline Formula**

      Supports $ \KaTeX $ and chemical extensions.
    </td>
    <td>
      **🎨 Code Highlighting**

      ```javascript
      const smd = new SoMarkDown();
      const html = smd.render(markdown)
      ```
    </td>
    <td>
      **🏷️ Caption Support**

      Caption support for image and table components.
    </td>
  </tr>
  <tr>
    <td>
      **⚡ Build Command**

      `npm run build`
    </td>
    <td>
      **📚 Goal**

      SoMarkDown is also the output target protocol for the document intelligence parsing product [SoMark](https://somark.ai/).
    </td>
    <td>
      **🧩 Image Understanding**

      Supports the display of image understanding results.
    </td>
  </tr>
</table>

: **Table 2:** This is a table example in markdown syntax.

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

## Math
%%%LATEX_BLOCK_2%%%

Inline: $e^{i\pi} + 1 = 0$

## Chemical Structure
%%%LATEX_BLOCK_3%%%

SMILES syntax has been integrated into mathematical expressions, allowing them to be easily combined.

%%%LATEX_BLOCK_4%%%

## Chemistry (mhchem)
%%%LATEX_BLOCK_5%%%

## Code
Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Block code "fences"

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

with gr.Row():
    # ── Left column: input + controls ─────────────────────────────────
    with gr.Column(scale=1):
        input_text = gr.Textbox(
            value=EXAMPLE_MARKDOWN,
            lines=12,
            max_lines=40,
            label="Markdown",
            show_label=False,
        )

        gr.Markdown("**General**")
        with gr.Row():
            linkify = gr.Checkbox(label="linkify", value=True)
            typographer = gr.Checkbox(label="typographer", value=True)
            img_desc_enabled = gr.Checkbox(label="img_desc_enabled", value=True)

        gr.Markdown("**SMILES**")
        with gr.Row():
            smiles_disable_colors = gr.Checkbox(label="disableColors", value=False)
            smiles_width = gr.Number(label="width", value=150, minimum=50, maximum=600, step=10)
            smiles_height = gr.Number(label="height", value=150, minimum=50, maximum=600, step=10)

        gr.Markdown("**KaTeX**")
        with gr.Row():
            katex_throw_on_error = gr.Checkbox(label="throwOnError", value=False)

        render_btn = gr.Button("Render", variant="primary")

    # ── Right column: rendered output ─────────────────────────────────
    with gr.Column(scale=1, elem_id="output-col"):
        somarkdown_output = SoMarkDown(
            value=EXAMPLE_MARKDOWN,
            img_desc_enabled=True,
        )

inputs = [
    input_text,
    linkify,
    typographer,
    img_desc_enabled,
    smiles_disable_colors,
    smiles_width,
    smiles_height,
    katex_throw_on_error,
]

render_btn.click(fn=render, inputs=inputs, outputs=somarkdown_output)
input_text.change(fn=render, inputs=inputs, outputs=somarkdown_output)