Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
93 lines
3.6 KiB
Plaintext
93 lines
3.6 KiB
Plaintext
|
|
|
|
<div align="center"><strong>@react-email/markdown</strong></div>
|
|
<div align="center">Convert Markdown to valid React Email template code.</div>
|
|
<br />
|
|
<div align="center">
|
|
<a href="https://react.email">Website</a>
|
|
<span> · </span>
|
|
<a href="https://react.email">Documentation</a>
|
|
<span> · </span>
|
|
<a href="https://react.email">Twitter</a>
|
|
</div>
|
|
|
|
## Install
|
|
|
|
Install component from your command line.
|
|
|
|
#### With yarn
|
|
|
|
```sh
|
|
yarn add @react-email/markdown -E
|
|
```
|
|
|
|
#### With npm
|
|
|
|
```sh
|
|
npm install @react-email/markdown -E
|
|
```
|
|
|
|
## Getting started
|
|
|
|
Add the component around your email body content.
|
|
|
|
```jsx
|
|
import { Markdown } from "@react-email/markdown";
|
|
import { Html } from "@react-email/html";
|
|
|
|
const Email = () => {
|
|
return (
|
|
<Html lang="en" dir="ltr">
|
|
<Markdown
|
|
markdownCustomStyles={{
|
|
h1: { color: "red" },
|
|
h2: { color: "blue" },
|
|
codeInline: { background: "grey" },
|
|
}}
|
|
markdownContainerStyles={{
|
|
padding: "12px",
|
|
border: "solid 1px black",
|
|
}}
|
|
>{`# Hello, World!`}</Markdown>
|
|
|
|
{/* OR */}
|
|
|
|
<Markdown children={`# This is a ~~strikethrough~~`} />
|
|
</Html>
|
|
);
|
|
```
|
|
|
|
## Props
|
|
|
|
### `children` field
|
|
|
|
- **Type**: string
|
|
|
|
Contains the markdown content that will be rendered in the email template.
|
|
|
|
### `markdownCustomStyles` field
|
|
|
|
- **Type**: object
|
|
- **Default**: `{}`
|
|
|
|
Provide custom styles for the corresponding HTML element (e.g., p, h1, h2, etc.).
|
|
|
|
### `markdownContainerStyles` field
|
|
|
|
- **Type**: object
|
|
- **Default**: `{}`
|
|
|
|
Provide custom styles for the containing `div` that wraps the markdown content.
|
|
|
|
## Support
|
|
|
|
This component was tested using the most popular email clients.
|
|
|
|
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
|
|
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
|
|
|
|
## License
|
|
|
|
MIT License
|