1. html
HTML pretty printer CLI utility (based on jsbeautifier)
html
Package: html
Created by: maxogden
Last modified: Sat, 18 Jun 2022 21:50:12 GMT
Version: 1.0.0
License: BSD
Downloads: 494,386
Repository: https://github.com/maxogden/commonjs-html-prettyprinter

Install

npm install html
yarn add html

html prettyprinter

A node port of beautify-html.js by Nochum Sossonko which is based on jsbeautifier by Einar Lielmanis

Installation

from npm (node package manager)

   npm install html

Usage (command line)

  echo "<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>" | html

returns:

   <h2>
      <strong>
          <a href=http://awesome.com>AwesomeCom</a>
      </strong>
      <span>
          is awesome
      </span>
  </h2>

html foo.html will write the prettified version to stdout.

html *.html will update in place all matching html files with their prettified versions.

Advanced usage

I find myself constantly using the 'Copy as HTML' feature of the Chrome Inspector:

Copy as HTML

The downside is that that usually the HTML that gets copied is pretty ugly:

Before pretty printing

On OS X you can use pbpaste and pbcopy to stream your clipboard in and out of unix pipes. With the ugly HTML still in your clipboard run this command:

pbpaste | html | pbcopy

Now when you paste your clipboard into an editor you will get nice, pretty printed HTML:

After pretty printing

Upgrading

grab the newest beautify-html.js from js-beautifier and drop it into lib/ as html.js. then add the following code to the bottom of html.js:

   module.exports = { prettyPrint: style_html }

BSD LICENSE

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin