Blogging With Math

By David Buchanan, 26^th December 2023

In my previous blog post, I mentioned some big-O notation and simple math expressions like 2⁶⁴. My blog engine didn't have proper math syntax support, so I was stuck writing things like 2<sup>64</sup>, and leaving my big-O functions in plaintext, e.g. O(nlogn).

Not anymore! After a very simple patch to my markdown renderer, I can now write $2^{64}$ as $2^{64}$, or even $O(n\log n)$ as $O(n\log{n})$. Not only does this look better, its easier for me to type in. And if I really want to push the boat out, I can write fancy equations:

$$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$$

$$e^x={\sum }_{n=0}^{\infty }\frac{x^n}{n!}$$

Neat! And this is all the code it needed, most of which is unrelated to math support itself:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import mistune
from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.styles import get_style_by_name
from pygments.formatters import HtmlFormatter
from latex2mathml.converter import convert as convertlatex


class HighlightAndMathRenderer(mistune.HTMLRenderer):
	def __init__(self, *args, **kwargs):
		super().__init__(*args, **kwargs, escape=False)

	def block_code(self, code, info=None):
		if not info:
			return f'\n<pre>{mistune.escape(code)}</pre>\n'
		lexer = get_lexer_by_name(info, stripall=True)
		formatter = HtmlFormatter(
			linenos=True,
			cssclass="source",
			style=get_style_by_name("monokai")
		)
		return highlight(code, lexer, formatter)

	def block_math(self, text):
		return "<p>" + convertlatex(text, display="block") + "</p>"

	def inline_math(self, text):
		return convertlatex(text, display="inline")

renderer = HighlightAndMathRenderer()
md = mistune.create_markdown(
	renderer=renderer,
	escape=False,
	plugins=["math"]
)

I'm using mistune as my markdown renderer library, with a custom HTML renderer subclass, HighlightAndMathRenderer. Most of the logic here is actually for the code syntax highlighting, powered by pygments. The math input support is provided by mistune's default math plugin, which I customised by overriding default HTML output functions in my subclass. I use the latex2mathml library to convert the LaTeX syntax into MathML output, and it all Just Works.

There's nothing too clever going on here, just plugging some libraries together, but I was surprised by how easy it was. I didn't even need to make any changes to my CSS, the math comes out looking exactly how I'd like.

Maybe one day I'll publish the code behind my blog engine, there's not much to it, but it was written in a hurry by a version of me who was even worse at software development, so it needs a good refactor and cleanup first.