import gradio as gr
import markdown
from markdown.extensions.tables import TableExtension
from markdown.extensions.fenced_code import FencedCodeExtension
from markdown.extensions.toc import TocExtension
from markdown.extensions.attr_list import AttrListExtension
from markdown.extensions.codehilite import CodeHiliteExtension

# Function to render markdown to HTML with extensions
def render_markdown(md_text):
    return markdown.markdown(
        md_text,
        extensions=[
            TableExtension(),
            FencedCodeExtension(),
            TocExtension(baselevel=2),
            AttrListExtension(),
            CodeHiliteExtension(linenums=False, css_class="highlight"),
        ],
    )

# Creating the Gradio Interface
with gr.Blocks(theme="Nymbo/Nymbo_Theme") as demo:
    gr.Markdown("# Markdown Suite")

    with gr.Row():
        with gr.Column():
            md_input = gr.Textbox(
                lines=20, 
                placeholder="Write your markdown here...", 
                label="Markdown Input",
                elem_classes=["gr-textbox"]
            )
        with gr.Column():
            md_output = gr.HTML(label="Rendered Output", elem_classes=["gr-html"])

    md_input.change(render_markdown, inputs=md_input, outputs=md_output)

# Launch the app
demo.launch()