Stöd för formler

Vad ska jag ha det till?

Jag vill ha stöd för formler för att skriva färdigt om Peter Lundgren och klimatet. Här är några formler, på egen rad och i text:

\[ \begin{aligned} \sum_{i=0}^n i^2 &= \frac{(n^2+n)(2n+1)}{6} \\ y &= mx+c \end{aligned} \]

Det fungerar också att ha formler i text utan radbrott: \(\sum_{i=0}^n i^2\), \(\iint x\cos y dx dy\). Text kan komma efter matten.

Jag läste om olika tekniker och försökte få några stycken att fungera. Hela webbsidan bygger på markdown-filer. De konverteras till statiska HTML-filer, laddas upp till webservern och servas statiskt. Stöd för formler behöver alltså passa in i webbsidans arkitektur. Det ska också helst ladda snabbt och se snyggt ut.

Passa in i arkitekturen

Jag vill fortsätta med att primärt skriva texten i Markdown. För att lägga till ett inlägg behöver jag nu skriva en Markdown-fil, och lägga till dessa rader i python-filen:

 posts = [
   # ...
   Post(title="Stöd för formler",
     description="Kort om att lägga till LaTeX",
     date="?? ?? 2019",
     content_markdown_file="posts/test_math.md"),
   # ...
 ]
 

Jag vill ha något ungefär lika enkelt som att skriva matten mellan $-tecken i Markdown-filen. Huvudsteget i att bygga HTML-filen är att köra Markdown genom programmet Pandoc. Pandocs version av Markdown ska stödja redan stödja TeX-matte inom dollartecken. Jag behövde inte ens ändra några argument. Problemet var att det inte fungerade:

[WARNING] Could not convert TeX math '\sum_{i=0}^n i^2', rendering as TeX

Jag sökte på det, men kunde inte förstå varför. \iint x\cos y dx dy blev renderad korrekt, men inte summan. Jag försökte installera mer LaTeX-paket med texlive-full, men det hjälpte inte.

Snyggt och snabbt

Nuförtiden har Wikipedia formler i SVG-bilder. De verkar ha vissa brister, men det ser för det mesta snyggt ut, zoom ändrar i både formler och text, och det blir inte pixlat av inzoomning. Tidigare var det PNG-bilder.

Att bygga SVG-bilder på serversidan verkar alldeles för krångligt. Istället finns MathJax och KaTeX. Man skickar hela TeX-koden till klienten som ritar ut det genom ett JS-bibliotek:

Jag lade till MathJax. Folk på internet säger att det finns prestanda-problem och att olika fonter stöds dåligt. Men det verkar bra med de webbläsare som jag har testat med. Ska köra med det tillsvidare.