Hi Bubblers.
I am requesting a blog post via API - the content is stored in markdown format.
Bubble supports BB Code, but not markdown - How can I get Bubble to understand and render Markdown?
I looked a bit via Google and searched in Bubble forum.
Via Google I always landed at a Bubble Plugin - a markdown editor - not quite what I was looking for.
When searching inside Bubble forum, I found users discussing BB code vs. Markdown, but no solution to render markdown as HTML.
Has someone from the community solved this?
Could I create some plugin/custom element that understands Markdown, if yes, how?
Anyone know if bubble considers switching from BBCode to Markdown, or creating a mardown element?
One option may be to see if you can add a header to your api call that asks for the response to be text/plain or html instead of markdown format.
Another option could be to create a plugin. In the plugin create an element called markdown converter. Under the fields section create a variable called input and set type to dynamic value and text. In your initialize function, create functions and global variables used to convert markdown to html. Make sure to start the naming of all your functions and variables needed to convert are led by instance.data. For example if I make a function called convertHTML(), you should call it instance.data.convertHTML(). This allows you to access it in the rest of the plugin. Then in your Update function, access the input by using properties.input. Here you can now use instance.data.convertHTML(properties.input). Above the functions there is a spot called Exposed States. You can pass values out of the plugin with these. If you call one HTML and give it a type of text then you can pass the value of the converted HTML.
let html = instance.data.convertHTML(properties.input)
instance.publishState("HTML", html)
Now in your app you can pass in the markdown as text into the input field of the plugin and then add an html element to your page and make its value “MyPlugin’s HTML”. As far as exactly how to have the functions convert it to HTML, I have no clu but I think you could slowly find ways to search for patterns like if your properties.input.includes(“Heading 2”) then you can use regex or other forms of javascript to find those and replace them with “<h2>” or [h2] depending if you want to use BBCode or HTML.
Thank you William.
There is no way to request the HTML via API
So it seems I have to get into creating a plugin. I will report back on how that goes, …
thanks!
I started on the plugin creation but honestly lack the basic understanding to get this to work.
Can you recommend a tutorial/video that explains this in more detail.
I understand the general blueprint, but lack the skills for stuff like create global variables, initialize function etc.
Hi William. This could work. I was able to send my markdown input to this API and get something back.
The problem I face now is that it is “JSON HTML” - it looks like this: My input: **bold text**
Getting back from markdown API: "\"<p><strong>bold text<\\/strong><\\/p>\""
and if I add this in an HTML element to show in my app it does not work, or partially,…
How can I turn this Json HTML into “normal” HTML? Without the extra // etc.?
thanks
rolf
Get the toolbox plugin. It has a Run Javascript action where you can pass in dynamic values, manipulate them, and then use Javascript to Bubble element to access the finished value. Here is a thread that looks like it somewhat explains the process:
Your javascript code would look like this:
let result = JSON.parse(dynamic value from api)
Then follow the steps to pass the result to your element in bubble.
