Forum Documentation Showcase Pricing Learn more

🔥 Markdown Text Editor - Add the power of Markdown to your app

#1

Announcing the Markdown Text Editor plugin :sparkles:

:star: Update

Markdown Plus has been renamed to Markdown Text Editor to better reflect the functionality and direction of this plugin going forward.

The newest version of this plugin is now available, featuring a Markdown Editor with a side-by-side preview and toolbar. Click here for the demo app!

The editor features:

  • A side-by-side preview with scroll syncing
  • A toolbar with commonly used formatting options
  • Built in shortcuts to apply Markdown formatting
  • A responsive design that hides the side-by-side preview when the view becomes too narrow to maintain a good user experience

Editor Keyboard Shortcuts

Shortcut (Windows / Linux) Shortcut (macOS) Action
Ctrl-’ Cmd-’ “toggleBlockquote”
Ctrl-B Cmd-B “toggleBold”
Ctrl-E Cmd-E “cleanBlock”
Ctrl-H Cmd-H “toggleHeadingSmaller”
Ctrl-I Cmd-I “toggleItalic”
Ctrl-K Cmd-K “drawLink”
Ctrl-L Cmd-L “toggleUnorderedList”
Ctrl-P Cmd-P “togglePreview”
Ctrl-Alt-C Cmd-Alt-C “toggleCodeBlock”
Ctrl-Alt-I Cmd-Alt-I “drawImage”
Ctrl-Alt-L Cmd-Alt-L “toggleOrderedList”
Shift-Ctrl-H Shift-Cmd-H “toggleHeadingBigger”

Demo Preview

The plugin also comes with a visual element you can place in your Bubble app that display the contents of the editor with the proper formatting you would see in side-by-side editor preview.

:bulb: Did you know?

The Bubble forums use Markdown and this post that you’re reading right now is written in the same syntax that Markdown Plus uses!

This plugin features Markdown styling the same as Github’s Markdown styling. In addition, the plugin features a resizable and responsive design. :grinning:

What’s next?

Going forward, my plan is to continue working on this plugin to create more value for you.

I do have my own ideas for how to continue building out functionality, but I want to ensure my efforts are aligned with what the Bubble community is needing and how this plugin can help solve your problems.

With that in mind, I would love to hear your thoughts, feedback, and suggestions.

If you have any questions, feel free to shoot me a message or reply in this thread below. :grin:

Check out the plugin :point_down:

Here’s the plugin page: Markdown Text Editor

Here’s a demo app: Markdown Text Editor Demo App

8 Likes

Markdown in Bubble
#2

Great work!

IMHO, the benchmark for all markdown editors is the Ghost blog platform (https://ghost.org/): a side by side view of MK to HTML, inline controls and great keyboard shortcuts.

0 Likes

#3

Thank you!

An editor of some sort is definitely planned and I appreciate you showing me the Ghost platform. I’ll definitely check it out :smile:

1 Like

#4

Release 2.0.0 :star_struck:

Just released the latest version of this plugin!

Check out the new and improved demo app here: Markdown Editor demo app

Preview

Change log

  • Now includes a Markdown Editor, featuring:

    • Side-by-side preview with scroll syncing
    • Toolbar with commonly used formatting options
    • Keyboard shortcuts
    • Responsive design
  • Plugin name changed to reflect functionality and direction going forward

Editor Keyboard Shortcuts

Shortcut (Windows / Linux) Shortcut (macOS) Action
Ctrl-’ Cmd-’ “toggleBlockquote”
Ctrl-B Cmd-B “toggleBold”
Ctrl-E Cmd-E “cleanBlock”
Ctrl-H Cmd-H “toggleHeadingSmaller”
Ctrl-I Cmd-I “toggleItalic”
Ctrl-K Cmd-K “drawLink”
Ctrl-L Cmd-L “toggleUnorderedList”
Ctrl-P Cmd-P “togglePreview”
Ctrl-Alt-C Cmd-Alt-C “toggleCodeBlock”
Ctrl-Alt-I Cmd-Alt-I “drawImage”
Ctrl-Alt-L Cmd-Alt-L “toggleOrderedList”
Shift-Ctrl-H Shift-Cmd-H “toggleHeadingBigger”
2 Likes