Components

Markdown

Render markdown content in your email templates with customizable styling.

Render markdown content in your email templates with full styling control. Perfect for content-rich emails, newsletters, and documentation-style communications.

Installation

The EMarkdown component is automatically available when you install nuxt-email-renderer. No additional imports needed.

Getting Started

Add markdown content to your emails:

emails/NewsletterEmail.vue

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EMarkdown source="# Welcome to our Newsletter

This is a **bold** announcement with *italic* text.

## Features
- Easy to use
- Fully customizable
- Email client compatible" />
      </EContainer>
    </EBody>
  </EHtml>
</template>

Using Slot Content

You can also pass markdown content through the default slot:

emails/BlogPost.vue

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EMarkdown>
# Blog Post Title

This is the **introduction** to our blog post.

## Main Content

Here's some content with [a link](https://example.com) and `inline code`.

> This is a blockquote with important information.
        </EMarkdown>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Props

Prop	Type	Default	Description
`source`	`string`	`undefined`	Markdown content to render. Alternative to using slot content.
`markdownCustomStyles`	`StylesType`	`undefined`	Custom styles for markdown elements.
`markdownContainerStyles`	`CSSProperties`	`undefined`	Styles for the container div wrapping the markdown content.

Custom Styling

Override default styles for specific markdown elements:

emails/StyledMarkdown.vue

<script setup>
const customStyles = {
  h1: {
    color: '#2563eb',
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '1rem'
  },
  h2: {
    color: '#1f2937',
    fontSize: '1.5rem',
    fontWeight: '600',
    marginTop: '2rem',
    marginBottom: '0.5rem'
  },
  p: {
    color: '#374151',
    lineHeight: '1.6',
    marginBottom: '1rem'
  },
  blockQuote: {
    background: '#f3f4f6',
    borderLeft: '4px solid #2563eb',
    padding: '1rem',
    margin: '1rem 0',
    fontStyle: 'italic'
  },
  codeBlock: {
    background: '#1f2937',
    color: '#f9fafb',
    padding: '1rem',
    borderRadius: '0.5rem',
    fontFamily: 'Monaco, Consolas, monospace'
  },
  codeInline: {
    background: '#f3f4f6',
    color: '#dc2626',
    padding: '0.25rem 0.5rem',
    borderRadius: '0.25rem',
    fontFamily: 'Monaco, Consolas, monospace'
  },
  link: {
    color: '#2563eb',
    textDecoration: 'underline'
  }
}

const containerStyles = {
  padding: '2rem',
  fontFamily: 'system-ui, sans-serif',
  maxWidth: '600px'
}
</script>

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EMarkdown 
          :markdownCustomStyles="customStyles"
          :markdownContainerStyles="containerStyles"
          source="# Custom Styled Content

This content uses **custom styling** for all elements." />
      </EContainer>
    </EBody>
  </EHtml>
</template>

Supported Markdown Elements

The EMarkdown component supports all standard markdown elements:

Text Formatting

Bold text (**bold** or __bold__)
Italic text (*italic* or _italic_)
~~Strikethrough~~ (~~strikethrough~~)
Inline code (`code`)

Headings

H1 through H6 (# H1, ## H2, etc.)

Lists

Ordered lists (1. Item)
Unordered lists (- Item or * Item)

Links and Images

Links ([text](url))
Images (![alt](url))

Code Blocks

```language
code block content
```

Blockquotes

> This is a blockquote
> - Author

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

Horizontal Rules

---

Available Style Properties

The StylesType interface includes styles for:

Element	Description
`h1`, `h2`, `h3`, `h4`, `h5`, `h6`	Heading elements
`p`	Paragraph text
`bold`, `italic`	Text formatting
`strikethrough`	Strikethrough text
`link`	Hyperlinks
`codeBlock`, `codeInline`	Code formatting
`blockQuote`	Blockquotes
`ul`, `ol`, `li`	List elements
`table`, `thead`, `tbody`, `tr`, `th`, `td`	Table elements
`image`	Images
`hr`	Horizontal rules
`br`	Line breaks

Best Practices

Content structure: Use semantic markdown structure for better accessibility and rendering.

Email client compatibility: Test complex markdown elements across different email clients.

Performance: For large markdown content, consider pre-processing or chunking content.

Email Client Support

✅ Gmail (Desktop & Mobile)
✅ Apple Mail
✅ Outlook 2016+ (basic markdown elements)
✅ Yahoo Mail
✅ Thunderbird
✅ Samsung Email
✅ HEY

Client-Specific Notes

Outlook: Limited support for advanced CSS. Stick to basic formatting for maximum compatibility.
Gmail: Excellent support for most markdown elements and styling.
Mobile clients: Ensure adequate font sizes and touch-friendly link spacing.

Advanced Usage

Dynamic Content

emails/DynamicContent.vue

<script setup>
const blogPost = {
  title: 'Latest Blog Post',
  content: `## Introduction

This is a **dynamic** blog post loaded from your CMS.

### Key Points
- Point one
- Point two
- Point three

[Read more](https://example.com/blog/post)`
}

const brandStyles = {
  h2: { color: '#your-brand-color' },
  link: { color: '#your-brand-color' }
}
</script>

<template>
  <EHtml>
    <EBody>
      <EContainer>
        <EMarkdown 
          :source="`# ${blogPost.title}\n\n${blogPost.content}`"
          :markdownCustomStyles="brandStyles" />
      </EContainer>
    </EBody>
  </EHtml>
</template>

emails/Newsletter.vue

<script setup>
const newsletterContent = `# Weekly Newsletter

## This Week's Highlights

We've got some **exciting updates** to share with you!

### New Features
1. Enhanced markdown support
2. Better email rendering
3. Improved accessibility

> "The best newsletters combine great content with excellent presentation." - Newsletter Expert

[View in browser](https://example.com/newsletter) | [Unsubscribe](https://example.com/unsubscribe)`

const newsletterStyles = {
  h1: { 
    textAlign: 'center',
    color: '#2563eb',
    borderBottom: '2px solid #e5e7eb',
    paddingBottom: '1rem'
  },
  blockQuote: {
    background: '#eff6ff',
    borderLeft: '4px solid #2563eb',
    fontStyle: 'italic',
    textAlign: 'center'
  }
}
</script>

<template>
  <EHtml>
    <EBody>
      <EContainer style="max-width: 600px; margin: 0 auto;">
        <EMarkdown 
          :source="newsletterContent"
          :markdownCustomStyles="newsletterStyles" />
      </EContainer>
    </EBody>
  </EHtml>
</template>

EText - For simple text content
ECodeBlock - For dedicated code blocks
ELink - For standalone links
EHeading - For individual headings

Edit this pageorReport an issue

Link

Create clickable text links in your email templates.

Preview

A component for defining the preview text that appears in email client inboxes.