Code to Image - Turn Code Snippets Into Beautiful Images

// Code to Image using Shiki + html-to-image
import { codeToHtml } from 'shiki';
import { toPng, toSvg } from 'html-to-image';

// Generate syntax-highlighted HTML
async function highlightCode(code, lang = 'javascript', theme = 'dracula') {
  return await codeToHtml(code, { lang, theme });
}

// Export DOM node as PNG
async function exportToPNG(node, scale = 2) {
  const dataUrl = await toPng(node, {
    pixelRatio: scale,
    quality: 1.0,
  });
  const link = document.createElement('a');
  link.download = 'code-snippet.png';
  link.href = dataUrl;
  link.click();
}

// Copy image to clipboard
async function copyToClipboard(node) {
  const dataUrl = await toPng(node, { pixelRatio: 2 });
  const res = await fetch(dataUrl);
  const blob = await res.blob();
  await navigator.clipboard.write([
    new ClipboardItem({ 'image/png': blob }),
  ]);
}