--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
--------------------------------------------------------------------------------------------------------

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFBRuw9gBN1xw09t1IJgeY_YrnVSfyIHQWHKs06jnC3WqhhW4nQ2r44s-g5ZF684Wk2lmdOxvDIXCe08jberW90CMKCqEUFyO-Qvo98Z2IvTw5iMACLf-LdSr1Ng2d-oLjzL0B9VrLDof/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFBRuw9gBN1xw09t1IJgeY_YrnVSfyIHQWHKs06jnC3WqhhW4nQ2r44s-g5ZF684Wk2lmdOxvDIXCe08jberW90CMKCqEUFyO-Qvo98Z2IvTw5iMACLf-LdSr1Ng2d-oLjzL0B9VrLDof/s320/1.png" /></a></div>

<select id='tabsize' name='tabsize'>
<option value='1'>Indent with a tab character</option>
<option value='2'>Indent with 2 spaces</option>
<option value='3'>Indent with 3 spaces</option>
<option value='4'>Indent with 4 spaces</option>
<option value='8'>Indent with 8 spaces</option>
</select>
<br/>
<select id='max-preserve-newlines' name='max-preserve-newlines'>
<option value='-1'>Remove all extra newlines</option>
<option value='1'>Allow 1 newline between tokens</option>
<option value='2'>Allow 2 newlines between tokens</option>
<option value='5'>Allow 5 newlines between tokens</option>
<option value='10'>Allow 10 newlines between tokens</option>
<option value='0'>Allow unlimited newlines between tokens</option>
</select>
<br/>
<select id='wrap-line-length' name='wrap-line-length'>
<option value='0'>Do not wrap lines</option>
<option value='40'>Wrap lines near 40 characters</option>
<option value='70'>Wrap lines near 70 characters</option>
<option value='80'>Wrap lines near 80 characters</option>
<option value='110'>Wrap lines near 110 characters</option>
<option value='120'>Wrap lines near 120 characters</option>
<option value='160'>Wrap lines near 160 characters</option>
</select>
<br/>


<div style="line-height:0">
<button class="submit"><strong>Beautify JavaScript or HTML</strong> <em>(ctrl-enter)</em>
</button>
<textarea id="source" rows="30" cols="160"></textarea>
<button class="submit"><strong>Beautify JavaScript or HTML</strong> <em>(ctrl-enter)</em>
</button>
</div>



<div id="testresults">

<style type='text/css'>

/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
}
.CodeMirror-scroll {
/* Set scrolling behaviour here */
overflow: auto;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
}
/* CURSOR */
.CodeMirror div.CodeMirror-cursor {
border-left: 1px solid black;
z-index: 3;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
width: auto;
border: 0;
background: #7e7;
z-index: 1;
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
.cm-tab { display: inline-block; }
/* DEFAULT THEME */
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable {color: black;}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-property {color: black;}
.cm-s-default .cm-operator {color: black;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-error {color: #f00;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-invalidchar {color: #f00;}
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
line-height: 1;
position: relative;
overflow: hidden;
background: white;
color: black;
}
.CodeMirror-scroll {
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px; padding-right: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
}
.CodeMirror-sizer {
position: relative;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actuall scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
z-index: 6;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
height: 100%;
padding-bottom: 30px;
z-index: 3;
}
.CodeMirror-gutter {
height: 100%;
padding-bottom: 30px;
margin-bottom: -32px;
display: inline-block;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-lines {
cursor: text;
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {
display: inline-block;
}
.CodeMirror-wrap .CodeMirror-scroll {
overflow-x: hidden;
}
.CodeMirror-measure {
position: absolute;
width: 100%; height: 0px;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor {
position: absolute;
visibility: hidden;
border-right: none;
width: 0;
}
.CodeMirror-focused div.CodeMirror-cursor {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursor {
visibility: hidden;
}
}

</style>


<style type='text/css'>
body {
background: #eee;
color: #333;
}
img {
border: 0;
}
a.self {
font-weight: bold;
text-decoration: none;
color: #444;
border-bottom: 1px solid #aaa
}
p, select, label, .blurb, a.turn-off-codemirror {
font:13px/1.231 arial, sans-serif;
*font-size:small;
}
a.turn-off-codemirror {
margin-left: 25px;
}
button.submit {
width: 100%;
padding: 10px 0;
cursor: pointer;
margin: 0;
}
button.submit em {
font-size: 11px;
font-style: normal;
color: #999;
}
label {
cursor: pointer;
}
select {
width: 220px;
}
table#options {
float: right;
}
table#options td {
vertical-align: top;
padding-left: 10px;
}
#about {
float: left;
}
#about p {
margin: 0 6px 6px 0;
}
li {
line-height: 150%;
}
li.writeme {
padding-top: 8px;
}
#testresults {
display: none;
font-family: monaco, "lucida console", "courier new", monospace;
}
.CodeMirror {
border: 1px solid #ccc;
height: 450px;
font-size: 90%;
margin-bottom: 6px;
background: white;
}
p {
margin-left: 40px;
margin-right: 40px;
}
a {
white-space: nowrap;
color: #36d;
}
.contributor-sep {
border-top: 1px solid #ccc;
padding-top: 8px;
}  
</style>

<script src="http://jsbeautifier.org/web/third-party/codemirror/lib/codemirror.js"></script>
<script src="http://jsbeautifier.org/web/third-party/codemirror/mode/javascript/javascript.js"></script>
<script src="http://jsbeautifier.org/web/third-party/jquery/jquery.js"></script>
<script src="http://jsbeautifier.org/web/third-party/jquery/jquery.cookie.js"></script>
<script src="http://jsbeautifier.org/js/lib/beautify.js"></script>
<script src="http://jsbeautifier.org/js/lib/beautify-css.js"></script>
<script src="http://jsbeautifier.org/js/lib/beautify-html.js"></script>
<script src="http://jsbeautifier.org/js/test/sanitytest.js"></script>
<script src="http://jsbeautifier.org/js/test/beautify-javascript-tests.js"></script>
<script src="http://jsbeautifier.org/js/test/beautify-css-tests.js"></script>
<script src="http://jsbeautifier.org/js/test/beautify-html-tests.js"></script>
<script src="http://jsbeautifier.org/js/lib/unpackers/javascriptobfuscator_unpacker.js"></script>
<script src="http://jsbeautifier.org/js/lib/unpackers/urlencode_unpacker.js"></script>
<script src="http://jsbeautifier.org/js/lib/unpackers/p_a_c_k_e_r_unpacker.js"></script>
<script src="http://jsbeautifier.org/js/lib/unpackers/myobfuscate_unpacker.js"></script>

<script type='text/javascript'>
//<![CDATA[
var the = {
use_codemirror: (!window.location.href.match(/without-codemirror/)),
beautify_in_progress: false,
editor: null // codemirror editor
};
function run_tests() {
var st = new SanityTest();
run_javascript_tests(st, Urlencoded, js_beautify, html_beautify, css_beautify);
run_css_tests(st, Urlencoded, js_beautify, html_beautify, css_beautify);
run_html_tests(st, Urlencoded, js_beautify, html_beautify, css_beautify);
JavascriptObfuscator.run_tests(st);
P_A_C_K_E_R.run_tests(st);
Urlencoded.run_tests(st);
MyObfuscate.run_tests(st);
var results = st.results_raw()
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;') .replace(/>/g, '&gt;')
.replace(/ /g, '&nbsp;')
.replace(/\r/g, '·')
.replace(/\n/g, '<br>');
$('#testresults').html(results).show();
}
function any(a, b) {
return a || b;
}
function read_settings_from_cookie() {
$('#tabsize').val(any($.cookie('tabsize'), '4'));
$('#brace-style').val(any($.cookie('brace-style'), 'collapse'));
$('#detect-packers').prop('checked', $.cookie('detect-packers') !== 'off');
$('#max-preserve-newlines').val(any($.cookie('max-preserve-newlines'), '5'));
$('#keep-array-indentation').prop('checked', $.cookie('keep-array-indentation') === 'on');
$('#break-chained-methods').prop('checked', $.cookie('break-chained-methods') === 'on');
$('#indent-scripts').val(any($.cookie('indent-scripts'), 'normal'));
$('#space-before-conditional').prop('checked', $.cookie('space-before-conditional') !== 'off');
$('#wrap-line-length').val(any($.cookie('wrap-line-length'), '0'));
$('#unescape-strings').prop('checked', $.cookie('unescape-strings') === 'on');
$('#jslint-happy').prop('checked', $.cookie('jslint-happy') === 'on');
$('#end-with-newline').prop('checked', $.cookie('end-with-newline') === 'on');
}
function store_settings_to_cookie() {
var opts = {
expires: 360
};
$.cookie('tabsize', $('#tabsize').val(), opts);
$.cookie('brace-style', $('#brace-style').val(), opts);
$.cookie('detect-packers', $('#detect-packers').prop('checked') ? 'on' : 'off', opts);
$.cookie('max-preserve-newlines', $('#max-preserve-newlines').val(), opts);
$.cookie('keep-array-indentation', $('#keep-array-indentation').prop('checked') ? 'on' : 'off', opts);
$.cookie('break-chained-methods', $('#break-chained-methods').prop('checked') ? 'on' : 'off', opts);
$.cookie('space-before-conditional', $('#space-before-conditional').prop('checked') ? 'on' : 'off',
opts);
$.cookie('unescape-strings', $('#unescape-strings').prop('checked') ? 'on' : 'off', opts);
$.cookie('jslint-happy', $('#jslint-happy').prop('checked') ? 'on' : 'off', opts);
$.cookie('end-with-newline', $('#end-with-newline').prop('checked') ? 'on' : 'off', opts);
$.cookie('wrap-line-length', $('#wrap-line-length').val(), opts);
$.cookie('indent-scripts', $('#indent-scripts').val(), opts);
}
function unpacker_filter(source) {
var trailing_comments = '',
comment = '',
unpacked = '',
found = false;
// cut trailing comments
do {
found = false;
if (/^\s*\/\*/.test(source)) {
found = true;
comment = source.substr(0, source.indexOf('*/') + 2);
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
} else if (/^\s*\/\//.test(source)) {
found = true;
comment = source.match(/^\s*\/\/.*/)[0];
source = source.substr(comment.length).replace(/^\s+/, '');
trailing_comments += comment + "\n";
}
} while (found);
var unpackers = [P_A_C_K_E_R, Urlencoded, /*JavascriptObfuscator,*/ MyObfuscate];
for (var i = 0; i < unpackers.length; i++) {
if (unpackers[i].detect(source)) {
unpacked = unpackers[i].unpack(source);
if (unpacked != source) {
source = unpacker_filter(unpacked);
}
}
}
return trailing_comments + source;
}
function beautify() {
if (the.beautify_in_progress) return;
store_settings_to_cookie();
the.beautify_in_progress = true;
var source = the.editor ? the.editor.getValue() : $('#source').val(),
output,
opts = {};
opts.indent_size = $('#tabsize').val();
opts.indent_char = opts.indent_size == 1 ? '\t' : ' ';
opts.max_preserve_newlines = $('#max-preserve-newlines').val();
opts.preserve_newlines = opts.max_preserve_newlines !== "-1";
opts.keep_array_indentation = $('#keep-array-indentation').prop('checked');
opts.break_chained_methods = $('#break-chained-methods').prop('checked');
opts.indent_scripts = $('#indent-scripts').val();
opts.brace_style = $('#brace-style').val();
opts.space_before_conditional = $('#space-before-conditional').prop('checked');
opts.unescape_strings = $('#unescape-strings').prop('checked');
opts.jslint_happy = $('#jslint-happy').prop('checked');
opts.end_with_newline = $('#end-with-newline').prop('checked');
opts.wrap_line_length = $('#wrap-line-length').val();
if (looks_like_html(source)) {
output = html_beautify(source, opts);
} else {
if ($('#detect-packers').prop('checked')) {
source = unpacker_filter(source);
}
output = js_beautify(source, opts);
}
if (the.editor) {
the.editor.setValue(output);
} else {
$('#source').val(output);
}
the.beautify_in_progress = false;
}
function looks_like_html(source) {
// <foo> - looks like html
// - doesn't look like html
var trimmed = source.replace(/^[ \t\n\r]+/, '');
var comment_mark = '<' + '!-' + '-';
return (trimmed && (trimmed.substring(0, 1) === '<' && trimmed.substring(0, 4) !== comment_mark));
}
//]]></script>


<script type='text/javascript'>
//<![CDATA[
$(function () {
read_settings_from_cookie();
var default_text =
"// This is just a sample script. Paste your real code (javascript or HTML) here.\n\nif ('this_is'==/an_example/){of_beautifer();}else{var a=b?(c%d):e[f];}";
var textArea = $('#source')[0];
if (the.use_codemirror && typeof CodeMirror !== 'undefined') {
the.editor = CodeMirror.fromTextArea(textArea, {
theme: 'default',
lineNumbers: true
});
the.editor.focus();
the.editor.setValue(default_text);
$('.CodeMirror').click(function () {
if (the.editor.getValue() == default_text) {
the.editor.setValue('');
}
});
} else {
$('#source').val(default_text).bind('click focus', function () {
if ($(this).val() == default_text) {
$(this).val('');
}
}).bind('blur', function () {
if (!$(this).val()) {
$(this).val(default_text);
}
});
}
$(window).bind('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 13) {
beautify();
}
})
$('.submit').click(beautify);
$('select').change(beautify);
});
     
//]]></script>


</div>