🪜Markdown Embed
Markdown Embed converts Markdown to HTML and enables styling it.
Last updated
Was this helpful?
Markdown Embed converts Markdown to HTML and enables styling it.
Last updated
Was this helpful?
Some APIs (or users) provide rich text in Markdown format, which can't be rendered in the web browser. Markdown Embed converts Markdown to HTML and enables applying styles to the various tags contained within HTML.
Markdown Embed is located in Components > Data.
Once added to the canvas, the right panel will show a Code field. You can either add Markdown directly to it or, more commonly, bind Markdown to it from a Resource.
In the Navigator, Markdown Embed has various HTML tags nested. Expand Markdown Embed, and you’ll see tags such as Heading 1, Link, Image, and much more.
Styles applied to each of these tags will apply to all occurrences of that tag within the Markdown Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border.
Webstudio does NOT optimize images contained in the markup.
On the other hand, images bound to the Image Component are optimized by default.
The difference is in markup, we are not mapping every element to a Webstudio Component; rather, the element is served as-is with the exception of your custom styles applied to it.
