Labels

Hướng dẫn tạo tool làm đẹp code JS, HTML, XML, CSS


Trong quá trình phát triển website bạn thường phải làm việc rất nhiều với các đoạn code js, html, css. Việc chúng bị nén lại chắc chắn sẽ khiến bạn gặp rất nhiều khó khăn trong code. Hiện tại không thiếu các website hỗ trợ việc làm đẹp code tuy nhiên nếu bạn muốn tự sở hữu nó để chủ động hơn thì hãy tham khảo bài viết này.

Bạn có thể xem demo tại đây

1. Chạy local


Để chạy trực tiếp trên máy bạn mở trình soạn thảo notepad và dán nội dung sau vào

<!DOCTYPE html>
<html>
<head>
    <title>Unminify JS, CSS, HTML, XML Code Online</title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style type='text/css'>#textarea{min-height:40em;font-size:15px}.copyright-container{margin:20px 0;font-size: 16px}</style>
</head>

<body>
    <div class="container"><div class="row"><h2 class="text-center">Paste JS, CSS, HTML or XML Code to unminify/format</h2><form class="form"><div><textarea id="textarea" name="textarea" class="form-control" onblur='""==this.value&&(this.value=this.defaultValue)' onfocus='this.value==this.defaultValue&&(this.value="")'><html><body><style>#minify{border:1px solid #444;height:220px;width:100%}</style><div class="nav"><ul><li><a href="#">Minify HTML</a></li></ul></div><script>console.log("Minify"),alert("Code")</script></body></html></textarea></div><br><div class="group"><button class="btn btn-primary" onclick="return unminify(),!1"><i class="glyphicon glyphicon-stats"></i> Unminify</button> <button class="btn btn-danger" onclick="return eraseText(),!1"><i class="glyphicon glyphicon-remove"></i> Clear</button> <button class="btn btn-success" onclick="return copyUnminify(),!1"><i class="glyphicon glyphicon-paste"></i> Copy</button></div></form></div><div class="copyright-container"><p class="text-center">Powered by <a href="https://getbootstrap.com/">Bootstrap</a> & <a href="http://jsbeautifier.org/">JS Beautify</a></p></div>
    <script type="text/javascript">
    var ver = '1.7.5'; // Check ver: https://cdnjs.com/libraries/js-beautify
    var domain = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/'; // not edit
    var file = ["beautify.min.js", "beautify-css.min.js", "beautify-html.min.js"]; // not edit
    var _0x3bae=['\x6c\x65\x6e\x67\x74\x68','\x77\x72\x69\x74\x65','\x3c\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3d\x22','\x74\x79\x70\x65\x3d\x22\x74\x65\x78\x74\x2f\x6a\x61\x76\x61\x73\x63\x72\x69\x70\x74\x22\x3e\x3c\x2f\x73\x63\x72\x69\x70\x74\x3e','\x74\x65\x73\x74','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64','\x74\x65\x78\x74\x61\x72\x65\x61','\x6c\x6f\x67','\x48\x74\x6d\x6c','\x76\x61\x6c\x75\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x23\x74\x65\x78\x74\x61\x72\x65\x61','\x73\x65\x6c\x65\x63\x74','\x65\x78\x65\x63\x43\x6f\x6d\x6d\x61\x6e\x64','\x63\x6f\x70\x79','\x53\x75\x63\x63\x65\x73\x73','\x55\x6e\x73\x75\x63\x63\x65\x73\x73','\x4f\x6f\x70\x73\x2c\x20\x75\x6e\x61\x62\x6c\x65\x20\x74\x6f\x20\x63\x6f\x70\x79\x20\x21'];(function(_0x10d66f,_0x582c8a){var _0x2b95c6=function(_0x296806){while(--_0x296806){_0x10d66f['\x70\x75\x73\x68'](_0x10d66f['\x73\x68\x69\x66\x74']());}};_0x2b95c6(++_0x582c8a);}(_0x3bae,0x17a));var _0xe3ba=function(_0x1dd8b4,_0x3c4ade){_0x1dd8b4=_0x1dd8b4-0x0;var _0xaf045d=_0x3bae[_0x1dd8b4];return _0xaf045d;};for(var i=0x0;i<file[_0xe3ba('0x0')];i++){document[_0xe3ba('0x1')](_0xe3ba('0x2')+domain+ver+'\x2f'+file[i]+'\x22\x20'+_0xe3ba('0x3'));};function isCss(_0x9a3e22){if(/\w+\s*?\{[\s\S]+?\}/[_0xe3ba('0x4')](_0x9a3e22)&&!/<(style).*?>[\s\S]+?<\/\1>/['\x74\x65\x73\x74'](_0x9a3e22)){return!![];}}function isJs(_0x19e55e){if((/function\s*?\w+\s*?\(.*?\)\s*?\{[\s\S]+?\}/[_0xe3ba('0x4')](_0x19e55e)||/var\s*?\w+\s*?\=/['\x74\x65\x73\x74'](_0x19e55e))&&!/<(script).*?>[\s\S]+?<\/\1>/[_0xe3ba('0x4')](_0x19e55e)){return!![];}}function isHtml(_0x591a53){if(/<(\w+).*?>[\s\S]+?<\/\1>/['\x74\x65\x73\x74'](_0x591a53)){return!![];}}function unminify(){var _0x57d020=document[_0xe3ba('0x5')](_0xe3ba('0x6'))['\x76\x61\x6c\x75\x65'];if(isCss(_0x57d020)&&!isJs(_0x57d020)){console[_0xe3ba('0x7')]('\x43\x73\x73');_0x57d020=css_beautify(_0x57d020);}else if(isJs(_0x57d020)){console[_0xe3ba('0x7')]('\x4a\x73');_0x57d020=js_beautify(_0x57d020);}else if(isHtml(_0x57d020)){console[_0xe3ba('0x7')](_0xe3ba('0x8'));_0x57d020=html_beautify(_0x57d020);}else{_0x57d020=html_beautify(_0x57d020);}document[_0xe3ba('0x5')]('\x74\x65\x78\x74\x61\x72\x65\x61')[_0xe3ba('0x9')]=_0x57d020;}function copyUnminify(){var _0x49cbec=document[_0xe3ba('0xa')](_0xe3ba('0xb'));_0x49cbec[_0xe3ba('0xc')]();try{var _0x31ba33=document[_0xe3ba('0xd')](_0xe3ba('0xe'));var _0x58ae28=_0x31ba33?_0xe3ba('0xf'):_0xe3ba('0x10');}catch(_0x1bdeab){alert(_0xe3ba('0x11'));}}function eraseText(){document[_0xe3ba('0x5')](_0xe3ba('0x6'))[_0xe3ba('0x9')]='';}
    </script>
</body>
</html>

Lưu lại với tên bất kì.html và chạy trực tiếp trên trình duyệt

2. Publish lên host


Bạn có thể sử dụng github như tôi demo ở trên để sử dụng online bằng việc tạo 1 tài khoản github và upload file ở phần 1 lên sau đó sử dụng https://rawgit.com/ để raw file hoặc upload lên hosting của bạn

3. Dành cho blogspot


Sử dụng với chế độ trang tĩnh, bạn tạo 1 trang mới và dán nội dung sau vào

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style type='text/css'>#textarea{min-height:40em;font-size:15px}.copyright-container{margin:20px 0;font-size: 16px}</style>
<div class="container"><div class="row"><h2 class="text-center">Paste JS, CSS, HTML or XML Code to unminify/format</h2><form class="form"><div><textarea id="textarea" name="textarea" class="form-control" onblur='""==this.value&&(this.value=this.defaultValue)' onfocus='this.value==this.defaultValue&&(this.value="")'><html><body><style>#minify{border:1px solid #444;height:220px;width:100%}</style><div class="nav"><ul><li><a href="#">Minify HTML</a></li></ul></div><script>console.log("Minify"),alert("Code")</script></body></html></textarea></div><br><div class="group"><button class="btn btn-primary" onclick="return unminify(),!1"><i class="glyphicon glyphicon-stats"></i> Unminify</button> <button class="btn btn-danger" onclick="return eraseText(),!1"><i class="glyphicon glyphicon-remove"></i> Clear</button> <button class="btn btn-success" onclick="return copyUnminify(),!1"><i class="glyphicon glyphicon-paste"></i> Copy</button></div></form></div><div class="copyright-container"><p class="text-center">Powered by <a href="https://getbootstrap.com/">Bootstrap</a> & <a href="http://jsbeautifier.org/">JS Beautify</a></p></div>
<script type="text/javascript">
var ver = '1.7.5'; // Check ver: https://cdnjs.com/libraries/js-beautify
var domain = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/'; // not edit
var file = ["beautify.min.js", "beautify-css.min.js", "beautify-html.min.js"]; // not edit
var _0x3bae=['\x6c\x65\x6e\x67\x74\x68','\x77\x72\x69\x74\x65','\x3c\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3d\x22','\x74\x79\x70\x65\x3d\x22\x74\x65\x78\x74\x2f\x6a\x61\x76\x61\x73\x63\x72\x69\x70\x74\x22\x3e\x3c\x2f\x73\x63\x72\x69\x70\x74\x3e','\x74\x65\x73\x74','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64','\x74\x65\x78\x74\x61\x72\x65\x61','\x6c\x6f\x67','\x48\x74\x6d\x6c','\x76\x61\x6c\x75\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x23\x74\x65\x78\x74\x61\x72\x65\x61','\x73\x65\x6c\x65\x63\x74','\x65\x78\x65\x63\x43\x6f\x6d\x6d\x61\x6e\x64','\x63\x6f\x70\x79','\x53\x75\x63\x63\x65\x73\x73','\x55\x6e\x73\x75\x63\x63\x65\x73\x73','\x4f\x6f\x70\x73\x2c\x20\x75\x6e\x61\x62\x6c\x65\x20\x74\x6f\x20\x63\x6f\x70\x79\x20\x21'];(function(_0x10d66f,_0x582c8a){var _0x2b95c6=function(_0x296806){while(--_0x296806){_0x10d66f['\x70\x75\x73\x68'](_0x10d66f['\x73\x68\x69\x66\x74']());}};_0x2b95c6(++_0x582c8a);}(_0x3bae,0x17a));var _0xe3ba=function(_0x1dd8b4,_0x3c4ade){_0x1dd8b4=_0x1dd8b4-0x0;var _0xaf045d=_0x3bae[_0x1dd8b4];return _0xaf045d;};for(var i=0x0;i<file[_0xe3ba('0x0')];i++){document[_0xe3ba('0x1')](_0xe3ba('0x2')+domain+ver+'\x2f'+file[i]+'\x22\x20'+_0xe3ba('0x3'));};function isCss(_0x9a3e22){if(/\w+\s*?\{[\s\S]+?\}/[_0xe3ba('0x4')](_0x9a3e22)&&!/<(style).*?>[\s\S]+?<\/\1>/['\x74\x65\x73\x74'](_0x9a3e22)){return!![];}}function isJs(_0x19e55e){if((/function\s*?\w+\s*?\(.*?\)\s*?\{[\s\S]+?\}/[_0xe3ba('0x4')](_0x19e55e)||/var\s*?\w+\s*?\=/['\x74\x65\x73\x74'](_0x19e55e))&&!/<(script).*?>[\s\S]+?<\/\1>/[_0xe3ba('0x4')](_0x19e55e)){return!![];}}function isHtml(_0x591a53){if(/<(\w+).*?>[\s\S]+?<\/\1>/['\x74\x65\x73\x74'](_0x591a53)){return!![];}}function unminify(){var _0x57d020=document[_0xe3ba('0x5')](_0xe3ba('0x6'))['\x76\x61\x6c\x75\x65'];if(isCss(_0x57d020)&&!isJs(_0x57d020)){console[_0xe3ba('0x7')]('\x43\x73\x73');_0x57d020=css_beautify(_0x57d020);}else if(isJs(_0x57d020)){console[_0xe3ba('0x7')]('\x4a\x73');_0x57d020=js_beautify(_0x57d020);}else if(isHtml(_0x57d020)){console[_0xe3ba('0x7')](_0xe3ba('0x8'));_0x57d020=html_beautify(_0x57d020);}else{_0x57d020=html_beautify(_0x57d020);}document[_0xe3ba('0x5')]('\x74\x65\x78\x74\x61\x72\x65\x61')[_0xe3ba('0x9')]=_0x57d020;}function copyUnminify(){var _0x49cbec=document[_0xe3ba('0xa')](_0xe3ba('0xb'));_0x49cbec[_0xe3ba('0xc')]();try{var _0x31ba33=document[_0xe3ba('0xd')](_0xe3ba('0xe'));var _0x58ae28=_0x31ba33?_0xe3ba('0xf'):_0xe3ba('0x10');}catch(_0x1bdeab){alert(_0xe3ba('0x11'));}}function eraseText(){document[_0xe3ba('0x5')](_0xe3ba('0x6'))[_0xe3ba('0x9')]='';}
</script>

Đương nhiên sẽ có sự xung đột class hoặc css vì có sử dụng bootstrap, điều này hoàn toàn phụ thuộc vào trình độ của bạn, căn chỉnh sao cho hợp lý

4. Kết luận


Hiện tại có vô số trang giúp bạn làm việc này tuy nhiên việc tự tạo tool cho mình giúp bạn chủ động hơn, không bị phụ thuộc vào các website khác khi họ gặp sự cố gây gián đoạn

Tool gọn nhẹ dễ tích hợp cơ bản đáp ứng được yêu cầu làm đẹp code

Chúc thành công !