Markdown Support in Rich Text Blocks

17-Dec-2023 Webflow made an exciting announcement regarding markdown support, however it was a bit vague on what the new capabilities actually are.

From our initial testing, "markdown support" affects the content-entry process only and involves two parts;

• Keyboard shortcuts that can be used while you are editing rich text, that save you a few clicks in your formatting process.
• Paste operation support. When you paste content into an RTB, Webflow detects Markdown formatting and if it finds any, it will process your content as Markdown. ( See bugs / limitations below for more )

What can you do? Is it actually useful?

Well, yes it is. For some people, it's more natural to type markdown e.g. **text** than it is to type "text", highlight it, and click the bold option on the menu.

• Quickly bold something by typing **text**
• Quickly italicise something by typing *text* or _text_
• Links can be created, but the syntax is already quite verbose as [link text](url)
  • It appears to work only when a recognized protocol like https: is used in the url, which is a bit unfortunate - you cannot quickly create a relative link like [foo](/about)

When you're on a new blank line, you can use markdown to create block-level elements too.

In each example here, you must be at the start of a new line, enter the markdown characters and then hit the spacebar. The RTE will be immediately transformed to the type you've indicated, and you can then begin typing your content.

• Headings;
  • # H1
  • ## H2
  • ### H3, etc.
• Markdown Support
• - creates an Unordered list. This has been a longstanding feature.
• 1. creates an Ordered list
• Blockquotes can be created by typing a >

Webflow did it right the first time here, delivering this feature in both the designer and the editor, and on both static RTB's and CMS-bound RTB's.

Limitations & Bugs

Is all markdown supported?

No, you can not use any Markdown styling that is not already supported by Webflow's RTB, including...

• No inline code `code`
• No tables support
• No strikethrough support
• No code block support [ yet ]. Webflow just recently announced a new Code Block element, and we're hopeful it will become an RTE soon. If so, that means ``` should work.
• No horizontal rules
• No task lists, e.g. [x]

Pasting markdown

Webflow has a strongly modal "switch" in how it handles paste operations. As of 18-Dec-2023, the algo loosely appears to be;

• User pastes
• Webflow seeks to detect markdown like *word*
• If it detects any markdown, it will use the plaintext clipboard format, and process it as markdown
• Else, if you have an HTML clipboard format, it will process that into RTE-compatible HTML
• Else, it will paste plaintext

The problem is that it does not give you a choice. if the content you are copying triggers the markdown detector, you will lose all HTML formatting. Likely triggers are asterisks *, underscores _, and at the start of lines, characters like >, -, and 1. may be identified as markdown.

We don't like pop-ups, but there needs to be a way for users to identify what they're pasting, when Webflow cannot detect properly. Ideally, we think this should be done with a key combination, perhaps CTRL+SHIFT+V means "Paste as HTML".

Notes

• If you put spaces between your content and your markdown it generally will not register as markdown.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍