> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Markdown

> A Markdown component that converts markdown to valid Vuemail template code

## Install

Install component from your command line.

```sh npm theme={null}
npm install @vuemaildev/vuemail -E
```

```sh yarn theme={null}
yarn add @vuemaildev/vuemail -E
```

```sh pnpm theme={null}
pnpm add @vuemaildev/vuemail -E
```

## Getting started

Add the component to your email template. Include styles where needed.

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

const markdown = `# Hello, World!

This is a ~~strikethrough~~`;
</script>

<template>
  <Html lang="en" dir="ltr">
    <Markdown
      :markdown-custom-styles="{
        h1: { color: 'red' },
        h2: { color: 'blue' },
        codeInline: { background: 'grey' },
      }"
      :markdown-container-styles="{
        padding: '12px',
        border: 'solid 1px black',
      }"
      :source="markdown"
    />

    <!-- OR -->

    <Markdown>{{ markdown }}</Markdown>
  </Html>
</template>
```

> [!WARNING]
>
> Don't write markdown straight into the template, as in `<Markdown># Hello</Markdown>`: Vue collapses
> the whitespace and line breaks of templates, which markdown depends on. Pass it with the `source` prop,
> or interpolate a string into the default slot.

## Props

**source** `string`

Contains the markdown content that will be rendered in the email template. When it's not given,
the text of the default slot is used instead.

**markdown-container-styles** `object` (default: \{})

Provide custom styles for the containing div that wraps the markdown content

**markdown-custom-styles** `object` (default: \{})

Provide custom styles for the corresponding html element (p, h1, h2, etc.)

> [!NOTE]
>
> Note: Passing a custom style for an element overrides the default styles.

## Support

All components were tested using the most popular email clients.

![Gmail](https://vuemail.dev/static/icons/gmail.svg)

Gmail

![Apple Mail](https://vuemail.dev/static/icons/apple-mail.svg)

Apple Mail

![Outlook](https://vuemail.dev/static/icons/outlook.svg)

Outlook

![Yahoo! Mail](https://vuemail.dev/static/icons/yahoo-mail.svg)

Yahoo! Mail

![HEY](https://vuemail.dev/static/icons/hey.svg)

HEY

![Superhuman](https://vuemail.dev/static/icons/superhuman.svg)

Superhuman


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.