js-beautify sample

sample js-beautify

by no2don

HTML

<!-- jQuery 2.1.4 -->
          <script src="https://no2js.azurewebsites.net/adminlte231/plugins/jQuery/jQuery-2.1.4.min.js"></script>

          <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-css.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.js"></script>



          <textarea id='txtAreaSource' style='height:150px;width:90%'>
<!DOCTYPE html><html><body><h2>JavaScript Math.PI</h2><p>Math.PI returns the ratio of a circle's circumference to its diameter:</p>
<p id="demo"></p><script>document.getElementById("demo").innerHTML = Math.PI;document.getElementById("demo").innerHTML += Math.floor(4.7);</script></body></html>

</textarea>

          <textarea id='txtAreaResult' disabled style='height:400px;width:90%'>

</textarea>

JavaScript

var formattedCode = html_beautify($('#txtAreaSource').val(), {
  indent_size: 2
});

$('#txtAreaResult').val(formattedCode);