HTML / XML Formatter

The html / XML formatter makes it easy to read your html code.

How to use html Formatter?

  • Paste your html or xml code into the textbox.
  • Click on the format button.
  • Your Result is ready to copy

How to add HTML Formater code on your HTML page using javascript?

Step 1: Add following script file in your code

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

Step 2: Take a textbox. We want to format the code that will be inserted in them.

<textarea class="result" rows="10"></textarea>

Step 3: Take a button. Use it to call a javascript function.

<button type="button" onclick="formatter()"></button>

Step 4: Add following Javascript function in your code

function formatter() {
    var html = document.querySelector(".result").value;
    console.log(html);
    var beautify_html = html_beautify(html);
    document.querySelector(".result").value = beautify_html;
    console.log(beautify_html);
}

SOURCE CODE:

<html>

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js"></script>
        <script>
            function formatter() {
                var html = document.querySelector(".result").value;
                console.log(html);
                var beautify_html = html_beautify(html);
                document.querySelector(".result").value = beautify_html;
                console.log(beautify_html);
            }
        </script>
    </head>

    <body>
        <div class="card">
            <div class="card-body">
                <h1>HTML Formatter / Beautifier</h1>
                <div class="form-group">
                    <textarea class="form-control result" rows="10"></textarea>
                </div>
                <button class="btn btn-primary" onclick="formatter()">FORMAT</button>
            </div>
        </div>
    </body>

</html>