HI WELCOME TO KANSIRIS

Unminify HTML, CSS, and JS Code with JavaScript

Leave a Comment

Beautify and Unminify Code

There are a few reasons to minify code, the major one being web performance. Browsers don’t need whitespace and comments to process your files. But, it’s not fun to work obfuscated code and I find myself often usingjsbeautifier to uncompress source code. Today, I decided to implement this tool myself show how you can unminify and reformat HTML, CSS, and JS code with a JavaScript function. Since js-beautify is open source and supports JavaScript, this was an easy task.
Instead of loading all the CSS, HTML, and JavaScript rules on page load, the beautify JavaScript function retrieves the necessary code on request via RequireJS. It then looks through the html source and makes the code readable. There are specifc options you can set for indentation and code formatting. If you need to unminify your code, here is another Online Tool to Beautify Code.

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Beautify Code with JavaScript | TechSlides</title>

<style type="text/css">
#output{
border: 1px solid black;
height: 250px;
width: 50%;
}
#input{
width: 50%;
height: 250px;
}
#go {
display:block;
font-size:20px;
margin:20px 0;
}
</style>

<script type="text/javascript" src="require.min.js"></script>
<script type="text/javascript">
function beautify(){
require(["beautify-html","beautify","beautify-css"],function(html_beautify){
var input = document.getElementById("input").value;
var output = html_beautify.html_beautify(input);
document.getElementById("output").innerHTML = output;
});
return false;
}

</script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-941940-28']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>

<h1>Online Tool to unminify JavaScript, CSS, and HTML</h1>

<p>JavaScript function that will nicely format minified code. It will cleanup and beautify HTML, CSS, and JS. Based on <a href="http://jsbeautifier.org/">beautify</a> and <a href="http://requirejs.org/">RequireJS</a>. View source to see how it works. <a href="http://techslides.com/unminify-html-css-and-js-code-with-javascript/">Back To Article</a>.</p>


<h2>Input</h2>
<textarea name="" id="input">
<html><body><style>#output{border: 1px solid black;height: 300px;width: 100%;}</style><ul><li><a href="test"></a></li></ul><script>console.log("Beautify");alert("Code");</script></body></html>
</textarea>

<button id="go" onclick="beautify()">Beautify</button>

<h2>Output</h2>
<textarea name="" id="output">

</textarea>

</body>
</html>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.