Markdown ❺
Embed markdown content, including tables and more.
This feature brings basic Markdown capabilities into Webflow projects.
Use Cases
Small table generation, in an easily-editable fashion
Small tables within blogs and other rich text content
Component property text formatting, such as bolding, italics, and highlighting within a property text string
Usage Notes
Rendering a block of Markdown
Use the <markdown>
or <md>
element inside of any HTML Embed.
Here's an example of an H1 followed by a table;
Works in standalone embed elements or as an embed within a rich text block
In rich text blocks, works with both static rich text blocks, and CMS-bound RTBs
Rendering an individual element as Markdown
In some cases, you may want only a small amount of Markdown rendered, for inline styling.
This is very useful for components, when you are binding to a plain text component property. Basic formatting like bold, underline, strikethrough and highlighting can be expressed as markdown and rendered properly into your page.
In this case, you have a two options that do not require embeds.
Create a DIV, heading, or other element, and assign the custom attribute of
wfu-markdown
to that element ( no value is needed ).Create a custom element of type
markdown
ormd
and put your content within it as text.
Both approaches work in components, and support binding to component properties. You can then use markdown directly in the component property itself.
What Markdown Syntax is Supported?
SA5 supports;
All Markdown that Showdown supports natively
Plus table syntax using Showdown's table extensions
Plus a custom SA5 highlighting extension, which uses a popular
==
syntax that is widely recognized.
See the markdown
Other markdown-generated styling can be similarly targeted.
Italics
*Text*
em
Bold
**Text**
strong
Highlighting
==Text==
mark
Strikethrough
~~Text~~
del
Styling Your Markdown Content
Customize styling using custom CSS in an embed, like this;
This targets <mark>
elements which are generated with the ==highlighting==
markdown syntax.
Other markdown-generated styling can be similarly targeted.
Italics
*Text*
em
[theme=default] em
Bold
**Text**
strong
[theme=default] strong
Highlighting
==Text==
mark
[theme=default] mark
Strikethrough
~~Text~~
del
[theme=default] del
Themes
Markdown can be themed by specifying a theme attribute, e.g.;
See the Themes page for more details.
Getting Started ( NOCODE )
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Apply the custom attributes as desired
See above for details.
Technical Notes & Credits
Uses Showdown.js for the Markdown conversion
In your live site, the markdown elements are initially hidden until they are processed. Users may see an empty space briefly before the markdown conversion happens.
For very large tables ( which this is not suited for ) that may result in a content layout shift.
Last updated
Was this helpful?