Formateador de Markdown

Formateador de Markdown - Formatear y Previsualizar Markdown

Una herramienta completa de formateo y previsualización de Markdown. Limpie Markdown desordenado, corrija problemas de espaciado, normalice estilos de encabezado, previsualice cómo se renderiza y convierta a HTML. Perfecto para escritores de documentación, desarrolladores, bloggers y escritores técnicos que trabajan con archivos Markdown.

¿Qué es Markdown?

Markdown es un lenguaje de marcado ligero que utiliza sintaxis de formato de texto plano para convertir texto a HTML estructuralmente válido. Creado por John Gruber en 2004, está diseñado para ser fácil de leer y escribir.

**Principios Clave:**
• Legibilidad - Markdown es legible como texto plano
• Simplicidad - Fácil de aprender y usar
• Portabilidad - Funciona en todas partes, solo texto plano
• Conversión - Se convierte fácilmente a HTML, PDF, etc.

**Sintaxis Básica:**

**Encabezados:**
# Encabezado H1
## Encabezado H2
### Encabezado H3

**Énfasis:**
*cursiva* o _cursiva_
**negrita** o __negrita__
***negrita cursiva***

**Listas:**
No ordenadas:
- Elemento 1
- Elemento 2
- Elemento anidado

Ordenadas:
1. Primer elemento
2. Segundo elemento
3. Tercer elemento

**Enlaces:**
[Texto del Enlace](https://ejemplo.com)
[Enlace con Título](https://ejemplo.com "Título")

**Imágenes:**

**Código:**
Código en línea: `código aquí`

Bloque de código:
```python
def hola():
print("Hola, Mundo!")
```

**Citas:**
> Esta es una cita
> Múltiples líneas

**Reglas Horizontales:**
---
***
___

**Casos de Uso Comunes:**
• Archivos README (GitHub, GitLab)
• Documentación (MkDocs, Docusaurus)
• Plataformas de blogging (Jekyll, Hugo)
• Toma de notas (Obsidian, Notion)
• Publicaciones en foros (Reddit, Stack Overflow)
• Mensajes de chat (Slack, Discord)
• Escritura técnica
• Sistemas de gestión de contenido

¿Cómo usar el Formateador de Markdown?

**Formatear Markdown:**
1. Pegue o escriba su Markdown en el área de entrada
2. Configure las opciones de formato:
- Estilo de Encabezado: ATX (# Encabezado) o Setext (subrayado)
- Marcador de Lista: - (guión), * (asterisco) o + (más)
- Corregir espaciado: Eliminar líneas en blanco adicionales
- Normalizar encabezados: Convertir al estilo elegido
- Limpiar enlaces: Corregir espaciado en sintaxis de enlaces
- Formatear código: Asegurar espaciado adecuado de bloques de código
3. Haga clic en el botón 'Formatear'
4. El Markdown formateado aparece en la salida
5. Copie o descargue el resultado

**Previsualizar Markdown:**
1. Ingrese su texto Markdown
2. Haga clic en el botón 'Previsualizar'
3. Vea la vista previa HTML renderizada
4. Compruebe cómo se verá cuando se publique

**Convertir a HTML:**
1. Ingrese su Markdown
2. Haga clic en el botón 'A HTML'
3. Obtenga la salida de código HTML
4. Use en páginas web o aplicaciones

**Opciones de Formato Explicadas:**

**Estilos de Encabezado:**

*Estilo ATX (recomendado):*
# Encabezado 1
## Encabezado 2
### Encabezado 3

*Estilo Setext:*
Encabezado 1
=========

Encabezado 2
---------

**Marcadores de Lista:**
Todos funcionan igual, elija su preferencia:
- Guión (más común)
* Asterisco
+ Más

**Correcciones de Espaciado:**
• Elimina espacios en blanco al final
• Asegura una sola línea en blanco entre secciones
• Agrega espacio después de marcadores de lista
• Elimina múltiples líneas en blanco consecutivas

**Consejos:**
• Use Formatear primero para limpiar su Markdown
• Luego use Previsualizar para verificar la apariencia
• Exporte a HTML para integración web
• Las estadísticas muestran recuentos de caracteres, palabras y líneas

¿Cuáles son los sabores y estándares de Markdown?

**Markdown Original:**

Creado por John Gruber en 2004. La especificación original:
• Solo sintaxis básica
• Sin tablas, listas de tareas o tachado
• Algunas ambigüedades en la especificación
• Diferentes analizadores interpretan de manera diferente

**CommonMark:**

Una especificación estandarizada y sin ambigüedades:
• Lanzado en 2014
• Reglas de análisis definidas con precisión
• Elimina diferencias de implementación
• Implementación de referencia disponible
• Ampliamente adoptado como estándar base

**Sitio web:** https://commonmark.org/

**GitHub Flavored Markdown (GFM):**

Especificación extendida de Markdown de GitHub:
• Basado en CommonMark
• Agrega tablas
• Listas de tareas (casillas de verificación)
• Tachado
• Enlaces automáticos
• Atajos de emoji
• Menciones (@usuario)
• Referencias de problemas (#123)

**Ejemplo de Características GFM:**

*Tablas:*
| Encabezado 1 | Encabezado 2 |
|--------------|-------------|
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |

*Listas de Tareas:*
- [x] Tarea completada
- [ ] Tarea incompleta
- [ ] Otra tarea

*Tachado:*
~~texto eliminado~~

*Enlaces Automáticos:*
www.ejemplo.com (auto-convertido)
[email protected] (auto-convertido)

**Markdown Extra:**

PHP Markdown Extra agrega:
• Notas al pie
• Tablas
• Listas de definiciones
• Bloques de código delimitados
• Abreviaturas
• Atributos especiales

**MultiMarkdown:**

Extiende Markdown con:
• Tablas
• Notas al pie
• Citas
• Soporte matemático
• Referencias cruzadas
• Metadatos

**Pandoc Markdown:**

Variante poderosa para conversión de documentos:
• Superíndices y subíndices
• Matemáticas LaTeX
• Bloques de metadatos YAML
• Tablas pipe
• Tablas grid
• Formato en línea en encabezados
• Muchos formatos de salida

**Kramdown:**

Basado en Ruby con:
• Soporte matemático
• Notas al pie
• Abreviaturas
• Sintaxis de atributos
• Usado por Jekyll

**R Markdown:**

Para análisis de datos e informes:
• Incrusta código R
• Genera informes
• Gráficos y tablas
• Múltiples formatos de salida

**Comparación:**

**Soporte de Características:**

Markdown Original:
• Encabezados, énfasis, enlaces, imágenes
• Listas, citas, código
• Reglas horizontales

CommonMark:
• Todo Markdown Original
• Análisis estandarizado

GitHub (GFM):
• Todo CommonMark
• Tablas, listas de tareas
• Tachado, enlaces automáticos
• Emoji :emoji:

Pandoc:
• La mayoría de características de todos los sabores
• Matemáticas, citas
• Metadatos de documentos

**Eligiendo un Sabor:**

**Para GitHub/GitLab:** Use GFM
**Para documentación:** CommonMark o GFM
**Para escritura académica:** Pandoc Markdown
**Para máxima compatibilidad:** Quédese con CommonMark
**Para blogs (Jekyll):** Kramdown
**Para ciencia de datos:** R Markdown

Mejores prácticas para escribir Markdown

**1. Formato Consistente:**

**Encabezados:**
• Use estilo ATX (# Encabezado) para consistencia
• Solo un H1 por documento
• No omita niveles de encabezado (H1 → H3)
• Agregue línea en blanco antes y después de encabezados

Bueno:
# Título Principal

## Sección 1

Contenido aquí.

## Sección 2

Malo:
# Título Principal
## Sección 1
Contenido aquí.
### Omitió H2

**Listas:**
• Use marcadores consistentes (-, * o +)
• Sangría de listas anidadas con 2-4 espacios
• Agregue línea en blanco antes/después de listas
• Alinee elementos de lista de múltiples líneas

Bueno:
- Primer elemento
- Segundo elemento
- Elemento anidado
- Otro anidado
- Tercer elemento

Malo:
- Primer elemento
* Segundo elemento (inconsistente)
-Anidado (sin espacio)
- Tercer elemento

**2. Mejores Prácticas de Enlaces:**

**Enlaces en Línea:**
[Texto del enlace](https://ejemplo.com)

**Enlaces de Referencia (para URLs repetidas):**
[Enlace 1][ref]
[Enlace 2][ref]

[ref]: https://ejemplo.com

**Beneficios:**
• Texto más limpio
• Actualizar URL una vez
• Mejor legibilidad

**3. Formato de Código:**

**Código en Línea:**
Use `código` para:
• Nombres de variables: `variable`
• Nombres de funciones: `funcion()`
• Nombres de archivos: `config.json`
• Comandos: `npm install`

**Bloques de Código:**
Siempre especifique el lenguaje para resaltado de sintaxis:

```javascript
function hola() {
console.log('Hola');
}
```

```python
def hola():
print('Hola')
```

**4. Mejores Prácticas de Imágenes:**

**Texto Alt:**
Siempre incluya texto alt descriptivo:

**Para Accesibilidad:**
• Describa el contenido de la imagen
• No solo diga "imagen"
• Sea específico y conciso

Bueno:

Malo:

**5. Longitud de Línea:**

**Recomendación:**
• Mantenga líneas por debajo de 80-100 caracteres
• Rompa párrafos largos
• Use saltos de línea semánticos

**Saltos de Línea Semánticos:**
Rompa en puntos naturales:

Esta es una oración sobre Markdown.
Esta es otra oración.
Y aquí está una tercera.

No en recuento de caracteres:

Esta es una oración sobre Markdown. Esta es
otra oración. Y aquí está una tercera.

**6. Tablas:**

**Tablas Legibles:**
Alinee columnas para legibilidad:

| Columna 1 | Columna 2 | Columna 3 |
|--------------|--------------|-------------|
| Corto | Texto | Aquí |
| Texto largo | Más texto | Aún más |

**Alineación:**
| Izquierda | Centro | Derecha |
|:----------|:------:|--------:|
| I | C | D |

**7. Estructura del Documento:**

**Plantilla:**
# Título del Documento

Breve introducción.

## Tabla de Contenidos

- [Sección 1](#seccion-1)
- [Sección 2](#seccion-2)

## Sección 1

Contenido aquí.

### Subsección 1.1

Más contenido.

## Sección 2

Contenido aquí.

## Conclusión

Resumen.

**8. Caracteres Especiales:**

**Escape cuando sea necesario:**
\* No es un elemento de lista
\# No es un encabezado
\[No es un enlace\]

**9. Espacios en Blanco:**

**Reglas:**
• Una línea en blanco entre secciones
• Sin espacios en blanco al final
• Dos espacios al final de línea para salto de línea
• Una nueva línea al final del archivo

**10. Pruebas:**

**Siempre Previsualizar:**
• Use formateador/previsualizador antes de publicar
• Pruebe en la plataforma objetivo (GitHub, blog, etc.)
• Compruebe que los enlaces funcionen
• Verifique que las imágenes se carguen
• Pruebe en móvil si es aplicable

Errores comunes de Markdown y cómo corregirlos

**1. Problemas de Espaciado en Encabezados:**

**Error:**
#Encabezado sin espacio

**Corrección:**
# Encabezado con espacio

**Regla:** Siempre agregue espacio después de # en encabezados

**2. Formato de Lista:**

**Error:**
-Sin espacio después del guión
- Espaciado inconsistente
-Anidado sin espacio

**Corrección:**
- Espacio después del guión
- Espaciado consistente
- Anidado con espacio

**Reglas:**
• Espacio después del marcador de lista
• Sangría consistente (2 o 4 espacios)
• Línea en blanco antes/después de lista

**3. Sintaxis de Enlaces:**

**Error:**
[Enlace] (espacio-antes-url)
[Enlace]( espacio-dentro )

**Corrección:**
[Enlace](https://ejemplo.com)
[Enlace](https://ejemplo.com "Título")

**Regla:** Sin espacio entre ](

**4. Formato de Bloques de Código:**

**Error:**
Código sin líneas en blanco
```
código aquí
```
Más texto inmediatamente

**Corrección:**

Código con espaciado adecuado

```
código aquí
```

Más texto con espaciado

**Regla:** Línea en blanco antes/después de bloques de código

**5. Espaciado de Código en Línea:**

**Error:**
` código con espacios `

**Corrección:**
`código sin espacios`

**Excepción:**
Cuando se muestran espacios intencionalmente:
` código `

**6. Múltiples Líneas en Blanco:**

**Error:**
Párrafo 1.

Párrafo 2.

**Corrección:**
Párrafo 1.

Párrafo 2.

**Regla:** Use una sola línea en blanco entre secciones

**7. Sangría de Lista Anidada:**

**Error:**
- Elemento 1
- Sangría incorrecta (1 espacio)
- Elemento 2

**Corrección:**
- Elemento 1
- Sangría correcta (2 espacios)
- Elemento 2

**Regla:** Use sangría consistente (2 o 4 espacios)

**8. Formato de Tabla:**

**Error:**
|Sin|Espacios|Aquí|
|---|---|---|
|Mal|Format|o|

**Corrección:**
| Con | Espacios | Aquí |
|------|----------|------|
| Buen | Format | o |

**No requerido pero mejora la legibilidad**

**9. Conflictos de Negrita/Cursiva:**

**Error:**
** negrita con espacios **
* *confusión de cursiva* *

**Corrección:**
**negrita sin espacios**
*cursiva correctamente*
***negrita y cursiva***

**Regla:** Sin espacios dentro de marcadores de énfasis

**10. Problemas de Escape:**

**Error:**
Precio: $100 ($ puede activar modo matemático)
2024-01-01 (puede activar lista)

**Corrección:**
Precio: \$100
2024\-01\-01

o use código en línea:
Precio: `$100`
Fecha: `2024-01-01`

**11. Texto Alt de Imagen:**

**Error:**
 - Sin texto alt
 - Texto alt genérico

**Corrección:**

**Regla:** Siempre incluya texto alt descriptivo

**12. Espacios en Blanco al Final:**

**Error:**
Línea con espacios al final
(invisible pero causa problemas)

**Corrección:**
Línea sin espacios al final

o para salto de línea intencional:
Línea con dos espacios
(para etiqueta <br>)

**Diferencias Comunes de Analizadores:**

**1. Guiones Bajos en Palabras:**

Algunos analizadores: mi_variable_nombre (renderiza con cursiva)
Otros: mi_variable_nombre (renderiza tal cual)

Seguro: Use `mi_variable_nombre` (formato de código)

**2. Enlaces Automáticos:**

Algunos: www.ejemplo.com (enlazado automáticamente)
Otros: www.ejemplo.com (texto plano)

Seguro: [www.ejemplo.com](https://www.ejemplo.com)

**3. Sintaxis de Lista de Verificación:**

GitHub: - [ ] Tarea
Otros: Puede no admitirlo

Verifique la documentación de su plataforma objetivo

**Consejos de Validación:**

1. **Use un Linter:**
• markdownlint (extensión VS Code)
• mdl (herramienta Ruby)
• remark-lint (JavaScript)

2. **Previsualice Antes de Publicar:**
• Use esta herramienta formateadora
• Verifique vista previa de plataforma objetivo
• Pruebe todos los enlaces

3. **Pruebas Automatizadas:**
• Verificaciones de pipeline CI/CD
• Validadores de enlaces
• Correctores ortográficos

Características Principales

• Formatear y embellecer Markdown
• Corregir espaciado y sangría
• Normalizar estilos de encabezado (ATX/Setext)
• Estandarizar marcadores de lista
• Limpiar sintaxis de enlaces
• Formatear bloques de código correctamente
• Vista previa de renderizado en vivo
• Convertir Markdown a HTML
• Salida con resaltado de sintaxis
• Soporte de GitHub-flavored Markdown
• Opciones de formato personalizables
• Estadísticas (caracteres, palabras, líneas, tamaño)
• Copiar salida formateada
• Descargar como archivo .md o .html
• Procesamiento 100% del lado del cliente
• No se envían datos al servidor
• Funciona sin conexión
• Interfaz compatible con móviles
• Soporte de modo oscuro
• Uso gratuito e ilimitado