Usare JavaScript con Markdown

Sebbene Markdown sia principalmente un linguaggio di markup per la formattazione del testo, puoi migliorare i tuoi documenti Markdown con JavaScript per aggiungere interattività e funzionalità dinamiche.

Comprendere le limitazioni

I parser Markdown standard non eseguono codice JavaScript. Tuttavia, ci sono diversi modi per integrare JavaScript con Markdown:

1. Tag Script HTML: Includere JavaScript direttamente in blocchi HTML
2. Processori Markdown: Utilizzare processori che supportano l'esecuzione JavaScript
3. Generatori di siti statici: Sfruttare l'elaborazione JavaScript in fase di build
4. Rendering lato client: Aggiungere JavaScript dopo aver convertito Markdown in HTML

Integrazione JavaScript di base

Tag Script inline

# Il mio documento interattivo

<script>
function greet() {
  alert('Ciao da Markdown!');
}
</script>

<button onclick="greet()">Cliccami</button>

Casi d'uso comuni

1. Moduli interattivi

# Modulo di contatto

<form id="contactForm">
  <input type="text" id="name" placeholder="Il tuo nome">
  <input type="email" id="email" placeholder="La tua email">
  <button type="submit">Invia</button>
</form>

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

2. Caricamento contenuto dinamico

# Ultimi post

<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. Visualizzazione dati

# Grafico delle vendite

<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: ['Gen', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: 'Vendite',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

Considerazioni sulla sicurezza

Protezione XSS

Quando usi JavaScript in Markdown, sanitizza sempre l'input dell'utente:

// Male: iniezione HTML diretta
element.innerHTML = userInput;

// Bene: usare textContent o sanitizzare
element.textContent = userInput;
// oppure
element.innerHTML = DOMPurify.sanitize(userInput);

Migliori pratiche

1. Separare JavaScript: Archiviare JavaScript in file esterni quando possibile
2. Miglioramento progressivo: Assicurarsi che il contenuto funzioni senza JavaScript
3. Usare CDN: Caricare librerie popolari da CDN per migliore caching
4. Minimizzare script inline: Usare la delegazione degli eventi invece di gestori inline
5. Documentare le dipendenze: Indicare chiaramente le librerie JavaScript richieste

Conclusione

Sebbene Markdown stesso non esegua JavaScript, puoi combinare efficacemente queste due tecnologie per creare documenti ricchi e interattivi. Scegli il metodo più adatto al tuo caso d'uso e dai sempre priorità alla sicurezza e all'esperienza utente.

Risorse aggiuntive

• Guida JavaScript MDN
• Documentazione Markdown-it
• Documentazione MDX