# Markdown Embed

<div align="left"><figure><img src="https://330243581-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTep4EGj6hSC54ozHujyK%2Fuploads%2Fgit-blob-b3bfd102f6fe71aad609dd12462359292700747a%2Fmarkdown-embed.png?alt=media" alt="Markdown Embed Component" width="519"><figcaption></figcaption></figure></div>

## Why Markdown Embed is needed

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.

## How to use Markdown Embed

Markdown Embed is located in Components > Data.

### 1. Add Markdown

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.

<figure><img src="https://330243581-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTep4EGj6hSC54ozHujyK%2Fuploads%2Fgit-blob-1665afe4117b54de5e114f9624c1704330b8f79c%2Fmarkdown-embed-code.png?alt=media" alt="Markdown bound to Markdown Embed component"><figcaption><p>CMS data bound to Markdown Embed Code</p></figcaption></figure>

### 2. Style

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.

<figure><img src="https://330243581-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTep4EGj6hSC54ozHujyK%2Fuploads%2Fgit-blob-15c09a249411696b7c4052bb31abdfe6c7c6b6f9%2Fmarkdown-embed-style.png?alt=media" alt="Markdown Embed List styled"><figcaption><p>List selected and styled</p></figcaption></figure>

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.

## Image handling

Webstudio does NOT optimize images contained in the markup.

On the other hand, images bound to the [Image Component](https://docs.webstudio.is/university/core-components/image) are [optimized by default](https://docs.webstudio.is/university/image#optimize).

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.

## Similar components

{% content-ref url="html-embed" %}
[html-embed](https://docs.webstudio.is/university/core-components/html-embed)
{% endcontent-ref %}

{% content-ref url="content-embed" %}
[content-embed](https://docs.webstudio.is/university/core-components/content-embed)
{% endcontent-ref %}

## Related

* [Content Embed](https://docs.webstudio.is/university/core-components/content-embed) – Render rich text/HTML
* [HTML Embed](https://docs.webstudio.is/university/core-components/html-embed) – Custom HTML code
* [Collection](https://docs.webstudio.is/university/core-components/collection) – Loop through CMS data