Utiliser JavaScript avec Markdown

Bien que Markdown soit principalement un langage de balisage pour la mise en forme de texte, vous pouvez enrichir vos documents Markdown avec JavaScript pour ajouter de l'interactivité et des fonctionnalités dynamiques.

Comprendre les limitations

Les analyseurs Markdown standards n'exécutent pas de code JavaScript. Cependant, il existe plusieurs façons d'intégrer JavaScript avec Markdown :

1. Balises Script HTML : Inclure JavaScript directement dans des blocs HTML
2. Processeurs Markdown : Utiliser des processeurs supportant l'exécution JavaScript
3. Générateurs de sites statiques : Exploiter le traitement JavaScript au moment de la compilation
4. Rendu côté client : Ajouter JavaScript après conversion de Markdown en HTML

Intégration JavaScript de base

Balises Script inline

# Mon document interactif

<script>
function greet() {
  alert('Bonjour depuis Markdown !');
}
</script>

<button onclick="greet()">Cliquez-moi</button>

Scripts externes

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

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

Cas d'usage courants

1. Formulaires interactifs

# Formulaire de contact

<form id="contactForm">
  <input type="text" id="name" placeholder="Votre nom">
  <input type="email" id="email" placeholder="Votre email">
  <button type="submit">Envoyer</button>
</form>

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

2. Chargement de contenu dynamique

# Derniers articles

<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. Visualisation de données

# Graphique des ventes

<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: ['Jan', 'Fév', 'Mar', 'Avr'],
    datasets: [{
      label: 'Ventes',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

Considérations de sécurité

Protection XSS

Lors de l'utilisation de JavaScript dans Markdown, nettoyez toujours les entrées utilisateur :

// Mauvais : injection HTML directe
element.innerHTML = userInput;

// Bon : utiliser textContent ou nettoyer
element.textContent = userInput;
// ou
element.innerHTML = DOMPurify.sanitize(userInput);

Content Security Policy

Implémenter des en-têtes CSP pour restreindre l'exécution des scripts :

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

Meilleures pratiques

1. Séparer JavaScript : Stocker JavaScript dans des fichiers externes autant que possible
2. Amélioration progressive : S'assurer que le contenu fonctionne sans JavaScript
3. Utiliser un CDN : Charger les bibliothèques populaires depuis un CDN pour un meilleur cache
4. Minimiser les scripts inline : Utiliser la délégation d'événements au lieu de gestionnaires inline
5. Documenter les dépendances : Indiquer clairement les bibliothèques JavaScript requises

Conclusion

Bien que Markdown lui-même n'exécute pas JavaScript, vous pouvez combiner efficacement ces deux technologies pour créer des documents riches et interactifs. Choisissez la méthode la mieux adaptée à votre cas d'usage et priorisez toujours la sécurité et l'expérience utilisateur.

Ressources supplémentaires

• Guide JavaScript MDN
• Documentation Markdown-it
• Documentation MDX