1. Go to the Bubble Plugin Marketplace.

2. Search for "Markdown Parser for AI Models".

3. Click "Install" to add the plugin to your application.

1. Open your Bubble application editor.

2. Navigate to the page where you want to display Markdown content.

3. In the left panel, find "Markdown Parser" under Visual Elements.

4. Drag and drop the element onto your page.

5. Resize the element according to your layout needs.

1. In the element properties panel, find the "Markdown Input" field.

2. Set the input source - this can be:
• Static text containing Markdown
• Dynamic data from your database
• A streaming response from an AI API (like OpenAI, Anthropic, etc.)
• User input from a text field

javascript
# Hello World
This is a **bold** text and this is *italic*.

## Code Example
```javascript
console.log("Hello!");
```

## Math Formula
The quadratic formula: \[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

1. Find the "Open links in a New Tab" checkbox in the element properties.

2. Enable this option (checked by default) to make all links in your Markdown content open in a new browser tab.

3. Disable if you want links to open in the same tab.

1. Find the "Recognize LaTeX/KaTeX Math Formulas" checkbox.

2. Enable this option to render LaTeX/KaTeX formulas.

3. Use \( formula \) for inline formulas.

4. Use \[ formula \] for block formulas on a new line.

• Inline: The area is \( A = \pi r^2 \)

• Block: \[ E = mc^2 \]

1. Find the "CSS Styling" field in the element properties.

2. Add your custom CSS rules to style the rendered HTML output.

3. CSS rules automatically scope to the plugin element only.

javascript
p { 
    font-size: 16px; 
    line-height: 1.6; 
    color: #333;
}
h1 { 
    color: #1a1a1a; 
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
h2 { 
    color: #2a2a2a; 
}
a { 
    color: #0066cc; 
    text-decoration: none;
}
a:hover { 
    text-decoration: underline;
}
code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
}
blockquote {
    border-left: 4px solid #ddd;
    padding-left: 16px;
    color: #666;
    margin: 16px 0;
}

1. Find the "Code Theme Name" field in the element properties.

2. Enter the name of a Highlight.js theme (default is stackoverflow-light).

3. Browse available themes at: https://highlightjs.org/examples.

• github - GitHub style (light)

• github-dark - GitHub style (dark)

• stackoverflow-light - Stack Overflow light theme

• stackoverflow-dark - Stack Overflow dark theme

• atom-one-light - Atom editor light theme

• atom-one-dark - Atom editor dark theme

• monokai - Classic Monokai theme

• dracula - Dracula theme

• vs - Visual Studio light

• vs2015 - Visual Studio dark

1. Set up an API Connector to your AI provider (OpenAI, Anthropic, etc.)

2. Create a page with an input field for user messages and a Markdown Parser element

3. Configure the Markdown Parser:
• Markdown Input: Set to the AI API response text
• Open links in a New Tab: Enable
• Code Theme Name: github-dark

4. When the user submits a message, trigger the API call

5. The Markdown Parser will automatically render the streaming response in real-time

1. Create a data type "Documentation" with a field "content" (text).

2. Add a Markdown Parser element to your page.

3. Configure the Markdown Parser:
• Markdown Input: Current Page Documentation's content
• Recognize LaTeX/KaTeX Math Formulas: Enable (if documentation includes formulas)
• CSS Styling: Add custom styles matching your app design

1. Add a Markdown Parser element to display code-heavy content.

2. Configure:
• Code Theme Name: monokai

3. In Workflows, add: "When Markdown Parser Code Copied".

4. Action: Show Alert → "Code copied to clipboard!"

• Bubble Plugin Page Update (Description).

• Bubble Plugin Page Update (Description).

• Bubble Plugin Page Update (Logo).

• Bubble Plugin Page Update (Demo preview link and Demo editor link).

• Marketing update (minor change).

• Moved libraries to Bubble.

• Fixed "code copy button" event trigger and updated theme information.

• Minor update (Marketing update).

• Fixed rendered element output and copy code functionality.

• Acquired by Zeroqode.

• Small bug fix.

• Improvements.

• Added minor improvements for streaming responses.

• Improvements.

• Documentation updates.

• Changed Math Formula Syntax to LaTex \(inline\( \[block\[ See demo page.

• Description updates.

• Added the option to parse LaTeX/KaTeX math formulas.

• Added feature to open links in new tabs.

• General optimizations.

• Improvements.

• Launch.

• Improvements for public launch.

• Patch.

• Patch.

• Added theme support for code blocks.

• Improved copy code design.

• Added trigger.

• Added copy button to code field.

• Added code highlighting.

• Update.

• Pre-launch.