Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Latex rendering in README.md on Github

People also ask

Can GitHub render LaTeX?

GitHub has built-in support for rendering . ipynb files. You can write inline and display LaTeX code in the notebook and GitHub will render it for you.

Can Markdown render LaTeX?

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).


For short expresions and not so fancy math you could use the inline HTML to get your latex rendered math on codecogs and then embed the resulting image. Here an example:

- <img src="https://latex.codecogs.com/gif.latex?O_t=\text { Onset event at time bin } t " /> 
- <img src="https://latex.codecogs.com/gif.latex?s=\text { sensor reading }  " /> 
- <img src="https://latex.codecogs.com/gif.latex?P(s | O_t )=\text { Probability of a sensor reading value when sleep onset is observed at a time bin } t " />

Which should result in something like the next

Update: This works great in eclipse but not in github unfortunately. The only work around is the next:

Take your latex equation and go to http://www.codecogs.com/latex/eqneditor.php, at the bottom of the area where your equation appears displayed there is a tiny dropdown menu, pick URL encoded and then paste that in your github markdown in the next way:

![equation](http://latex.codecogs.com/gif.latex?O_t%3D%5Ctext%20%7B%20Onset%20event%20at%20time%20bin%20%7D%20t)
![equation](http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D) 
![equation](http://latex.codecogs.com/gif.latex?P%28s%20%7C%20O_t%20%29%3D%5Ctext%20%7B%20Probability%20of%20a%20sensor%20reading%20value%20when%20sleep%20onset%20is%20observed%20at%20a%20time%20bin%20%7D%20t)

I upload repositories with equations to Gitlab because it has native support for LaTeX in .md files:

```math
SE = \frac{\sigma}{\sqrt{n}}
```

The syntax for inline latex is $`\sqrt{2}`$.

Gitlab renders equations with JavaScript in the browser instead of showing images, which improves the quality of equations.

More info here.

Let's hope Github will implement this as well in the future.


My trick is to use the Jupyter Notebook.

GitHub has built-in support for rendering .ipynb files. You can write inline and display LaTeX code in the notebook and GitHub will render it for you.

Here's a sample notebook file: https://gist.github.com/cyhsutw/d5983d166fb70ff651f027b2aa56ee4e


Readme2Tex

I've been working on a script that automates most of the cruft out of getting LaTeX typeset nicely into Github-flavored markdown: https://github.com/leegao/readme2tex

There are a few challenges with rendering LaTeX for Github. First, Github-flavored markdown strips most tags and most attributes. This means no Javascript based libraries (like Mathjax) nor any CSS styling.

The natural solution then seems to be to embed images of precompiled equations. However, you'll soon realize that LaTeX does more than just turning dollar-sign enclosed formulas into images.

enter image description here

Simply embedding images from online compilers gives this really unnatural look to your document. In fact, I would argue that it's even more readable in your everyday x^2 mathematical slang than jumpy .

I believe that making sure that your documents are typeset in a natural and readable way is important. This is why I wrote a script that, beyond compiling formulas into images, also ensures that the resulting image is properly fitted and aligned to the rest of the text.

For example, here is an excerpt from a .md file regarding some enumerative properties of regular expressions typeset using readme2tex:

enter image description here

As you might expect, the set of equations at the top is specified by just starting the corresponding align* environment

**Theorem**: The translation $[\![e]\!]$ given by
\begin{align*}
...
\end{align*}
...

Notice that while inline equations ($...$) run with the text, display equations (those that are delimited by \begin{ENV}...\end{ENV} or $$...$$) are centered. This makes it easy for people who are already accustomed to LaTeX to keep being productive.

If this sounds like something that could help, make sure to check it out. https://github.com/leegao/readme2tex


One can also use this online editor: https://www.codecogs.com/latex/eqneditor.php which generates SVG files on the fly. You can put a link in your document like this: ![](https://latex.codecogs.com/svg.latex?y%3Dx%5E2) which results in: .