Github discussions and writing mathematics (deprecated)

UPDATE. I switched from MathJax to Katex, and from giscus to a fork of Commento++ which fixed some bugs in the latter and added Katex support. The fork is public here.

UPDATE 2. Github finally implemented math support in May 2022. Given this, I might soon switch back to giscus which I really liked. In any case this post is deprecated.

This website uses giscus to display comments. Giscus fetches data from github discussions and displays it on a website (it does a lot more, like autogenerating discussion threats and allowing users to post to github discussions from that website).

While the website itself uses MathJax to write nice formulas like \(e^{i \pi} = -1\), the comments are loaded in an iframe and thus use only giscus/GitHub scripts: for a while now, users are hoping that github will eventually implement support for writing mathematics in discussions and other places. So far this hasn’t happened, so here are work-arounds which can be used when posting in any markdown enabled environment (like the comments on this website).

The basic idea is to use a service that turns a formula in an image/vector graphic. Two such services are GitHub rendering and Codecogs. For instance, you can use an image tag like following in your markdown file.

<img src="https://render.githubusercontent.com/render/math?math=e^{i \pi} = -1">

Note that URL calls GitHub rendering (with obvious syntax) for generating the image. The advantage is that you can essentially write latex in the URL (it even allows to have spaces in your formulas); however, brackets, plus signs, and other things lead to problems and need yet other work-arounds.

• Inserting the above image tag into the source of this page outputs:

Essentially the same can be achieved by a markdown tag like the following.

![](https://latex.codecogs.com/svg.image?a&space;+&space;b&space;=&space;1)

Here, the relevant URL is rather garbled: it was generated on latex.codecogs.com. (Note that the markdown tag cannot be used with URLs that contain spaces unlike the image tag; you could of course use it with a Github Rendering URL which does not contain spaces).

• Inserting the above markdown tag into the source of this page outputs:

This second option is relatively ‘convenient’ as you only need to type ![]( ... ) and paste the URL in the brackets. The codecogs website further makes generating the required URL fast. Of course you could use the same URL with an image tag as well, if that syntax is easier to remember.

One encounters a small hiccup when trying to display formulas in this way using giscus comments, due the CSS that giscus uses: by default this prevents formulas to be displayed inline since it has a display: block styling for all images for some reason. Thankfully, giscus supports custom themes. By loading a a custom css file you can display formulas inline by adding the following to the file:

.gsc-comment-content img {
    display: unset;
    vertical-align: unset;
}

.gsc-comment-box-preview img {
    display: unset;
    vertical-align: unset;
}

This should make giscus comments display math formulas nicely inline on your website!