[01]Tutorial

How can openAI's markdown text be converted into HTML text with CSS style without code in Bubble? (Without Paid Plugin)

How can open AI's markdown text be converted to HTML with style without code in a bubble?

Published
Read time
3 min
Sections
1
Type
tutorial
markdown-to-html--cover
The model answers in markdown and your user reads the asterisks.

As you can see in the picture above, Open AI responds in markdown text format. This format is not best for the User Experience point of view. Here is how I made it look beautiful without a paid plugin and code.

Step 1: Install this free plugin

Step 2: Setup in Bubble Page to convert from Markdown text format

  • makrdown to html element

    As you can see in the above image, there is an element called ‘🤌md-to-html’ that you will find on the design tab after installation of the plugin.

  • Then set the element as shown below:

    Bubble.io Appearance panel for the md-to-html element with 'md to convert' wired to the Open AI Response, style 'Base16 / Brogrammer', and tables, line breaks, image dimensions, and emoji toggles on

    Make sure you provide Open AI’s response in ‘md to convert’ input of element.

  • Select a pre-defined style as shown in image below:

    Bubble.io style dropdown open on the md-to-html element listing pre-defined code highlighting themes such as Monokai, Night Owl, Nord, and Obsidian

    Step 3: Setup in bubble page to show converted content

  • Add an HTML Element on the page as a visual output of Open AI’s response where the User will see the output of their prompt.

    Bubble.io Visual Elements panel showing the standard HTML element highlighted alongside the installed md-to-html plugin element, ready to drop on the page as a visual output container

    Here is how you set the output:

Bubble.io HTML Output element Appearance panel with the body bound to the md-to-html element's html value and the 'Display as an iFrame' option enabled so the converted content renders sandboxed

Now run this on your Page.
Here are the overall steps we followed to achieve this:

  • Receive Open AI output

  • Pass that output into markdown text to the HTML element

  • show that HTML converted text into HTML output.

    Hope this will reduce your efforts!

Tagged