A jQuery Tool To Minify and Beautify Html Code

Html Minifier Prettifier is a jQuery based online tool which minimizes and formats html source codes to make your html lighter and/or more readable.

See also:

• jQuery Plugin to Pretty Print and Minify Scripts

How to use it:

1. Add jQuery library and the jQuery Html Minifier Prettifier to your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/lib.js"></script>

2. Create a textarea element where the visitor can paste or write html code.

<textarea placeholder="Write or paste code here"></textarea>

3. Create buttons to minify or beautify the html code.

<button>Minify</button>
<button>Prettify</button>

4. Initialize the tool.

$(document).ready
(
  function()
  {
    code=$("textarea").eq(0);
    
    $("button").eq(0).click
    (
      function()
      {
        code.css('white-space', 'normal').show_code(code.minify());
      }
    );
    
    $("button").eq(1).click
    (
      function()
      {
        val=$.replace_tag(code.minify());
        el=$("<div></div>").html(val);
        $.prettify_code(el);
        code.css('white-space', 'pre').show_code($.undo_tag(el.html()));
      }
    );
  }
);

---

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