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

위에 서식 있는 텍스트 렌더링이 표시됩니다. "서식 있는 텍스트 복사"를 클릭하여 이 내용을 서식 있는 텍스트로 복사하세요