Code Formatter

Format code with Prettier

Input

Formatted Output

`, css: `.container{display:flex;flex-direction:column;align-items:center;padding:20px;margin:0 auto}.title{font-size:24px;color:#333}`, scss: `$primary:#007bff;.container{display:flex;&-inner{padding:20px}.title{color:$primary;&:hover{opacity:0.8}}}`, markdown: `# Title\n\n## Section\n\nThis is a paragraph with **bold** and *italic* text.\n\n- Item 1\n- Item 2\n- Item 3`, yaml: `name: John\nage: 30\naddress:\n city: NYC\n zip: "10001"\nhobbies:\n - reading\n - gaming`, xml: `XML GuideJohnJSON GuideJane` }; document.getElementById('format-btn').addEventListener('click', format); document.getElementById('sample-btn').addEventListener('click', () => { const lang = document.getElementById('language').value; inputEditor.setValue(samples[lang] || samples.javascript); }); document.getElementById('clear-btn').addEventListener('click', () => { inputEditor.setValue(''); outputEditor.setValue(''); }); document.getElementById('copy-btn').addEventListener('click', async () => { const s = await DevTools.copyToClipboard(outputEditor.getValue()); DevTools.showStatus('status-container', s ? 'Copied!' : 'Failed', s ? 'success' : 'error'); }); document.getElementById('download-btn').addEventListener('click', () => { const lang = document.getElementById('language').value; DevTools.downloadFile(outputEditor.getValue(), `formatted.${langMap[lang].ext}`, 'text/plain'); });