# Markdown

> Markdown components for displaying markdown content with custom styles.

Web: https://vuemail.dev/components/markdown

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Simple markdown

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-markdown

### Vue

```vue
<script setup lang="ts">
import { Markdown } from '@vuemaildev/vuemail';

const markdown = `## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote`;
</script>

<template>
  <Markdown :source="markdown" />
</template>
```

## Markdown with container styles

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/markdown-with-container-styles

### Vue

```vue
<script setup lang="ts">
import { Markdown } from '@vuemaildev/vuemail';

const markdown = `## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote`;
</script>

<template>
  <Markdown
    :source="markdown"
    :markdown-container-styles="{ marginBlock: '30px' }"
  />
</template>
```

## Markdown with custom styles

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/markdown-with-custom-styles

### Vue

```vue
<script setup lang="ts">
import { Markdown } from '@vuemaildev/vuemail';

const markdown = `## Hello, this is my email template

This is meant to be rendered as a paragraph. There is no way around it.

### Another heading that I wrote`;
</script>

<template>
  <Markdown
    :source="markdown"
    :markdown-custom-styles="{
      h1: { color: 'red' },
      h2: { color: 'blue' },
      codeInline: { background: 'grey' },
    }"
  />
</template>
```