Creating This Website

Creating a personal and/or professional website from scratch in the modern day is a way to take ownership of one's digital life. This article previews a series of several others related to the development of a website using the Make4ht LaTeX compiler. The process described requires a good working understanding of LaTeX first and foremost, but also HTML, CSS, Python, and a bit of Javascript. While this work is only a preview of the more in-depth articles, it fully demonstrates not just basic typesetting, but also tables, complex equations, code listings with syntax highlighting, and raster and vector images.

The most essential part of a system to generate any for of human-readable document is the basic typesetting. The inlcudes such necessary functions as paragraphing, sectioning, formatting ordered and unordered lists, and even some basic text decorations such as italics and bold fonts. For modern digital documents, there is also the very important feature of linking to both internal locations within a document and locations external to it. This article describes a method to customize the workings of Make4ht such that good, human-readable links are made in not just the text itself, but also in the hypertext which describes the target location of the link. Also provided is some customization of the aforementioned formatting and decorations.

References and footnotes are required for any sufficently complex body of text. While the implementation of these in LaTeX is straightforward, one must contend with the fundamental differrences between paginated documents and continuous ones for the translation to HTML. This article introduces substantial post-processing to the current system as it is, if not necessary, the easier way to resolve this conflict. Indeed, this allows one begin leveraging the power of a dynamic display by implementing tooltip-like behavior for both references and footnotes. This should create a smoother experience as readers will not be required to either jump to the bottom of the document or otherwise break their stride.

Equations and tables are key content types for this website that must be well handled. Fortunately, the translation of mathematical typsetting from LaTeX to HTML is handled extremely well by Make4ht, making the process nearly entirely painless. Unfortunately, the same can not be said for tables, though this is largely a consequence of the fundamentally different nature of how LaTeX and HTML tables are respectively defined. The bulk of this article is dedicated to detailing in some depth the process used to complete the translation process in a satisfactory manner.

Syntax highlighting for code listings is a a critical feature of any website which needs to display large amounts of code. To that end, the Minted package for LaTeX provides excellent support for it in the generation of pdf documents. However, the default output of Make4ht when using it is in need of some modification. Minted is based upon the the Pygments Python library which will be called directly in the customize of the syntax highlighting process.

Raster and vector images are fundamental pieces of media which must be well-handled in the process of converting LaTeX documents to HTML documents. Fortunately, this more-or-less the case with the default or near-default behavior of Make4ht. However, the special case of TIKZ and PGFplot images raises certain concerns which must be addressed in order to maintain a consistent look and feel across both the light and dark color modes of the website. A combination of the Externalization TIKZ package, the Inkscape vector drawing program, and some clever post-processing are presented in this article to fully address those concerns.

As has been alluded to many times in the preceeding articles, CSS is heavily used to ensure a clean and consistent style across the website while also providing certain functionalities which would be very difficult to achieve in plain HTML. Style-wise, colors and fonts are discussed. Functionality-wise, changing color modes, tool-tip behavior, syntax highlighting, code line numbering, and image scaling are all discussed.