How to prettify HTML documents at the terminal

Print Friendly, PDF & Email

When working with RESTful APIs, developers often hit API endpoints to test and look up data in either JSON or XML as the common formats. We have published two recent posts about prettifying JSON or XML documents on console windows if these documents are returned by the curl command to be used to call API endpoints. However, we sometimes need to open an HTML document from the terminal to perform a quick search or check. Many developers want to display this HTML document or its partial content in a nicer visualisation. We show in this post a tool published recently to support the format of HTML codes on the terminal.

What is the htmlq command?

Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files. In the post context, we present the option of this command which supports printing a piece of HTML code in a better view.

Installation and usage

Install

You can find all instructions for installation and usage on the tool’s website: https://github.com/mgdm/htmlq.

On MacOS, just run this command: brew install htmlq to install htmlq on your machine.

Usage

Pretty-print an HTML file

$ cat test.html | htmlq -p

<html>
  <head>
    <title>My web page
    </title>
  </head>
  <body>
    <h1>
      Hello, world!
    </h1>
    <p>
      This is my first web page.
    </p>
    <p>
      It contains a <strong>main heading</strong> and <em> paragraph </em>.
    </p>
  </body>
</html>

Pretty-print a webpage

$ curl --silent https://mgdm.net | htmlq --pretty '#posts'

<section id="posts"><a class="header-link" href="/weblog/">
    <h2>Weblog
    </h2></a>
  <ul class="post-list">
    <li>
      <div class="post-title">
        <div class="post-title-link"><a class="header-link" href="https://mgdm.net/weblog/adventures-in-digital-radio/">
            <h3>Adventures in digital radio
            </h3></a>
        </div>
        <div class="deemphasise post-timestamp">
          <time datetime="2022-12-22" pubdate="">
            22/12/2022</time>
        </div>
        <p class="post-description">
          New ways to talk to people about the weather
        </p>
      </div>
    </li>
....
....
....
<p class="more">
    <a href="/weblog/">
      More posts</a>
  </p>
</section>

 

That’s it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.