DEV Community

Aaron Choo
Aaron Choo

Posted on

Display LaTeX Math in GitHub Markdown Previews

TLDR: install the Chrome extension, or check out the MIT licensed repo:

GitHub logo AaronCQL / katex-github-chrome-extension

A chrome extension to display LaTeX flavoured math in GitHub Markdown previews.

Motivation

As a computer science student, I primarily take my course notes in Markdown, which would eventually be pushed to GitHub. However, it's 2020 and GitHub still does not support LaTeX\LaTeX flavoured math when previewing Markdown content (GitHub please...).

There is already an existing Chrome extension for this exact use case. However, I was unable to load the package via the Chrome store for some reason, and had to load the raw package from the GitHub source.

Initially, I was happy with it, but I soon felt that the rendering becomes really sluggish when the Markdown file grows sufficiently large (probably because it uses MathJax internally). Moreover, GitHub recently revamped their website, and it now behaves more like a SPA. This means that some internal navigation in the loaded web page does not refresh the whole page, resulting in the extension failing to render the math.

Features

This new extension serves to solve the above problems. It uses KaTeX\KaTeX internally for fast and efficient rendering. It is also able to detect and work with the SPA-like internal navigation, and will even render the math when editing Markdown content (when clicking Preview changes). For now, it only targets Markdown previews, leaving code blocks and code previews untouched (since this is my exact use case).

Conclusion

This project is relatively new - if you happen to find any bugs, feel free to open an issue. I have already documented some known issues which I do not yet have answers for (if you happen to have a solution, please open a PR 😁).

Top comments (0)