Markdownからリッチテキストへの変換ツール

リッチテキスト設定

テーマ

フォントサイズ

フォントファミリー

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)

使用方法

左側でMarkdownテキストを編集
右上にインラインスタイル付きのHTMLコードが表示されます
右下に実際のレンダリングが表示されます
リッチテキスト設定で外観をカスタマイズできます
「リッチテキストをコピー」ボタンをクリックしてスタイル付きリッチテキストをコピー
「HTMLコードをコピー」ボタンをクリックしてインラインスタイル付きHTMLコードをコピー
Word、メール、または任意のリッチテキストエディタに貼り付けることができます

スタイル付きHTMLコード

<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>

これは変換されたHTMLコード（インラインスタイル付き）を表示しています。上のボタンをクリックしてコピーしてください

リッチテキストプレビュー

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

上にリッチテキストのレンダリングが表示されています。「リッチテキストをコピー」をクリックして、このコンテンツをリッチテキストとしてコピーします