Using Markdown and HTML Tables in Webflow

I recently needed the ability to put small ad-hoc HTML tables in my CMS Richtext content, which is not natively supported in Webflow. Since I needed the ability for clients to edit these tables without being confronted with full HTML markup, I ended up using Markdown chunks inside of my Richtext content.

This approach ended up being much slicker than I expected- I’m very please with the results and the versatility it gives me. Here’s a video with the implementation details.

2 Likes

@memetican - Mike, thanks for sharing. I am sure some will find this very useful. I plan on testing soon.

1 Like

Thanks Jeff, keen to know what you think. The solution ended up very elegant- my biggest reflection is regarding whether the <markdown> element wrapper is necessary.

It gives me more placement versatility for my MD chunks, but for most users, I think that they’d only be using MD inside of richtext elements, and may use richtext embeds exclusively for MD content.

In that case, I can locate the MD with .w-richtext .w-embed and eliminated the markup requirement. I’ll do some testing with showdown-js as well to see if it can handle mixed MD/HTML content. That would be even slicker.

Hi @memetican that is partially true but in RTE is option add Embed where you can create your table with standard HTML tags. I now that is not Ideal either but IMO there is no need introducing JS library for such simple task.Your solution is valid and there are also another ways or libraries.

here is link to Read Only and Live example I have done jus now to prove it.

But I agree that creating table in MD may be simpler for client who has no dev knowledge. :slight_smile:
thanks for sharing, great job

Hey Stan, good observation.

For small ad-hoc tables, the problem is that my clients aren’t familiar with HTML. I could require them to use other online table-gen tools, and copy-paste, but Markdown offers the perfect balance between readability and editability.

For large tables, I have a different solution entirely that sources from a Google Sheet and automates the HTML translation into the page. It requires a bit more setup, but well worth it - I wouldn’t want clients debugging large chunks of MD.

Hey @memetican,
I just tried it, it works super well, thanks for sharing this, it’s an amazing idea!

1 Like