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)
- It appears to work only when a recognized protocol like
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.
