Ejemplos prácticos de Github Markdown

esmuyfacil.md

✨ Lorem Ipsum para GitHub Markdown

Important

Este documento es un ejemplo completo de todas las capacidades ocultas y avanzadas del editor de Markdown de GitHub. ¡Explora y experimenta con cada detalle! 😎

Compartido en la newsletter para programadores en español: Web Reactiva

---

🏆 Tabla de contenidos

• Cajas de alerta
• Formato enriquecido
• Listas
• Tablas
• Código y resalte de sintaxis
• Diagramas y matemáticas
• Imágenes y multimedia
• Badges y estado visual
• Secciones plegables
• Comentarios ocultos

---

🚨 Cajas de alerta

Note

Esto es una simple nota de información.

Tip

Esto es un consejo útil para recordar.

Important

Esto es un dato crucial que no debes olvidar.

Warning

¡Esto es una advertencia importante! ⚠️

Caution

Esto es una precaución sobre posibles riesgos.

---

🎨 Formato enriquecido

Este texto está en cursiva, este está en negrita, este está en tachado, este está en subrayado, este es un subíndice H₂O y este es un superíndice x². También puedes usar inline code para resaltar fragmentos específicos de código.

Texto de teclado: Pulsa Ctrl + C para copiar.

---

📝 Listas

✅ Lista de tareas (interactiva)

• Completar la configuración inicial
• Escribir la documentación
• Integrar el backend

🔢 Lista ordenada

1. Primer elemento
2. Segundo elemento
   1. Subnivel 1
   2. Subnivel 2
3. Tercer elemento

🔹 Lista desordenada

• Elemento A
• Elemento B
  • Subnivel 1
  • Subnivel 2

---

📊 Tablas

Encabezado 1	Encabezado 2	Encabezado 3
Alineado a la izquierda	Alineado al centro	Alineado a la derecha
Negrita	Cursiva	Tachado
inline code	Enlace	✅

---

💻 Código y resalte de sintaxis

🌐 JavaScript

function saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}
saludar('Malandriner');

🧬 JSON

{
  "nombre": "Daniel",
  "rol": "Desarrollador",
  "nivel": "Senior"
}

---

📈 Diagramas y matemáticas

Diagrama Mermaid

graph TD;
    A[Inicio] --> B{¿Te gusta Web Reactiva?};
    B -- Sí --> C[¡Bravo! 🧡];
    B -- No --> D[WTF! 🧐];

·

graph TD;
    A[Inicio] --> B{¿Te gusta Web Reactiva?};
    B -- Sí --> C[¡Bravo! 🧡];
    B -- No --> D[WTF! 🧐];

Loading

Expresión matemática (LaTeX)

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

·

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

---

🖼️ Imágenes y multimedia

🌄 Imagen simple

📏 Imagen redimensionada y alineada

---

🏅 Badges y estado visual

---

📂 Secciones plegables

Haz clic para expandir

Esto es contenido oculto.

---

💬 Comentarios ocultos

---

🔗 Enlaces y referencias

Puedes mencionar a personas directamente con @nombre_usuario o enlazar issues como #123.
Enlace a GitHub
Enlace reutilizable

---

🦄 Extras ocultos y hacks

3. 🧪 Anclas personalizadas:

Aquí está el ancla

<a name="ancla-especial"></a>

Ir a sección personalizada

4. 🎭 Imagen como botón interactivo:

---

📢 Conclusión

Tip

¡Si has llegado hasta aquí, ya dominas el arte oculto del Markdown en GitHub! 🏆

¡Ahora es tu turno de personalizar tu README y sorprender a todo el mundo! 😎

---

¡Espero que esto te sirva para convertir tu README en una obra de arte! 🚀🔥