How to display Math on Github-Pages?

Hi, Is there a way to display Math from a markdown file on Github pages? (I know that it’s not possible for Github, but I would like to know if there’s an option to make it work for GH-Pages).

I’ve done a lot of tab-research but couldn’t come up with anything. Almost all of the content is geared towards the blogging system of Jekyll (or using it in HTML). However, I don’t want to use the blog feature of Jekyll, I just want to display simple math in my README.md (and other relative markdown files) on GH-Pages.

A link to the relevant topic would be much appreciated.

Thanks!

If you simply allow GitHub Pages to render your Markdown files into HTML without customizing the rendering yourself via something like Jekyll or another static site generator, then no. The default rendering of Markdown to HTML via GitHub Pages doesn’t include anything like MathJax for displaying formatted math formulae.

If you use Jekyll (or another static site generator), then you could change the default template to include MathJax like I’ve done on my GitHub Pages website:

I hope that helps!

I have no issues using Jekyll to generate my site (and then pushing the HTML). However, when I tried to use Jekyll, all I can see is the blogging feature.

To be more specific, say, I have a README.md file in my repo (with a relative link to foo/bar.md . (Both the markdown files contain math).

Now, I want to use Jekyll to convert these markdown files to HTML (with math included). I don’t want to use any other feature of Jekyll (more specifically, I don’t need a posts folder).

So, how would I go about implementing this?

I understand it’s not a domain of Github, but thanks in advance.

(Or is it not possible to convert a set of already existing markdown files on Github to HTML via Jekyll)?

You can use Jekyll without the blog functionality. If you take a look at the repository for my website, you’ll notice that I have a mixture of blog and non-blog content in there. The blog functionality is there to optimize for the most common use of static site generators, blog-like structures. If you want to have just a bunch of pages that you manually control the structure of, you can do that by linking to where they’re going to be generated into position like I do here:

1 Like

Thanks for the insights. I’ll take a look at your repo and (hopefully) setup my own. Have a good day!

1 Like

Also, slightly off topic, but do you know a workaround for jumping from GH-Pages to Github? The rules for redirection are fairly simple, (as you just need to add blob/master and do a small change in the url (which is just 1 or 2 lines of code using regex). I was surprised there wasn’t any plugins for this yet. My question is : Can I somehow tweak the source code to include a button that lets me jump to the file location on Github?

You can control all kinds of things like this when you use Jekyll (or another static site generator). I know that my friend and coworker @benbalter has some elements that I have yet to steal lovingly copy from his website such as a link to view a page’s revision history or submit a pull request to improve the page with the help of the jekyll-github-metadata plugin:

Screen Shot 2020-06-02 at 12.59.30 PM

Screen Shot 2020-06-02 at 12.59.39 PM

Basically, if your question is some derivative of “can I customize pages on GitHub Pages to … ?”, the answer is invariably going to be “with a static site generator such as Jekyll, yes” :grinning:

But the reason why you probably haven’t seen a plugin specifically for doing exactly what you described is that there are many reasons for wanting to link back to GitHub from a page. The jekyll-github-metadata plugin allows you to implement any of them.

1 Like

Right, Improve on Github as mentioned here was exactly what I was looking for.

I think I can take it from here. Thanks for the help!

1 Like