📝 MDX: Lecciones Interactivas y Componentes en Markdown

El Formato de Autoría de Dev Env Pro

MDX permite intercalar componentes de JSX / Astro directamente dentro de documentos Markdown estándar. Gracias a esto, las 41 lecciones del curso combinan explicaciones en texto fluido con simuladores de terminal interactivos, tarjetas de descarga de dotfiles y botones de copiado rápido.

---

💡 Ventajas de MDX frente al Markdown Plano

1. Componentes Interactivos en Línea:
   • Permite insertar componentes como <TerminalSimulator />, <CopyCommand />, <CheatSheetCard /> dentro del cuerpo de la lección sin abandonar la sintaxis sencilla de Markdown.
2. Importación Dinámica de Datos:
   • Permite leer archivos de configuración (mise.toml, config.zsh) e inyectarlos directamente en la vista previa con resaltado de sintaxis sin duplicar código.
3. Manejo de Metadatos YAML (Frontmatter):
   • Cada lección define su título, orden en el plan de estudios, tiempo estimado de lectura y prerequisitos técnicos.

---

📋 Ejemplo Práctico de Lección en MDX

---
title: "Módulo 1: Instalación de Mise"
order: 1
duration: "10 min"
tags: ["mise", "terminal"]
---
 
import TerminalBlock from '@/components/TerminalBlock.astro';
import TipCallout from '@/components/TipCallout.astro';
 
# Instalación Ultrarrápida de Mise
 
Ejecuta el siguiente instalador oficial en tu terminal Linux:
 
<TerminalBlock
  command="curl https://mise.run | sh"
  output="mise: installed to ~/.local/bin/mise"
/>
 
<TipCallout type="success">
  No olvides agregar `~/.local/bin` a tu variable PATH en tu archivo `.zshrc`.
</TipCallout>

---

🧭 Conexiones Internas

• mdx
• Estilos de las lecciones MDX
• Índice de Lecciones del Curso