# Math on GitHub Pages

Display math formulas on GitHub Pages using LaTeX. Two methods are described, one using MathJax to render formulas client side, and other using KaTeX to render formulas server side.

Math

## Goal

I have been searching a process to display math formulas, written in LaTeX in a website for a long time. Now I think I can share my knowledge, hoping it can help other people to divulge math.

### Using MathJax

This is the preferred method, cause MathJax is more complete than KaTeX and it is supported on GitHub Pages, see Jekyll Math Support section.

Just make sure you use the kramdown markdown processor, which is the default. If you don’t know what I mean, it is ok, it means that you are using the default provided by GitHub Pages so you don’t need to worry about it.

Just use a double dollar sign $$ to escape LaTeX formulas you can use an inline formula$$\forall x \in R$$like this one  you can use an inline formula $$\forall x \in R$$ like this one or display a centered formula like this $$
M = \left( \begin{array}{ccc}
x_{11} & x_{12} & \ldots \\
x_{21} & x_{22} & \ldots \\
\vdots & \vdots & \ldots \\
\end{array} \right)


$M = \left( \begin{array}{ccc} x_{11} & x_{12} & \ldots \\ x_{21} & x_{22} & \ldots \\ \vdots & \vdots & \ldots \\ \end{array} \right)$

To let MathJax do its magic, add this script in your page

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>


For example in my thesis website I created an _includes/lib/mathjax.html I can use in any page with a Jekyll include like

{% include lib/mathjax.html %}


NOTA BENE formulas are not rendered in the GitHub website but on your GitHub Pages website, emh like this one you are reading right now.

### Using KaTeX

I am going to show how to render math snippets server side with KaTeX in order to import them in your GitHub Pages static web site using Jekyll include feature. Note that client side rendering is also possible, but it is not in the scope of this article, by now.

This is an updated version of the original article, that contained a different solution using MathJax and Redcarpet markdown. That solution is obsolete, I found KaTeX and server side rendering, a far better solution.

What is KaTeX?

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

Install katex cli, with npm do

npm install katex -g


Create two folders that will contain inline and display snippets

mkdir -p tex-snippets/inline
mkdir -p tex-snippets/display


An inline snippet, like $\forall x \in R$ , does not break its row.

A snippet in display mode will be centered, usually it is a formula, for example

$M = \left( \begin{array}{ccc} x_{11} & x_{12} & \ldots \\ x_{21} & x_{22} & \ldots \\ \vdots & \vdots & \ldots \\ \end{array} \right)$

Create file tex-snippets/inline/for-any-real.tex with the following content

\forall x \in R


Create file tex-snippets/display/matrix.tex with the following content

M = \left( \begin{array}{ccc}
x_{11} & x_{12} & \ldots \\
x_{21} & x_{22} & \ldots \\
\vdots & \vdots & \ldots \\
\end{array} \right)


Create two folders that will contain inline and display rendered output in your Jekyll includes folder

mkdir -p _includes/math/inline
mkdir -p _includes/math/display


Generate html output

cat tex-snippets/display/matrix.tex | katex --display-mode > _includes/math/display/matrix.html
cat tex-snippets/inline/for-any-real.tex | katex > _includes/math/inline/for-any-real.html


Finally, add KaTeX CSS to your html page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">


If you read KaTeX Usage, there is also a JavaScript tag to add, but it is required only for client side rendering.

Now you can include the snippets in your website using Jekyll include tags

• {% include math/inline/for-any-real.html %}
• {% include math/display/matrix.html %}