Markdown Pro 🐌 + Tailwind styles (free!)

showdownJS, highlightJS, and Tailwind Typography walk into a bar…

demo page (there is a link to the editor on that page.)

Markdown Pro is a plugin that produces beautifully styled documents based on your markdown documents.

I’ve been looking for a blogging platform for Bubble for a long time. I’ve tried the most horrible solutions. This is the lightest and easiest one ever.

16 Likes

This seems pretty cool, @rico.trevisan. Nice idea!

1 Like

@rico.trevisan, this looks pretty cool. A few clients have asked me for blogging websites. Looks like this plugin will help them. I will inform them.

1 Like
19 Likes

What API did you make this video with? :eyes:

1 Like

Both were make with CleanshotX. Fantastic app: without it, it feels like my computer is broken.

<ad time voice=“Internet Historian”>
Ad time! You can get it with a SetApp subscription and a bunch of other incredible little utility apps: like Paste, Xnapper, Sip, Bartender, Capto… and many more. If you want to throw me a coin, use my link.
<\ad>

Beautifull @rico.trevisan ! Well done :clap:

1 Like

OMG I’M DYING! That’s classic!

2 Likes

@rico.trevisan it seems github md emoji support such as :rice: is disabled. I tried to fork the plugin but got Message from GitHub: Not Found
Can you enable emoji support or share the plugin source to fork it?
You just need to add:
converter.setOption(‘emoji’, ‘true’);
Thanks

Thanks! Just published an update.

I’ll check the settings to see why it’s not letting you fork it.
Also, I’ll add a lot of the switches to the converter plugin. Right now everything is hardcoded.

Work in progress: dynamic styles for the code highlighting.

Current challenge: with the Tailwind Typography plugin the background doesn’t change…

Without it, it works but I don’t have any styles on the rest of the document.

1 Like

Just submitted a new BETA version (v2.0.0):

  • adds a ton of styles to code highlighting
  • moves code highlighting to a separate action

Take a look at the demo version’s editor to get a list of all available styles.

Code highlighting was moved to an independent action because it would not work in large documents (because of my shoddy implementation). As an action you can control when it runs so you can do your own shoddy implementation.

1 Like

@rico.trevisan is there a way to save the html output in the database?

HTML A

I tried the plugin and it’s displaying my text properly (for example it converted “# Title” into “

Title

”), but I couldn’t find a way to save this html in my database. The HTML A element above is sitting in a repeating group cell, so the content is gonna be different for each cell.

you should create input, set 1x1 pixel, copy all code on html and paste into this input. If you set on repeating group, the input 1x1 and html element should on the same group, then, u can set workflow copy/save database button and choose input’s value

Hi guys- Need some help with Numbered list + Bullet list response from chatgpt

Chatgpt returns in markdown, which this plugin works amazing for table,

but for numbered header and bullet list combination , its shows all as " 1 " instead.
Anyone has managed to Slove this? any solution I can use with markdown pro ?

Thanks in advance guys !!

1 Like

I’m guessing it’s seeing the line break and restarting the count. I’m not 100% sure how to fix it… I’ll take a look at the showdownJS page to see if there’s some option for that.

Could you share here the actual markdown that is not working? I want to make sure I test with the same data as you.

1 Like

Sure ! Thank u so much.

Sometimes Chatgpt returns results in a Number + Bullet List Combination something like the one below. Somehow on markdown in detects all the numbers as " 1 "

( Bullet List alone, or number list alone works fine )

## Cats ##

1. Maine Coon:
   - Large-sized domestic cat breed.
   - Known for their long and shaggy fur.
   - Gentle and friendly demeanor.
   - Excellent hunters.
   - Often have tufted ears and bushy tails.

2. Siamese:
   - Medium-sized breed with a sleek body.
   - Distinctive color points on their ears, face, paws, and tail.
   - An intelligent and vocal breed, known for their communication.
   - Active and playful.
   - Affectionate and social with their human companions.

3. Persian:
   - Known for their long and luxurious coat.
   - Flat face with round, expressive eyes.
   - Calm and laid-back temperament.
   - Require frequent grooming to maintain their coat.
   - Enjoy a relaxed and quiet indoor lifestyle.

4. Bengal:
   - Medium to large-sized breed with a wild appearance.
   - Striking coat patterns resembling that of a leopard.
   - Highly energetic and playful.
   - Intelligent and curious, requiring mental stimulation.
   - Known for their athletic build and love for water.

Release 2.2.0 - nested lists

solves @web4’s problem

Release 2.3.0 - options

you can now control which options you want on or off.

I’ve been seeing an issue with mobile for a while. It seems like the styling doesn’t come through correctly. Just checked the console today in Safari and I’m seeing this warning message:

cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: Installation - Tailwind CSS

Not sure if that has anything to do with it, but would really love to figure out why mobile (iOS) styling doesn’t come through the same as desktop. Updated to the latest version and issues are still present. Blatantly obvious missed styling is:

  • line-height
  • list styling
  • space between paragraphs

Device info:

  • iPhone 15 Pro
  • iOS 17 (current)
  • Mobile Safari

Hi @rico.trevisan - Amazing 5 star deployment. The nested list works perfectly ! Thanks for the high quality plugin ! Appreciate jumping in and making it work! :+1::+1::+1:

1 Like