pdf2html.knit

Guide: Converting LaTeX Lecture Notes to Accessible HTML

My Gemini AI had written some scripts that helps me to convert PDFs generated in .tex into HTMLs. Here is the instruction that the AI had written. I hope it will be helpful for you.

You may get more personal help from asking large langugage models–they are very good at helping this type of logistical stuffs.

This setup uses a Makefile to automate the process of turning standard LaTeX (.tex) documents into both publication-quality PDFs and highly accessible, responsive HTML web pages.

Step 1: One-Time Software Setup

Before running the commands, ensure your computer has the necessary underlying tools installed:

Pandoc: The document converter engine. (Install via Homebrew: brew install pandoc, or download from the official site).
LaTeX Distribution: Ensure you have MacTeX or TeX Live installed so that pdflatex is available in your terminal.
Command Line Tools (Mac Only): Open your terminal and run xcode-select --install to enable the make command utility.

Step 2: File Organization

Place your target .tex files into a dedicated folder. Then, drop these three utility files into that same exact folder:

Makefile – The automation script that coordinates the compilers.
mathjax_conf.html – The configuration file that enables automatic AMS equation numbering (1), (2) on the web browser.
academic.css – The stylesheet that formats the HTML layout, fonts (Georgia/Helvetica), table structures, and code blocks for an elegant academic look.

Step 3: Run the Compilation

Open your Terminal application.
Navigate to your project folder using the change directory (cd) command:

cd /path/to/your/lecture/notes/folder

Type the magic command and press Enter:

make

How It Works Behind the Scenes

The Makefile automatically detects every .tex file in the folder.
It runs pdflatex to output a traditional PDF.
Simultaneously, it triggers pandoc using standalone flags, embeds the MathJax headers for flawless mathematical rendering, and binds your custom academic.css typography to the final output.

Pro-Tip: If the folder gets cluttered with auxiliary LaTeX compilation logs (like .aux, .log, or .toc), simply type make clean in your terminal to instantly wipe away the clutter without touching your valuable PDF or HTML outputs!

Personal Tips

[Equation reference] Change \eqref{...} to $\eqref{...}$ . Otherwise the conversion will not correctly identify the numbering.

[Title of the document] Remember to add the title and author to the documents using \title{} and \author{}. Some built-in title and author will be removed after the conversion. For instance:
\title{UW STAT 581: Advanced Theory of Statistical Inference I (2026 Autumn)\\
Chapter 1 Elementary Decision Theory}
\author{Instructor: Yen-Chi Chen}

[Adding an empty set at the beginning] Add an empty bracket right after \begin{document}. Somehow the conversion always skip the first word and I found that adding this bracket solves the problems.
\begin{document}
{}
### remaining of the contents

[Place academic.css on your website with the .html] Remember to place the academic.css in the same folder as those .html files on your website. Otherwise the html pages will not render the elegant format in academic.css.

[Upload figures in the relative location to .html] Unlike PDF, the .html requires figures to be uploaded in the same folder as the .html. For instance, suppose I have the following code in .tex:
\includegraphics[width=2.5in]{R_source/plots/Lec02_01.pdf}
Then at the location where I have the .html webpage, I need to create a folder named R_source and a subfolder named plots and place the figure Lec02_01.pdf at the the folder R_scource/plots/.