Important Disclaimer

Please note that this method is targeted for Minima users. Minima is the best Jekyll Theme for beginners as it is the easiest to navigate. I will make a separate tutorial for Minimal Mistakes users!

How to include Math Symbols in Jekyll

Sometimes, you just want to include \(\LaTeX\) in your website \(ax^2+bx+c=0\)

If you want to know what \(\LaTeX\) is check out My Series

Note that in this website, we use \(\KaTeX\) instead of \(\LaTeX\).

For \(\LaTeX\) users you may ask: What is \(\KaTeX\)? Don’t expect me to put everything here, search online for more!

Like HERE

If you want to use \(\KaTeX\) in Jekyll, you first need to copy the _layouts and _includes files in GitHub. Afterwards, you need to include the necessary gems. Please refer to my Gemfile:

source "https://rubygems.org"


gem "minima"

group :jekyll_plugins do
  
  gem "jekyll-seo-tag"
  gem 'kramdown-parser-gfm'
  gem "sprockets", "~> 3.7" 
  gem 'jekyll-remote-theme'
  gem 'jekyll-feed'
  gem 'wdm', '>= 0.1.0' if Gem.win_platform?
end

gem 'duktape'
gem 'katex'
gem 'execjs'
gem 'kramdown-math-katex' 

gem "webrick"

gem 'jekyll-sitemap'

And afterwards you need to include the starter template in your custom-head.html in _includes. Just like this:


<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
</html>

Why it works?

How it works is that head.html has a line:

include custom-head.html

So the content in custom-head.html is included in head.html. This content is included in default.html as it has a line called:

include head.html

Which is included in post.html as it contains default.html. We have stated in the front matter:

---
layout: post
title: Jekyll and KaTeX
katex: True
catergories: Henry Yip
---

And therefore \(\KaTeX\) is included in this page!

Checking

According to The Official Website, for checking, simply type:

<style>
  .katex-version {display: none;}
  .katex-version::after {content:"0.10.2 or earlier";}
</style>
<span class="katex">
  <span class="katex-mathml">The KaTeX stylesheet is not loaded!</span>
  <span class="katex-version rule">KaTeX stylesheet version: </span>
</span>

Example:

The KaTeX stylesheet is not loaded! KaTeX stylesheet version:

If it is loaded properly, it’ll show its version. Make sure its version matches the version of the JavaScript file (katex.js), which is defined in katex.version. If it is not loaded properly, it’ll show:

The KaTeX stylesheet is not loaded!

Customization

According to the website, you can customize it by a bit. An example would be to allow line breaks in display equations.

.katex-display > .katex { white-space: normal }
/* Add space between broken lines: */
.katex-display > .base { margin: 0.25em 0 }
/* Compensate by reducing space around display math */
.katex-display { margin: 0.5em 0; }

End Results:

\(ax^2+bx+c=0\) Quite Cool isn’t it!

Updated: