Preface

First, it should be emphasized that using HTML means we are going to do Vibe Coding, because HTML+CSS is really not suitable for humans to write by hand; even adjusting styles can be extremely painful. But as a format presented to humans, HTML offers a very high degree of style customization and can reuse existing frontend skills, completely outperforming Markdown and Beamer. On the other hand, unlike PPT, HTML is a plain-text file, which makes it naturally suitable for fully automated writing by AI.

Background

Why did we use Markdown and Beamer before?

• Markdown: It is simple to write, has a clear hierarchy, supports LaTeX formulas, and is very suitable for writing documents or notes. It is an alternative to LaTeX or Word.
• Beamer: It provides automated typesetting, has quite a few templates (though not necessarily good-looking), makes it convenient to write formulas, and is an alternative to PPT.

But the problem is that although Markdown is acceptable for AI to read, it is still not beautiful or fancy enough for humans; Beamer is hard to fine-tune in terms of styling, lacks support for videos and animations, can easily produce text overlap and overflow when automatically written by AI, and cannot directly borrow many excellent frontend designs. HTML can solve these problems relatively easily.

Support for Code Blocks and Mathematical Formulas

Although we call it HTML, more precisely it is a single HTML file with embedded CSS and JS. With JS, code blocks and mathematical formulas can also be supported using libraries such as Highlight.js and KaTeX.

Exporting as PDF

Once we have an HTML file, we can open it directly in a browser (designed with PPT logic: displaying a single page and using the arrow keys to turn pages). If we want a PDF file, we can also use the browser's print function to achieve that, while basically preserving the formatting (as long as it is configured properly in the HTML file and "include background graphics" is selected when printing).