Rich Text Element alternative — Markdown converter template, no plugins

Get it on the marketplace: :point_right: Markdown converter blog Template | Bubble – $29👈






This is a template that produces beautiful documentation pages using Markdown: the simple and lightweight markup language.




Demo

Text

CleanShot 2022-07-22 at 12.01.57

Images

CleanShot 2022-07-22 at 12.02.31

Code

CleanShot 2022-07-22 at 12.05.18

Take it for a spin

Minimalist blog template

What’s included?

Native Markdown engine

A repeating group that auto-magically transforms a block of text into beautiful page. Hundreds of hours have gone into researching, experimenting, and testing. It started with a ton of bloat and excess stuff which I’ve worked tirelessly, chiseling down to only the essentials.

Styled blocks

A bunch of blocks to get you started:

  • Text blocks: with markdown links and bold
  • Headers: H1, H2, H3, and H4.
  • Images: 2 types of image layouts: coast-to-coast + side-to-side image & text.
  • Code highlighting with highlightJS
  • Extras: Pull out quote and note.
  • There’s also a horizontal line.

Code highlighting

Slap a code block and the code will be automatically highlighted using highlightJS’s library.

A blogging template

A basic but ready to use blogging template that will let you express your thoughts in a beautiful and visually rich matter.

It’s a minimalistic blog template that focuses on your content. Inspired by Tailwind’s 2.0 blog format.


FAQ

Is it responsive?

Ugh, as if we even have time for that non-responsive non-sense. Of course it’s responsive. Everything is designed with the smallest breakpoint in mind, 320px.

Does it use new editor?

… Wait!? That was a serious question!?
By golly, YES!

Can I integrate it into my existing app?

Yes. It should be fairly straight forward

  1. copy the option set
  2. copy the Repeating Group
  3. Set the source of that RG to any text - static text, a database item, or an input
  4. optional: Add highlightJS header snippet + workflow + html element

Is it easy to change styles?

Yes.

What plugins will I need?

None.
If you want to give that live editing feel - like the elements above - add the fantastic 1T-Input watcher.

Does it cover all of Markdown?

Not everything. Yet.

Do you offer support?

Yes. I’ve been doing it for free for years on the forum or Twitter.

What’s under the hood?

The magic is regex and repeating groups. Nothing weird nor obscure. Well, what? Is regex an obscure art form? :man_shrugging:

Requirements

  • You are fed up with the Rich Text Element.
  • Frustrated you can’t add pictures between your text easily.
  • You would like finer control of the visual styles on your blog.
  • You’ve given up blogging on Bubble.
  • You’re an astute Bubbler. This is not your first rodeo, you can now stray off the beaten path.
  • You know and like Markdown.
4 Likes

Got a couple of updates for this template.

Release Notes

Simplification

Merged Content

Removed the Content data (this was a relic of a previous POC). This makes it simpler to use and to port this to your existing Bubble app.

Removed Image from Article

You can still add images, but it doesn’t have to be a field in the Article body type.

Renamed the regex option set

It was named _block-type, now it’s _regex. It more clearly shows what it actually does.
Renamed the regex field to pattern.
Updated some patterns to most items.

Blocks

Added H4

You can now have an H4 block on your article.

Body

URL links are now more robust. They used to conflict if there were 2 links in one paragraph. Not no moar!


Roadmap

Some of the things I’m thinking about doing.

SEO Improvements

  • Add Author
  • Add Published status

Editor Improvements

  • Create side-by-side view (like this forum’s editor)

Release a stand-alone engine

It might be more useful to have the engine separate from the blog so that customers can drop that into their existing projects.


Thanks for the feedback, @Vincent_London .

1 Like

What’s New

2022-08-15

Easier integration

  • Added a copy of the engine without styles for easy integration into your own app.
  • Here’s a video tutorial on how to integrate into your existing app.

Improvements & fixes

  • Removed dependency on Iconify plugin in the core engine.
  • Reduced the engine size by removing one of the images elements from the RG.
  • Fixed YouTube video not displaying properly.
  • Article page now uses the reusable engine (not a standalone RG).

2022-08-20

moved to App Shell format

  • each panel is a different reusable which is easier to maintain and expand
  • see this video series for more info

there are 3 types of users now

  • admin: editor + can create new editors + admins
  • editor: writer + can publish and reorder items.
  • writer: can create articles and modify them

Editor

You can now see both the original and the converted article on the same page.

2022-09-26

Tables!

You can now have tables on your document!

2022-09-30

iframes!

You can now add iframes. That means you can easily embed Vimeo videos, Arcade tutorials, and much more…

CleanShot 2022-09-30 at 22.45.59

Both the building block and the blog template are updated.

Thanks @chrisstrobl for the suggestion / challenge.

Update: the templates - the blog and the converter - now work on free plans.
Thanks for bug report, @amichai .