Minify / Beautify (HTML / CSS / JS) Berilmu Tools

Tool ringan untuk merapikan (beautify) atau mengecilkan (minify) kode. Cocok untuk snippet, Blogger/WGS, dan HTML/CSS/JS sederhana.

Pilih jenis kode agar aturan formatnya pas.
Untuk Beautify.
Aggressive bisa memadatkan lebih jauh tapi hindari untuk JS kompleks.
Catatan: Minify JS di sini berbasis aturan sederhana (hapus komentar & spasi). Untuk bundling/produksi, gunakan minifier khusus (mis. Terser).
etc is already handled by closing decrement return out.trim(); } function doBeautify(){ const src = input.value || ''; if(!src.trim()){ warn('Input kosong.'); return; } const ind = indentStr(); const lang = langEl.value; try{ let out = ''; if(lang === 'css') out = beautifyCss(src, ind); else if(lang === 'js') out = beautifyJs(src, ind); else out = beautifyHtml(src, ind); output.value = out; ok('Beautify sukses ✅'); setMeta(); }catch(e){ err('Beautify gagal: ' + (e && e.message ? e.message : e)); } } function doMinify(){ const src = input.value || ''; if(!src.trim()){ warn('Input kosong.'); return; } const lang = langEl.value; const aggressive = (optEl.value === 'aggressive'); try{ let out = ''; if(lang === 'css') out = minifyCss(src, aggressive); else if(lang === 'js') out = minifyJs(src, aggressive); else out = minifyHtml(src, aggressive); output.value = out; ok('Minify sukses ✅'); setMeta(); }catch(e){ err('Minify gagal: ' + (e && e.message ? e.message : e)); } } root.querySelector('#beautify').addEventListener('click', doBeautify); root.querySelector('#minify').addEventListener('click', doMinify); root.querySelector('#sample').addEventListener('click', ()=>{ const lang = langEl.value; if(lang === 'css'){ input.value = "/* sample */\n.gh-button { background: #111; color:white; padding: 10px 14px; }\n@media (max-width:600px){ .gh-button{ padding:8px 12px; } }"; }else if(lang === 'js'){ input.value = "// sample\nfunction sum(a,b){ return a + b; }\nconsole.log( sum(2,3) );\n"; }else{ input.value = "
\n

Berilmu

\n

Tool ringan untuk minify & beautify.

\n x\n
"; } output.value = ''; ok('Sample dimuat.'); setMeta(); }); root.querySelector('#clear').addEventListener('click', ()=>{ input.value = ''; output.value = ''; status.textContent = ''; setMeta(); }); root.querySelector('#copy').addEventListener('click', async ()=>{ const txt = (output.value || '').trim(); if(!txt){ warn('Output kosong.'); return; } try{ await navigator.clipboard.writeText(txt); ok('Output berhasil di-copy ✅'); }catch(e){ output.select(); document.execCommand('copy'); ok('Output berhasil di-copy (fallback) ✅'); } }); root.querySelector('#swap').addEventListener('click', ()=>{ if(!output.value){ warn('Output kosong.'); return; } input.value = output.value; output.value = ''; ok('Output dipindah ke Input.'); setMeta(); }); setMeta(); })();

Press Enter to search