Markdown to Rich Text Converter

Rich Text Settings

Theme

Font Size

Font Family

Edit Markdown

# Markdown to Rich Text Example

## Basic Formatting

This is **bold**, this is *italic*, this is ~~strikethrough~~.

## Lists

Unordered list:

* Item 1
* Item 2
  * Nested item A
  * Nested item B

Ordered list:

1. First item
2. Second item
3. Third item

## Code

```javascript
// This is a code block
function greet() {
  console.log("Hello, world!");
}
```

## Tables

| Name | Age | Gender |
|------|-----|--------|
| John | 25  | Male   |
| Jane | 28  | Female |

## Quotes

> This is a quoted text.
> Quotes can span multiple lines.

## Links and Images

[This is a link](https://example.com)

![Image example](https://via.placeholder.com/150)

Instructions

Edit Markdown text on the left
HTML code with inline styles is shown in the top right
Actual rendering is shown in the bottom right
Customize appearance using Rich Text Settings
Click "Copy Rich Text" button to copy styled rich text
Click "Copy HTML Code" button to copy HTML code with inline styles
Paste into Word, email, or any rich text editor

HTML Code with Styles

<div style="background-color: white; color: #333; font-size: 1rem; line-height: 1.6; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif"><h1 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 2em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Markdown to Rich Text Example</h1>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Basic Formatting</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
This is <strong style="font-weight: 600;">bold</strong>, this is <em style="font-style: italic;">italic</em>, this is <del style="text-decoration: line-through;">strikethrough</del>.</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Lists</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
Unordered list:</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">Item 1</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">Item 2</li></ul>
<p style="margin-top: 0; margin-bottom: 16px;">  * Nested item A</p>
<p style="margin-top: 0; margin-bottom: 16px;">  * Nested item B</p>
<p style="margin-top: 0; margin-bottom: 16px;">
Ordered list:</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">First item</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">Second item</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">Third item</li></ul>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Code</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
``<code style="padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(27, 31, 35, 0.05) border-radius: 3px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;">javascript</p>
<p style="margin-top: 0; margin-bottom: 16px;">// This is a code block</p>
<p style="margin-top: 0; margin-bottom: 16px;">function greet() {</p>
<p style="margin-top: 0; margin-bottom: 16px;">  console.log("Hello, world!");</p>
<p style="margin-top: 0; margin-bottom: 16px;">}</p>
</code>``
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Tables</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<table style="width: 100%; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-bottom: 16px; border: 1px solid border-color: #dfe2e5;"><tr style="background-color: #fff;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Name</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Age</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Gender</td></tr><tr style="background-color: #f6f8fa;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">John</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">25</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Male</td></tr><tr style="background-color: #fff;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Jane</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">28</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">Female</td></tr></table>
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Quotes</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<blockquote style="padding: 0 1em; color: #6a737d; border-left-color: #dfe2e5 border-left: 0.25em solid; margin: 0 0 16px 0;">This is a quoted text.</blockquote>
<blockquote style="padding: 0 1em; color: #6a737d; border-left-color: #dfe2e5 border-left: 0.25em solid; margin: 0 0 16px 0;">Quotes can span multiple lines.</blockquote>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Links and Images</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<a href="https://example.com" style="color: #0366d6 text-decoration: none;">This is a link</a></p>
<p style="margin-top: 0; margin-bottom: 16px;">
!<a href="https://via.placeholder.com/150" style="color: #0366d6 text-decoration: none;">Image example</a></p>
</div>

This shows the converted HTML code (with inline styles), click the button above to copy

Rich Text Preview

Markdown to Rich Text Example

Basic Formatting

This is bold, this is italic, this is ~~strikethrough~~.

Lists

Unordered list:

Item 1

Item 2

* Nested item A

* Nested item B

Ordered list:

First item

Second item

Third item

Code

``javascript


// This is a code block
function greet() {
  console.log("Hello, world!");
}

Tables

Name	Age	Gender
John	25	Male
Jane	28	Female

Quotes

This is a quoted text.

Quotes can span multiple lines.

Links and Images

This is a link

!Image example

The rich text rendering is shown above, click "Copy Rich Text" to copy this content as rich text