CSS Formatter / Beautifier in Javascript

If you want to format the CSS code properly or see how to format the CSS code in javascript, you can see the code given below. We will format the css code using the js-beautify library.

How to use CSS Formatter?

  • Paste your CSS / SCSS code into the textbox.
  • Click on the format button.
  • Your Result is ready to copy

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

JS Beautifier library CDN:

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

Syntax:

var css_string = STRING;

var beautify_css = css_beautify(css_string);

console.log(beautify_css);

SOURCE CODE:

<html>

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

    <body>
        <div class="card">
            <div class="card-body">
                <h1>CSS 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>

Related Posts:

HTML Formatter / Beautifier in Javascript

Format your HTML file code with the help of HTML formatter. The html formatter makes it easy to read your html code. Using JS Beautifier library we can format HTML File...read more