popup.js

document.getElementById('compare').addEventListener('click', () => {
  const code1 = document.getElementById('code1').value;
  const code2 = document.getElementById('code2').value;

  // Compute the differences
  const differences = Diff.diffLines(code1, code2);

  // Display the differences
  const diffOutput = document.getElementById('diffOutput');
  diffOutput.innerHTML = '';

  differences.forEach((part) => {
    const pre = document.createElement('pre');
    const code = document.createElement('code');
    code.className = 'language-javascript'; // Use the appropriate language class
    code.textContent = part.value;

    // Highlight syntax using Prism.js
    Prism.highlightElement(code);

    // Add styling for added/removed lines
    if (part.added) {
      pre.classList.add('bg-green-100'); // Tailwind class for added lines
    } else if (part.removed) {
      pre.classList.add('bg-red-100'); // Tailwind class for removed lines
    }

    pre.appendChild(code);
    diffOutput.appendChild(pre);
  });

  // Scroll to the diffOutput section smoothly
  document.getElementById('diffOutput').scrollIntoView({ behavior: 'smooth' });
});