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.
Table of Contents
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!