Upload folder using huggingface_hub

README.md

@@ -27,150 +27,100 @@ pip install gradio_markdownlabel
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": """# AI and Machine Learning Research Report
-
-## Introduction
-
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
-
-- Computer vision
-- Natural language processing
-- Speech recognition
-
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
-
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
-
-## Applications
-
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
-
-## Conclusion
-
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-""",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
-
 with gr.Blocks(title="Markdown Label Demo") as demo:
     gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
     
     # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+    example = {
+        "markdown_content": """# Comprehensive Markdown Example
+
+## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
+
+### Lists and Items
+Here are some important points:
+
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
+
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
+
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
+
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
+
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
+
+### Mixed Content
+The document contains various **formatting** options including:
+
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
+
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

app.py

@@ -2,150 +2,100 @@
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": """# AI and Machine Learning Research Report
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    
+    # Simple position-based example
+    example = {
+        "markdown_content": """# Comprehensive Markdown Example
 
 ## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
 
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+### Lists and Items
+Here are some important points:
 
-- Computer vision
-- Natural language processing
-- Speech recognition
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
 
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
 
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
 
-## Applications
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
 
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
 
-## Conclusion
+### Mixed Content
+The document contains various **formatting** options including:
 
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-""",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
 
-with gr.Blocks(title="Markdown Label Demo") as demo:
-    gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
-    
-    # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

space.py

@@ -42,150 +42,100 @@ pip install gradio_markdownlabel
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": \"\"\"# AI and Machine Learning Research Report
-
-## Introduction
-
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
-
-- Computer vision
-- Natural language processing
-- Speech recognition
-
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
-
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
-
-## Applications
-
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
-
-## Conclusion
-
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-\"\"\",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
-
 with gr.Blocks(title="Markdown Label Demo") as demo:
     gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
     
     # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+    example = {
+        "markdown_content": \"\"\"# Comprehensive Markdown Example
+
+## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
+
+### Lists and Items
+Here are some important points:
+
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
+
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
+
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
+
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
+
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
+
+### Mixed Content
+The document contains various **formatting** options including:
+
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
+
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.\"\"\", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

src/CLAUDE.local.md

@@ -0,0 +1,51 @@
+Here's a concise summary of Gradio custom component development steps for Claude Code's memory:
+
+## Gradio Custom Component Development Steps
+
+### 1. Setup & Initialization
+- Install Gradio: `pip install gradio`
+- Create component: `gradio cc create MyComponent --template [template_type]`
+- Templates: `HTML`, `File`, `Fallback`, `SimpleTextbox`, `SimpleDropdown`
+
+### 2. Project Structure
+```
+MyComponent/
+├── backend/           # Python backend logic
+├── frontend/          # JavaScript/TypeScript frontend
+├── demo/             # Demo app
+└── pyproject.toml    # Package configuration
+```
+
+### 3. Backend Development (`backend/`)
+- Inherit from appropriate Gradio component class
+- Implement `preprocess()` and `postprocess()` methods
+- Define component properties and data types
+- Handle server-side logic
+
+### 4. Frontend Development (`frontend/`)
+- Built with Svelte framework
+- Implement component UI in `Index.svelte`
+- Handle user interactions and data flow
+- Style with CSS/Tailwind
+
+### 5. Development Workflow
+- `gradio cc dev` - Start development server with hot reload
+- `gradio cc build` - Build component for distribution
+- `gradio cc publish` - Publish to PyPI/Hugging Face Hub
+
+### 6. Integration
+- Install: `pip install your-component-name`
+- Import and use in Gradio apps like built-in components
+- Component automatically registers with Gradio
+
+### 7. Key Files
+- `backend/mycomponent.py` - Main Python component class
+- `frontend/Index.svelte` - Main frontend component
+- `demo/app.py` - Demo application
+- `pyproject.toml` - Package metadata and dependencies
+
+This workflow enables creating reusable, distributable Gradio components with custom functionality.
+
+### Python
+
+Need to run `run `pip install -e .` for cc dev

src/README.md

@@ -27,150 +27,100 @@ pip install gradio_markdownlabel
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": """# AI and Machine Learning Research Report
-
-## Introduction
-
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
-
-- Computer vision
-- Natural language processing
-- Speech recognition
-
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
-
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
-
-## Applications
-
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
-
-## Conclusion
-
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-""",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
-
 with gr.Blocks(title="Markdown Label Demo") as demo:
     gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
     
     # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+    example = {
+        "markdown_content": """# Comprehensive Markdown Example
+
+## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
+
+### Lists and Items
+Here are some important points:
+
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
+
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
+
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
+
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
+
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
+
+### Mixed Content
+The document contains various **formatting** options including:
+
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
+
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

src/demo/app.py

@@ -2,150 +2,100 @@
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": """# AI and Machine Learning Research Report
+with gr.Blocks(title="Markdown Label Demo") as demo:
+    gr.Markdown("# MarkdownLabel Component Demo")
+    
+    # Simple position-based example
+    example = {
+        "markdown_content": """# Comprehensive Markdown Example
 
 ## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
 
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
+### Lists and Items
+Here are some important points:
 
-- Computer vision
-- Natural language processing
-- Speech recognition
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
 
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
 
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
 
-## Applications
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
 
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
 
-## Conclusion
+### Mixed Content
+The document contains various **formatting** options including:
 
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-""",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
 
-with gr.Blocks(title="Markdown Label Demo") as demo:
-    gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
-    
-    # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

src/demo/space.py

@@ -42,150 +42,100 @@ pip install gradio_markdownlabel
 import gradio as gr
 from gradio_markdownlabel import MarkdownLabel
 
-# Create a comprehensive example with rich markdown content and multiple highlights
-example_data = {
-    "markdown_content": \"\"\"# AI and Machine Learning Research Report
-
-## Introduction
-
-This document explores the rapidly evolving field of **artificial intelligence** and its various applications in modern technology. The study focuses on *machine learning* techniques and their impact on different industries.
-
-## Key Technologies
-
-### Deep Learning
-*Deep learning* represents a subset of machine learning that uses **neural networks** with multiple layers. This approach has revolutionized areas such as:
-
-- Computer vision
-- Natural language processing
-- Speech recognition
-
-### Natural Language Processing
-**Natural language processing** (NLP) enables computers to understand and interpret human language. Key applications include:
-
-1. Text analysis
-2. Sentiment analysis
-3. Language translation
-
-## Applications
-
-The integration of **computer vision** in autonomous vehicles has transformed the automotive industry. Similarly, **reinforcement learning** has shown remarkable success in gaming and robotics.
-
-## Conclusion
-
-As **artificial intelligence** continues to advance, we expect to see more sophisticated applications of these technologies across various domains.
-\"\"\",
-    "highlights": [
-        {
-            "term": "artificial intelligence",
-            "title": "Artificial Intelligence (AI)",
-            "content": "**Artificial Intelligence** refers to the simulation of human intelligence in machines that are programmed to think and learn like humans. AI systems can perform tasks that typically require human intelligence, such as:\n\n- Visual perception\n- Speech recognition\n- Decision-making\n- Language translation\n\nAI is broadly categorized into:\n1. **Narrow AI** - designed for specific tasks\n2. **General AI** - hypothetical AI with human-level cognitive abilities",
-            "category": "Core Technology",
-            "color": "#e3f2fd"
-        },
-        {
-            "term": "machine learning",
-            "title": "Machine Learning (ML)",
-            "content": "**Machine Learning** is a subset of AI that focuses on the development of algorithms that can learn and improve from experience without being explicitly programmed.\n\n### Types of Machine Learning:\n- **Supervised Learning**: Learning with labeled examples\n- **Unsupervised Learning**: Finding patterns in unlabeled data\n- **Reinforcement Learning**: Learning through interaction with environment\n\n### Applications:\n- Recommendation systems\n- Fraud detection\n- Medical diagnosis\n- Autonomous vehicles",
-            "category": "Core Technology", 
-            "color": "#f3e5f5"
-        },
-        {
-            "term": "deep learning",
-            "title": "Deep Learning",
-            "content": "**Deep Learning** is a specialized subset of machine learning that uses artificial neural networks with multiple layers (deep neural networks) to model and understand complex patterns.\n\n### Key Characteristics:\n- Multiple hidden layers\n- Automatic feature extraction\n- Hierarchical learning\n\n### Popular Architectures:\n- Convolutional Neural Networks (CNNs)\n- Recurrent Neural Networks (RNNs)\n- Transformers\n\n### Applications:\n- Image recognition\n- Natural language processing\n- Speech synthesis",
-            "category": "Advanced Technique",
-            "color": "#e8f5e8"
-        },
-        {
-            "term": "neural networks",
-            "title": "Neural Networks",
-            "content": "**Neural Networks** are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) that process information.\n\n### Components:\n- **Input Layer**: Receives data\n- **Hidden Layers**: Process information\n- **Output Layer**: Produces results\n\n### Types:\n- Feedforward networks\n- Recurrent networks\n- Convolutional networks\n\nNeural networks learn by adjusting the weights of connections between neurons based on training data.",
-            "category": "Architecture",
-            "color": "#fff3e0"
-        },
-        {
-            "term": "natural language processing",
-            "title": "Natural Language Processing (NLP)",
-            "content": "**Natural Language Processing** combines computational linguistics with machine learning to enable computers to understand, interpret, and generate human language.\n\n### Core Tasks:\n- **Tokenization**: Breaking text into words/sentences\n- **Part-of-speech tagging**: Identifying grammatical roles\n- **Named entity recognition**: Identifying people, places, organizations\n- **Sentiment analysis**: Determining emotional tone\n\n### Modern Approaches:\n- Transformer models (BERT, GPT)\n- Attention mechanisms\n- Pre-trained language models",
-            "category": "Application Domain",
-            "color": "#fce4ec"
-        },
-        {
-            "position": [615, 632],
-            "title": "Computer Vision (Position-based)",
-            "content": "**Computer Vision** highlighted by character position rather than term matching. This demonstrates precise control over highlighting specific text segments.\n\n### Position-based Benefits:\n- Exact character-level precision\n- No ambiguity with similar terms\n- Works with any text, including special characters\n- Useful for pre-processed documents",
-            "category": "Position Highlight",
-            "color": "#ffeb3b"
-        },
-        {
-            "term": "computer vision",
-            "title": "Computer Vision", 
-            "content": "**Computer Vision** is a field of AI that enables machines to interpret and understand visual information from the world, mimicking human vision capabilities.\n\n### Key Tasks:\n- **Object Detection**: Locating objects in images\n- **Image Classification**: Categorizing images\n- **Semantic Segmentation**: Pixel-level understanding\n- **Face Recognition**: Identifying individuals\n\n### Applications:\n- Autonomous vehicles\n- Medical imaging\n- Security systems\n- Augmented reality",
-            "category": "Application Domain",
-            "color": "#e1f5fe"
-        },
-        {
-            "term": "reinforcement learning",
-            "title": "Reinforcement Learning (RL)",
-            "content": "**Reinforcement Learning** is a type of machine learning where an agent learns to make decisions by performing actions in an environment to maximize cumulative reward.\n\n### Key Concepts:\n- **Agent**: The learner/decision maker\n- **Environment**: The world the agent interacts with\n- **Actions**: Choices available to the agent\n- **Rewards**: Feedback from the environment\n- **Policy**: Strategy for choosing actions\n\n### Famous Applications:\n- Game playing (AlphaGo, OpenAI Five)\n- Robotics control\n- Trading algorithms\n- Resource allocation",
-            "category": "Learning Paradigm",
-            "color": "#f1f8e9"
-        },
-        {
-            "position": [169, 190],
-            "title": "Machine Learning (Position)",
-            "content": "This **machine learning** instance is highlighted using position-based highlighting at characters 169-190.\n\n### Position Highlighting Use Cases:\n- Academic paper annotations\n- Legal document markup\n- Code documentation\n- Precise text analysis\n\nPosition-based highlighting ensures exact text selection without ambiguity.",
-            "category": "Position Demo",
-            "color": "#e8eaf6"
-        }
-    ]
-}
-
 with gr.Blocks(title="Markdown Label Demo") as demo:
     gr.Markdown("# MarkdownLabel Component Demo")
-    gr.Markdown("This demo showcases the MarkdownLabel component with **both term-based and position-based** interactive highlighting and detailed side panel.")
-    
-    gr.Markdown("Includes both term-based (e.g., 'artificial intelligence') and position-based highlighting (yellow highlights).")
-    MarkdownLabel(
-        value=example_data,
-        label="AI Research Report - Mixed Highlighting",
-        show_side_panel=True,
-        panel_width="350px",
-        interactive=True
-    )
     
     # Simple position-based example
-    simple_example = {
-        "markdown_content": "The quick **brown fox** jumps over the lazy dog. This is a simple example.",
+    example = {
+        "markdown_content": \"\"\"# Comprehensive Markdown Example
+
+## Introduction
+*The* quick **brown fox** jumps over the lazy dog. This is a simple quick example with various **formatting** elements.
+
+### Lists and Items
+Here are some important points:
+
+1. **First item** - This is the primary consideration
+2. *Second item* - Another important point  
+3. Third item with `inline code`
+4. Fourth item containing [a link](https://example.com)
+
+#### Unordered Lists
+- Bullet point one
+- Bullet point two with **bold text**
+- Final bullet point
+
+### Code Block Example
+```python
+def hello_world():
+    print("Hello, World!")
+    return "success"
+```
+
+### Tables
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Data A   | Data B   | Data C   |
+
+### Blockquotes
+> This is a blockquote with some **important** information.
+> 
+> It can span multiple lines and contain *emphasis*.
+
+### Mixed Content
+The document contains various **formatting** options including:
+
+- *Italicized text* for emphasis
+- **Bold text** for importance  
+- `Inline code` for technical terms
+- Links like [this one](https://example.com)
+
+#### Final Section
+This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.\"\"\", 
         "highlights": [
             {
-                "position": [4, 9],  # "quick"
-                "title": "Quick (Position 4-9)",
-                "content": "Highlighted using exact character positions 4-9.",
+                "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
+                "title": "Quick",
+                "content": "Highlighted using exact character positions.",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
             },
             {
                 "term": "brown fox",
                 "title": "Brown Fox (Term Match)",
-                "content": "Highlighted using term matching.",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
                 "category": "Term Demo", 
                 "color": "#e3f2fd"
             },
             {
-                "position": [35, 43],  # "the lazy"
-                "title": "The Lazy (Position 35-43)", 
-                "content": "Another position-based highlight at characters 35-43.",
+                "position": [91, 95],  # "lazy" in "the lazy dog"
+                "title": "Lazy", 
+                "content": "Position-based highlight",
                 "category": "Position Demo",
-                "color": "#f3e5f5"
-            }
+                "color": "#ffeb3b"
+            },
+            {
+                "position": [989, 999],
+                "title": "Italicized",
+                "content": "Highlighting 'Italicized'",
+                "category": "Position Demo", 
+                "color": "#ff9800"
+            },
+            {
+                "term": "formatting",
+                "title": "formatting (Term Match)",
+                "content": "Highlighted using term matching - will match anywhere this term appears.",
+                "category": "Term Demo", 
+                "color": "#d0167f91"
+            },
         ]
     }
     
     gr.Markdown("## Position vs Term Highlighting Comparison")
-    gr.Markdown("This example shows the difference between position-based (yellow/purple) and term-based (blue) highlighting.")
+    gr.Markdown("This example shows the difference between position-based (yellow) and term-based (blue) highlighting.")
     MarkdownLabel(
-        value=simple_example,
+        value=example,
         label="Simple Position vs Term Example",
         show_side_panel=True,
         panel_width="300px",

src/frontend/shared/EditableMarkdownRenderer.svelte

@@ -59,14 +59,26 @@
 	}
 
 	async function processMarkdown(contentToRender: string) {
-		// First, parse the markdown to HTML
-		let html = await marked(contentToRender);
-		
 		// Separate position-based and term-based highlights
 		const positionHighlights = highlights.filter(h => h.position && h.position.length === 2);
 		const termHighlights = highlights.filter(h => h.term && h.term.trim());
 		
-		// Apply term-based highlights to the HTML first
+		// Apply position-based highlights first by inserting special markers
+		// Note: Only apply position highlights if contentToRender matches original markdown_content
+		let processedMarkdown = contentToRender;
+		if (contentToRender === markdown_content) {
+			processedMarkdown = applyPositionMarkers(contentToRender, positionHighlights);
+		}
+		
+		// Then parse the markdown to HTML
+		let html = await marked(processedMarkdown);
+		
+		// Replace position markers with actual highlight spans (only if we applied them)
+		if (contentToRender === markdown_content) {
+			html = replacePositionMarkers(html, positionHighlights);
+		}
+		
+		// Apply term-based highlights to the HTML
 		termHighlights.forEach(highlight => {
 			if (highlight.term && highlight.term.trim()) {
 				const index = highlights.indexOf(highlight);
@@ -86,38 +98,61 @@
 			}
 		});
 		
-		// Apply position-based highlights to the HTML
-		// Convert position-based highlights to term-based for simplicity and reliability
+		processedHtml = html;
+	}
+
+	function applyPositionMarkers(content: string, positionHighlights: typeof highlights): string {
+		// Sort highlights by start position in descending order to avoid position shifts
+		const sortedHighlights = [...positionHighlights].sort((a, b) => (b.position![0] - a.position![0]));
+		
+		let result = content;
+		
+		sortedHighlights.forEach(highlight => {
+			const [start, end] = highlight.position!;
+			if (start >= 0 && end <= result.length && start < end) {
+				const targetText = result.substring(start, end);
+				const index = highlights.indexOf(highlight);
+				
+				// Create unique markers that won't interfere with markdown rendering
+				const startMarker = `|||POSHL_START_${index}|||`;
+				const endMarker = `|||POSHL_END_${index}|||`;
+				
+				result = result.substring(0, start) + startMarker + targetText + endMarker + result.substring(end);
+			}
+		});
+		
+		return result;
+	}
+
+	function replacePositionMarkers(html: string, positionHighlights: typeof highlights): string {
 		positionHighlights.forEach(highlight => {
 			const [start, end] = highlight.position!;
-			if (start >= 0 && end <= contentToRender.length && start < end) {
-				const targetText = contentToRender.substring(start, end);
+			if (start >= 0 && end <= markdown_content.length && start < end) {
+				const targetText = markdown_content.substring(start, end);
 				const color = highlight.color || '#e3f2fd';
 				const index = highlights.indexOf(highlight);
 				
-				// Escape the target text for regex and handle multiline/whitespace
-				const escapedText = escapeRegex(targetText).replace(/\s+/g, '\\s+');
+				const startMarker = `|||POSHL_START_${index}|||`;
+				const endMarker = `|||POSHL_END_${index}|||`;
 				
-				// Create a regex that only matches text content (not inside HTML tags)
-				const textRegex = new RegExp(`\\b${escapedText}\\b`, 'gi');
+				// Find and replace the markers with highlight spans
+				const markerRegex = new RegExp(`\\|\\|\\|POSHL_START_${index}\\|\\|\\|(.*?)\\|\\|\\|POSHL_END_${index}\\|\\|\\|`, 'g');
 				
-				// Apply the highlight - this will work like term-based highlighting
-				// but using the exact text from the position
-				html = html.replace(textRegex, (match: string) => {
+				html = html.replace(markerRegex, (match, content) => {
 					return `<span class="highlight-position" 
-								data-index="${index}" 
-								data-text="${encodeURIComponent(targetText)}"
-								style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
-								role="button" 
-								tabindex="0" 
-								aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
-							${match}
-						</span>`;
+						data-index="${index}" 
+						data-text="${encodeURIComponent(targetText)}"
+						style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+						role="button" 
+						tabindex="0" 
+						aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
+						${content}
+					</span>`;
 				});
 			}
 		});
 		
-		processedHtml = html;
+		return html;
 	}
 
 	async function processPanelContent() {

src/frontend/shared/MarkdownRenderer.svelte

@@ -38,14 +38,20 @@
 	}
 
 	async function processMarkdown() {
-		// First, parse the markdown to HTML
-		let html = await marked(markdown_content);
-		
 		// Separate position-based and term-based highlights
 		const positionHighlights = highlights.filter(h => h.position && h.position.length === 2);
 		const termHighlights = highlights.filter(h => h.term && h.term.trim());
 		
-		// Apply term-based highlights to the HTML first
+		// Apply position-based highlights first by inserting special markers
+		let processedMarkdown = applyPositionMarkers(markdown_content, positionHighlights);
+		
+		// Then parse the markdown to HTML
+		let html = await marked(processedMarkdown);
+		
+		// Replace position markers with actual highlight spans
+		html = replacePositionMarkers(html, positionHighlights);
+		
+		// Apply term-based highlights to the HTML
 		termHighlights.forEach(highlight => {
 			if (highlight.term && highlight.term.trim()) {
 				const index = highlights.indexOf(highlight);
@@ -65,8 +71,33 @@
 			}
 		});
 		
-		// Apply position-based highlights to the HTML
-		// Convert position-based highlights to term-based for simplicity and reliability
+		processedHtml = html;
+	}
+
+	function applyPositionMarkers(content: string, positionHighlights: typeof highlights): string {
+		// Sort highlights by start position in descending order to avoid position shifts
+		const sortedHighlights = [...positionHighlights].sort((a, b) => (b.position![0] - a.position![0]));
+		
+		let result = content;
+		
+		sortedHighlights.forEach(highlight => {
+			const [start, end] = highlight.position!;
+			if (start >= 0 && end <= result.length && start < end) {
+				const targetText = result.substring(start, end);
+				const index = highlights.indexOf(highlight);
+				
+				// Create unique markers that won't interfere with markdown rendering
+				const startMarker = `|||POSHL_START_${index}|||`;
+				const endMarker = `|||POSHL_END_${index}|||`;
+				
+				result = result.substring(0, start) + startMarker + targetText + endMarker + result.substring(end);
+			}
+		});
+		
+		return result;
+	}
+
+	function replacePositionMarkers(html: string, positionHighlights: typeof highlights): string {
 		positionHighlights.forEach(highlight => {
 			const [start, end] = highlight.position!;
 			if (start >= 0 && end <= markdown_content.length && start < end) {
@@ -74,29 +105,27 @@
 				const color = highlight.color || '#e3f2fd';
 				const index = highlights.indexOf(highlight);
 				
-				// Escape the target text for regex and handle multiline/whitespace
-				const escapedText = escapeRegex(targetText).replace(/\s+/g, '\\s+');
+				const startMarker = `|||POSHL_START_${index}|||`;
+				const endMarker = `|||POSHL_END_${index}|||`;
 				
-				// Create a regex that only matches text content (not inside HTML tags)
-				const textRegex = new RegExp(`\\b${escapedText}\\b`, 'gi');
+				// Find and replace the markers with highlight spans
+				const markerRegex = new RegExp(`\\|\\|\\|POSHL_START_${index}\\|\\|\\|(.*?)\\|\\|\\|POSHL_END_${index}\\|\\|\\|`, 'g');
 				
-				// Apply the highlight - this will work like term-based highlighting
-				// but using the exact text from the position
-				html = html.replace(textRegex, (match: string) => {
+				html = html.replace(markerRegex, (match, content) => {
 					return `<span class="highlight-position" 
-								data-index="${index}" 
-								data-text="${encodeURIComponent(targetText)}"
-								style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
-								role="button" 
-								tabindex="0" 
-								aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
-							${match}
-						</span>`;
+						data-index="${index}" 
+						data-text="${encodeURIComponent(targetText)}"
+						style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+						role="button" 
+						tabindex="0" 
+						aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
+						${content}
+					</span>`;
 				});
 			}
 		});
 		
-		processedHtml = html;
+		return html;
 	}
 
 	async function processPanelContent() {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_markdownlabel"
-version = "0.0.2"
+version = "0.0.3"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"