Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save VictorNS69/1c952045825eac1b5e4d9fc84ad9d384 to your computer and use it in GitHub Desktop.
Save VictorNS69/1c952045825eac1b5e4d9fc84ad9d384 to your computer and use it in GitHub Desktop.
How to add LaTex formula to a Markdown

Problem

A lot of GitHub projects need to have pretty math formulas in READMEs, wikis or other markdown pages. The desired approach would be to just write inline LaTeX-style formulas like this:

$e^{i \pi} = -1$

Unfortunately, GitHub does not support inline formulas. The issue is tracked here.

Investigation

However, it does support them in Jupyter notebooks, scroll below to see an example. One might question how does it work in notebooks. It turns out that instead of relying on MathJax as nbviewer does, GitHub's notebooks renderer converts inline math to images with source URLs that look like this:

https://render.githubusercontent.com/render/math?math=e%5E%7Bi%20%5Cpi%7D%20%3D%20-1&mode=inline

Inspecting the URL, it is possible to notice that:

  1. The &mode=inline part is not required, the URL still returns the same image without it:

    https://render.githubusercontent.com/render/math?math=e%5E%7Bi%20%5Cpi%7D%20%3D%20-1.

  2. Modern browsers encode URLs automatically, thus this link would work as well:

    https://render.githubusercontent.com/render/math?math=e^{i \pi} = -1.

Solution

So the solution would be to insert this code in Markdown files:

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

and such an image would be rendered as .

This is more clumsy than just $e^{i \pi} = -1$, but it is still possible to write the formula by hand directly to the Markdown file this way.

Note that this syntax for image insertion would not work because the URL contains spaces:

![formula](https://render.githubusercontent.com/render/math?math=e^{i \pi} = -1)

Addition from 2019-10-30

I made a small app that allows to generate Markdown code from LaTeX using the method described above automatically.

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@VictorNS69
Copy link
Author

If you are interested in this post, just check the main gist https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b

@hakanai
Copy link

hakanai commented Sep 25, 2021

image

😆

@VictorNS69
Copy link
Author

image

😆

It is working, I promise!!! 😆 😆 .

image

It does not seem to work well with the dark theme 😥

@tautastic
Copy link

tautastic commented Oct 6, 2021

Any way to change the color to white?

Edit: The website you linked on "small app" sadly doesn't work. Would greatly appreciate such a program though, because I'm currently working on a math parser for school. So if you don't mind sharing the code I would greatly appreciate that 🤝

@tautastic
Copy link

tautastic commented Oct 6, 2021

Any way to change the color to white?

Edit: The website you linked on "small app" sadly doesn't work. Would greatly appreciate such a program though, because I'm currently working on a math parser for school. So if you don't mind sharing the code I would greatly appreciate that handshake

default color: formula

![formula](https://render.githubusercontent.com/render/math?math=\large\f(x)=sin(x))

red: formula

![formula](https://render.githubusercontent.com/render/math?math=\color{red}\large\f(x)=sin(x))

white: formula

![formula](https://render.githubusercontent.com/render/math?math=\color{white}\large\f(x)=sin(x))

@VictorNS69
Copy link
Author

Hi @ADD1609, thanks for this feature I didn't know about!! It is very useful 🚀

This Gist is only a fork from https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b, so I recommend you to visit the main Gist, as they are more active and @a-rodin is updating the Gist sometimes 😄

@rffontenelle
Copy link

@ADD1609 Is it possible to set a background color, to avoid black color in dark theme and white in light theme?

@puffnfresh
Copy link

@Equim-chan
Copy link

formula

@nschloe
Copy link

nschloe commented Jan 28, 2022

Alternatively, you can check out xhub. It's a browser extension I wrote that loads KaTeX into GitHub pages and let's you you math super easily in Markdown:

Display math:
```math
e^{i\pi} + 1 = 0
```
and line math $`a^2 + b^2 = c^2`$.

screenshot

The math color is always text-color, so it works on light and dark backgrounds alike.

@rffontenelle
Copy link

@nschloe Nice, but is there any alternative for Firefox?

@nschloe
Copy link

nschloe commented Jan 28, 2022

@rffontenelle Not right now, but I might add it once Firefox has Manifest v3 support (see here and here).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment