Usar JavaScript con Markdown

Aunque Markdown es principalmente un lenguaje de marcado para formatear texto, puedes mejorar tus documentos Markdown con JavaScript para agregar interactividad y características dinámicas.

Entender las limitaciones

Los parsers de Markdown estándar no ejecutan código JavaScript. Sin embargo, hay varias formas de integrar JavaScript con Markdown:

1. Etiquetas Script HTML: Incluir JavaScript directamente en bloques HTML
2. Procesadores Markdown: Usar procesadores que soporten ejecución de JavaScript
3. Generadores de sitios estáticos: Aprovechar el procesamiento de JavaScript en tiempo de compilación
4. Renderizado del lado del cliente: Agregar JavaScript después de convertir Markdown a HTML

Integración básica de JavaScript

Etiquetas Script inline

# Mi documento interactivo

<script>
function greet() {
  alert('¡Hola desde Markdown!');
}
</script>

<button onclick="greet()">Haz clic</button>

Scripts externos

<script src="https://cdn.example.com/script.js"></script>

<div id="dynamic-content"></div>

Casos de uso comunes

1. Formularios interactivos

# Formulario de contacto

<form id="contactForm">
  <input type="text" id="name" placeholder="Tu nombre">
  <input type="email" id="email" placeholder="Tu email">
  <button type="submit">Enviar</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  alert('¡Gracias, ' + name + '!');
});
</script>

2. Carga de contenido dinámico

# Últimas publicaciones

<div id="posts-container"></div>

<script>
fetch('/api/posts')
  .then(response => response.json())
  .then(posts => {
    const container = document.getElementById('posts-container');
    posts.forEach(post => {
      container.innerHTML += `<h3>${post.title}</h3><p>${post.excerpt}</p>`;
    });
  });
</script>

3. Visualización de datos

# Gráfico de ventas

<canvas id="salesChart" width="400" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Ene', 'Feb', 'Mar', 'Abr'],
    datasets: [{
      label: 'Ventas',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

Consideraciones de seguridad

Protección XSS

Al usar JavaScript en Markdown, siempre sanitiza la entrada del usuario:

// Malo: inyección HTML directa
element.innerHTML = userInput;

// Bueno: usar textContent o sanitizar
element.textContent = userInput;
// o
element.innerHTML = DOMPurify.sanitize(userInput);

Content Security Policy

Implementar encabezados CSP para restringir la ejecución de scripts:

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://trusted-cdn.com;">

Mejores prácticas

1. Separar JavaScript: Almacenar JavaScript en archivos externos cuando sea posible
2. Mejora progresiva: Asegurar que el contenido funcione sin JavaScript
3. Usar CDN: Cargar bibliotecas populares desde CDN para mejor caché
4. Minimizar scripts inline: Usar delegación de eventos en lugar de manejadores inline
5. Documentar dependencias: Indicar claramente las bibliotecas JavaScript requeridas

Conclusión

Aunque Markdown en sí no ejecuta JavaScript, puedes combinar efectivamente estas dos tecnologías para crear documentos ricos e interactivos. Elige el método más adecuado para tu caso de uso y prioriza siempre la seguridad y la experiencia del usuario.

Recursos adicionales

• Guía JavaScript MDN
• Documentación Markdown-it
• Documentación MDX