html_css_js_beautifier

html_css_js_beautifier is a short Python example I put together in 2016 for indenting compressed or single-line HTML, CSS and JavaScript code into a readable form. The repository holds a single file, and that file hands the work over to the html5print library.

Purpose

A minified JavaScript or CSS file, meaning one squeezed onto a single line by removing spaces and line breaks, is almost impossible to read. I wrote this example to note down the shortest way to indent all three languages properly with the same library. It is part of a small series, together with the SQL, XML and JSON indenting examples I created on the same day.

How it works

The script imports the HTMLBeautifier, CSSBeautifier and JSBeautifier classes from html5print. A sample input is defined for each one: a JavaScript line, a single-line CSS rule and a partial piece of HTML. In the example, JSBeautifier.beautify is called with the JavaScript code and an indent width of four spaces, and the result is printed. The same call works the same way for the CSS and HTML classes.

Key features

• It shows three classes of the same library side by side for three different languages.
• The indent width is passed to the function as a parameter.

Technical stack

The code is written in Python and its only external dependency is the html5print library. It is not a module or a package; it is a starting example meant to be copied and adapted.

Status

This is a note-style example and has not been updated since 2016. The JavaScript line in the sample nests the same kind of quotation marks, so running the script as it is raises a syntax error. That line needs fixing when you use it with your own input.

Use cases

• It can be used to make a minified CSS or JavaScript file readable before reviewing it.
• It can serve as a starting point when adding HTML, CSS and JavaScript indenting to another Python tool.