Show HN: Equations Explained Colorfully (KaTeX and Markdown)

Hi HN!

I am fascinated by various ways of explaining mathematical formulas easily — see “Science-based games and explorable explanations”: https://p.migdal.pl/blog/2024/05/science-games-explorable-ex.... In particular, I got inspired by “Understanding the Fourier Transform” by Stuart Riffle from 2011 (https://web.archive.org/web/20130318211259/http://www.altdev...), in which he color-coded the Discrete Fourier Transform formula and its description.

Yet, I saw that it has two issues. First, while many people appreciate it, creating them m...

Hi HN!

Yet, I saw that it has two issues. First, while many people appreciate it, creating them manually is a huge hassle. Second, it does not work well for colorblind people (as a few friends of mine told me).

So, I wanted to make it interactive, both to be able to choose the color scheme and so that it is useful in black and white (as you can hover and select terms).

For the syntax, I picked the default go-to, LaTeX (here it is rendered with KaTeX). For the description of the equation and explanation, I used Markdown, so it is easy to pick up.

I quickly realized that adding an online editor is a game-changer: what started as an optional extra became a default, always-visible part of the tool.

Some equations are more polished, some less so. Among others, there is the Schrödinger equation, the Euler equation, Shannon entropy, the grand canonical ensemble, and, of course, the Discrete Fourier Transform. I wanted to see how it works for various cases. Einstein's mass–energy equivalence serves as a starter template. Don’t be alarmed by the Maxwell equations with too many colors - I wanted to stress-test it.

You can export this to a standalone HTML file with its interactivity. Also, you can export the same formula to LaTeX (both a regular article and a Beamer presentation) and Typst. For LaTeX and Typst articles, it loses interactivity, but the colors are the same. In LaTeX Beamer, there is a slide-by-slide explanation of each term.

See: https://p.migdal.pl/equations-explained-colorfully/ Source (MIT license): https://github.com/stared/equations-explained-colorfully/

I am curious to hear your impressions!

If you want to add a formula, do so.

If you want to feature it so that it is useful in your class or course, I am happy to hear which.

Similar Posts