Usando JavaScript com Markdown

Embora o Markdown seja principalmente uma linguagem de marcação para formatar texto, você pode aprimorar seus documentos Markdown com JavaScript para adicionar interatividade e recursos dinâmicos.

Compreendendo as limitações

Analisadores Markdown padrão não executam código JavaScript. No entanto, existem várias maneiras de integrar JavaScript com Markdown:

1. Tags Script HTML: Incluir JavaScript diretamente em blocos HTML
2. Processadores Markdown: Usar processadores que suportam execução de JavaScript
3. Geradores de site estático: Aproveitar processamento JavaScript em tempo de compilação
4. Renderização do lado do cliente: Adicionar JavaScript após converter Markdown para HTML

Integração básica de JavaScript

Tags Script inline

# Meu documento interativo

<script>
function greet() {
  alert('Olá do Markdown!');
}
</script>

<button onclick="greet()">Clique em mim</button>

Scripts externos

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

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

Casos de uso comuns

1. Formulários interativos

# Formulário de contato

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

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

2. Carregamento de conteúdo dinâmico

# Últimos posts

<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. Visualização de dados

# Gráfico de vendas

<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', 'Fev', 'Mar', 'Abr'],
    datasets: [{
      label: 'Vendas',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

Considerações de segurança

Proteção XSS

Ao usar JavaScript em Markdown, sempre sanitize a entrada do usuário:

// Ruim: injeção HTML direta
element.innerHTML = userInput;

// Bom: usar textContent ou sanitizar
element.textContent = userInput;
// ou
element.innerHTML = DOMPurify.sanitize(userInput);

Content Security Policy

Implementar cabeçalhos CSP para restringir execução de scripts:

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

Melhores práticas

1. Separar JavaScript: Armazenar JavaScript em arquivos externos sempre que possível
2. Aprimoramento progressivo: Garantir que o conteúdo funcione sem JavaScript
3. Usar CDN: Carregar bibliotecas populares de CDN para melhor cache
4. Minimizar scripts inline: Usar delegação de eventos em vez de manipuladores inline
5. Documentar dependências: Indicar claramente as bibliotecas JavaScript necessárias

Conclusão

Embora o próprio Markdown não execute JavaScript, você pode combinar efetivamente essas duas tecnologias para criar documentos ricos e interativos. Escolha o método mais adequado ao seu caso de uso e sempre priorize segurança e experiência do usuário.

Recursos adicionais

• Guia JavaScript MDN
• Documentação Markdown-it
• Documentação MDX