jQuery Plugin to Pretty Print and Minify Scripts

An useful jQuery plugin works with jQuery UI that helps you create an online tool to pretty print or minify scripts (CSS, XML, SQL, JSON) on one page.

How to use it:

1. Include jQuery library and jQuery UI on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

2. Include jquery.format.js after jQuery and then initialize the plugin

<script src='../jquery.format.js'></script>
<script>
$(function() {
    $('#tabs').tabs();

    $('#xml').button().click(function() {
        $('#xml_text').format({method: 'xml'});
    });
    $('#xmlmin').button().click(function() {
        $('#xml_text').format({method: 'xmlmin'});
    });
    $('#xml_load').button().click(function() {
        getSample('xml', '#xml_text');
    });

    $('#css').button().click(function() {
        $('#css_text').format({method: 'css'});
    });
    $('#cssmin').button().click(function() {
        $('#css_text').format({method: 'cssmin'});
    });
    $('#css_load').button().click(function() {
        getSample('css', '#css_text');
    });

    $('#sql').button().click(function() {
        $('#sql_text').format({method: 'sql'});
    });
    $('#sqlmin').button().click(function() {
        $('#sql_text').format({method: 'sqlmin'});
    });
    $('#sql_load').button().click(function() {
        getSample('sql', '#sql_text');
    });

    $('#json').button().click(function() {
        $('#json_text').format({method: 'json'});
    });
    $('#jsonmin').button().click(function() {
        $('#json_text').format({method: 'jsonmin'});
    });
    $('#json_load').button().click(function() {
        getSample('json', '#json_text');
    });

	function getSample(extn, id) {
		$.ajax( {
			url: 'sample.' + extn,
			type: 'GET',
			dataType: 'text',
			dataFilter: function(data, type) {
				// console.log(type);
				// console.log(data);
			},
			complete: function(xhr, status) {
				// console.log(status);
				// console.log(xhr);
				$(id).val(xhr.responseText);
			}
		});
	}


});
</script>

3. The HTML

<div id='tabs'>
<ul>
<li><a href='#tabs-1'>XML</a></li>
<li><a href='#tabs-2'>CSS</a></li>
<li><a href='#tabs-3'>SQL</a></li>
<li><a href='#tabs-4'>JSON</a></li>
</ul>
<div id='tabs-1'>
<textarea id='xml_text'rows='20' cols='60'></textarea>
<br/>
<button id='xml'>Pretty Print</button>
<button id='xmlmin'>Minimize</button>
<button id='xml_load'>Load Sample</button>
</div>
<div id='tabs-2'>
<textarea id='css_text'rows='20' cols='60'></textarea>
<br/>
<button id='css'>Pretty Print</button>
<button id='cssmin'>Minimize</button>
<button id='css_load'>Load Sample</button>
</div>
<div id='tabs-3'>
<textarea id='sql_text'rows='20' cols='60'></textarea>
<br/>
<button id='sql'>Pretty Print</button>
<button id='sqlmin'>Minimize</button>
<button id='sql_load'>Load Sample</button>
</div>
<div id='tabs-4'>
<textarea id='json_text'rows='20' cols='60'></textarea>
<br/>
<button id='json'>Pretty Print</button>
<button id='jsonmin'>Minimize</button>
<button id='json_load'>Load Sample</button>
</div>
</div>

---

This awesome jQuery plugin is developed by zachofalltrades. For more Advanced Usages, please check the demo page or visit the official website.