Conversor de Markdown a Texto Enriquecido

Ajustes de texto enriquecido

Tema

Tamaño de fuente

Tipo de fuente

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

Instrucciones

Edita el texto Markdown a la izquierda
El código HTML con estilos en línea se muestra en la parte superior derecha
La renderización real se muestra en la parte inferior derecha
Personaliza la apariencia usando los Ajustes de texto enriquecido
Haz clic en el botón "Copiar texto enriquecido" para copiar texto enriquecido con estilos
Haz clic en el botón "Copiar código HTML" para copiar código HTML con estilos en línea
Pega en Word, correo electrónico o cualquier editor de texto enriquecido

Código HTML con estilos

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

Esto muestra el código HTML convertido (con estilos en línea), haz clic en el botón de arriba para copiar

Vista previa de texto enriquecido

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

La renderización de texto enriquecido se muestra arriba, haz clic en "Copiar texto enriquecido" para copiar este contenido como texto enriquecido