Markdown Pro 🐌 + Tailwind styles (free!)

For some reason, the markdown seems to break for some code blocks.

Here’s the markdown

Anyone facing similar issues? Whenever I paste the markdown even here in the forum, it gets parsed correctly.

Interesting.

Can you run the code highlighting manually after you paste the text?

Sorry, what do you mean? This is what I have set up:

There’s an action that you can run to actually do the code highlighting. I moved it to an explicit action – instead of an auto-run action – because it was flooding the system.

Since then I’ve learned about throttling and debouncing – I’ll implement this on this plugin when I get time to it.

Right. So your suggestion is for me run this via workflows on page load?

It might be best to use this trigger:

Hi,

My paragraphs are squeezed to the left. I don’t understand what in the styling I need to change to undo that:

I tried a bunch of things like changing width, margin, padding, container… Maybe I did it wrong. I just can’t figure out where the width comes from.

Are you using the Tailwind element to style it? I think you can override the max-width.

(Tailwind has some pretty strong opinions on styling)

If the person who left this review reads this thread (yeah, I know, 0% chance), it would be useful to know how you came to this conclusion. Could you share your setup? Maybe we could help you troubleshoot it.

@rico.trevisan have you looked into the mobile issue yet? Mentioned it above, but didn’t see a response.

@dustinstout I checked with the Tailwind CSS and it’s never left beta and they strongly state that this is only for dev purposes. I’m currently looking at alternatives:

  1. remove it and inform users to use CSS instead – not the nicest message
  2. wrap a css stylesheet in a Bubble element – it works ok, but might not be as feature-rich
  3. find an alternative like UnoCSS.

I’m examining option 3 at the moment.

Hi @rico.trevisan,

I like your plugin. I got a question though. How can I avoid that the output misses spaces like in the screenshot?

image

When markdown / text is shown in a regular Text element, there is no problem though.

Thanks!

Yes we use the Tailwind element. The solution was to add the style="max-width: unset in our div class:

<div class="prose prose-slate prose-headings:text-sky-400 font-sans prose-headings:font-light prose-h1:text-3xl" style="max-width: unset">

We are trying to get the table of content links to work.

On your demo page the url is like thishttps://markdown-pro.bubbleapps.io/version-test/#tailwindisinbeta

On our page, the urls is like https://my.app.com/pagename/slug-of-article-here

We tried adding the #headingstring like this:

https://my.app.com/pagename/slug-of-article-here#headingstring
or
https://my.app.com/pagename/slug-of-article-here/#headingstring

But neither cause the page to scroll to the heading.

What’s up with that?

PS: I had to edit the example urls into code.

This is awesome.
Can you make this work with Latex math formulas? For example, showing this (Gaussian distribution):
$f(x) = \frac{1}{\sigma \sqrt{2\pi} } e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$

Maybe? I saw that there is this an extension that might do that: showdown-katex

Take a look at that extension and see if that’s what you want.

I’m sorry. I’m new to Bubble, not sure how to use that extension.

I added your plugin, and followed the direction. But currently if there are Latex formulas in my markdown body, they will not show correctly…

[off-topic]
I know this is off-topic, but I need to understand…
Is this some kind of mock-up or did you really put that all that effort for the meme?

Either way, that’s perfectly executed!
If that’s a mockup, I need it now!
If it’s not, I should be. Because I need it. Now!

1 Like

:joy:

I put all that effort into it. That’s the kind of energy a praise from Keith deserves.

2 Likes

Does this plugin only work with inputs?

I’m having trouble with sending data to an input with a workflow that has to do a ready check (ChatGPT assistant API). Any suggestions?