Building a Website with Make4ht: An Overview

Basic Typesetting  

LaTeX, at its very core, provides a number of fundamental typesetting operations which should be considered necessary for any text-focused website such as:

• Paragraphing
• Sectioning
• Itemizations and Enumerations (Ordered and Unordered Lists)
• Basic Text Decorations
• Internal and External Links

The paragraphing and sectioning have already been well demonstrated by this document. Unordered lists have been demonstrated as well, but ordered lists have not. The following list mixes them as is allowed by both LaTeX and HTML:

• The articles in this project are:
  1. Overview
  2. LaTeX and Make4ht
  3. References and Footnotes
  4. Equations and Tables
  5. Code, Minted, and Pygments
  6. Raster and Vector Images
  7. Styling with CSS
  8. Building a Build System
• Future project topics might include:
  • Recreational Mathematics
  • Hobby Electronics
  • Creative Writing
  • Programming Projects
  • Music Compositions
  • Etc.

Simple text decorations are another fundamental feature that is easily accessible as demonstrated: Bold Font, Italic Font, Monospace Font, Underlines, and Overlines. Slightly more advanced decorations such as Double Underlines, Wavy Underlines, Dashed Underlines, Dotted Underlines, and Strikethroughs are also available with relative ease.

Internal and External links are also quite readily available, as seen with these internal links: §Goals, §Overview, §Basic Typesetting, and §Code Highlighting. Here is an external link to the Wikipedia article on LaTeX, and here is a link to the next article in this series which delves into much greater detail on what it takes to get the fundamentals of Make4ht working.

References and Footnotes  

Footnotes^D Footnotes such as this one! and references¹Make4ht. https://www.kodymirus.cz/tex4ht-doc/BasicTutorial.html. Accessed: 2026-01-10. provide a slight complication as the desired HTML behavior is substantially more complicated than simply putting text at the bottom of the page. As demonstrated here on the HTML version of this document, it is possible to have tooltip-like pop-ups for both footnotes and references in addition to placing an actual footnote at the bottom of the page just as with the PDF version of this document. Note that a good PDF viewer will likely preview the references and footnotes when hovering over the marker, not unlike a tooltip.

The process of getting these two features set up correctly is a bit more involved than the fundamental typesetting due to the dynamic nature of the feature, as such this link leads to a dedicated article on getting them working.

Equations and Tables  

LaTeX has powerful typesetting abilities for advanced math. Make4ht supports a few different methods for outputting math: as a raster or vector image, MathJax,²MathJax. https://www.mathjax.org/. Accessed: 2026-01-10. and MathML.³MathML. https://en.wikipedia.org/wiki/MathML. Accessed: 2026-01-10. Of these, MathML was chosen for the website. The following equations provide some arbitrary examples of the typesetting:

While equations are largely straightforward (if one is already familiar with LaTeX, that is), tables are an entirely different beast. Due to the semantic differences between how a LaTeX table and an HTML table are described, Make4ht natively uses some rather unfortunate workarounds to make the output look decent, though at the cost of making the underlying HTML rather unnecessarily verbose and potentially ill-formed. As such, this link leads to the article which discussed the steps required to get good looking tables that are also well-formed HTML code. Note that this makes heavy use of Python code for post-processing the Make4ht output into well-formed HTML. It is advised that the reader be at least familiar with Python’s syntax and have some hands-on experience before reading.

Table 1 showcases a periodic table of the elements made from scratch using almost entirely standard LaTeX code. Examples of more complex tables with more sophisticated multirow/multicolumn behavior and nested tables can be found in the dedicated article.

Code Highlighting  

As a one of the major types of content envisioned for the website is code (indeed it will already be necessary for the next article), it is imperative to have syntax highlighting available for all languages likely to be displayed. Getting this to work in a desirable fashion is not entirely straightforward and unfortunately requires sidestepping a lot of Make4ht’s machinery in order to get it to work well. That said, it is still entirely possible using the Minted⁴Minted. https://ctan.org/pkg/minted. Accessed: 2026-01-10. package for LaTeX, which is based on the Pygments⁵Pygments. https://pygments.org/. Accessed: 2026-01-10. Python library as seen in Listing 1:

import sys
from pygments import highlight
from pygments.lexers import (get_lexer_by_name)
from pygments.formatters import HtmlFormatter

class CodeHtmlFormatter(HtmlFormatter):
    def wrap(self, source):
        return self._wrap_code(source, include_div=False)
    #

    def _wrap_code(self, source, *, include_div):
        yield 0, '<pre class=\'' + sys.argv[2] + '\'><code>'
        for i, t in source:
            if i == 1:
                # it's a line of formatted code
                t += '</code><code>'
            #
            yield i, t
        #
        yield 0, '</code></pre>'
    #
#

def main():
    # argv[2] = lexer name
    # argv[3] = file path
    file = open(sys.argv[3], "rt")
    text = file.read()
    file.close()

    lexer = get_lexer_by_name(sys.argv[2])
    from pygments.formatters import HtmlFormatter
    print(highlight(text, lexer, CodeHtmlFormatter()))
#

if __name__ == "__main__":
    main()
#

The details of how to use the Minted Package for LaTeX and sidestep it to directly use the Pygments library can be found in its own article here.

Raster and Vector Images  

Images are easily one of the most critical features for any website and thus must be handled thoroughly. Fortunately, raster images (images based on pixel data) such as PNGs and JPEGs are handled out-of-the box with Make4ht. This can be seen demonstrated in Figure 1. Note in comparing the HTML and PDF versions of this document that the image is correctly scaled to the width of the column it is in. Animated raster graphics such as GIFs would be a nice addition to this system, but they aren’t considered critical for the base function of the website in part due to the complications of embedding them in PDF files.

Vector graphics are, at a base line, not any more difficult than raster graphics to include. It is a simple matter of including the file as one would any other. However, LaTeX also has powerful drawing and graphing capabilities thanks to the PGF and TIKZ packages. These allow the author to draw sophisticated vector graphics directly in the source code of their LaTeX document. While this does also work with vanilla Make4ht, it was found to be somewhat lacking, and thus a workaround was developed to ensure that the PGF and TIKZ drawings end up as SVGs embedded directly within the HTML files themselves.

Figures 2 and 3 provide demonstrations of the TIKZ and PGFPlots packages, respectively. Note the ability for elements of the images to change color when swapping between light and dark modes in the HTML version of the document.

A much longer, detailed description of the process to get both types of graphics working can be found here.

Styling with CSS  

With the HTML documents being generated and post-processed into the desired form, it is described here how to set up a CSS file that may be reused across multiple documents. This has two major benefits. First, it allows for style changes to happen in one place instead of across many files and, thus, ensures a consistent theme across an entire website or subset of it. Second, it reduces the size of each HTML document by allowing the reuse of the same styling. This may not be a large consideration in the modern day, but it does save a non-trivial amount of memory when used across many documents. It is also always good to minimize network traffic and respect users’ and readers’ RAM, if only out of principle.

The linked article discusses at length some details about particular features such as the recent light-dark function of CSS, icons appearing on hover, automatic line numbering for code listings as seen in Listing 1, image scaling, and dynamic vector graphic coloring.

Building a build system  

All of the content discussed thus far has been dedicated to setting up a system that allows for the compilation of a single PDF and HTML file from a TeX file. The tentatively final^E There are some features which might be included in the future such as GIFs (as previously mentioned), sheet music, audio, and perhaps even proper video. article in this series, linked here, discusses the development of a build system for an entire website which only recompiles files which have been updated while ensuring that the navigation links in all files stay up to date and well linked.