Blogging with KaTeX
Yet another blog post about adding KaTeX to your blog.
I’m not the first and certainly won’t be the last to write about adding to your Jekyll blog. I found this blog post particularly helpful when enabling for my blog and would encourage you to check it out as well.
1. Add Rendering Package
The first step is to add the kramdown-math-katex rendering package to your Gemfile such that your Gemfile looks something like this:
1 source 'https://rubygems.org' 2 gem "jekyll", "~> 3.9.0" 3 gem "jekyll-feed" 4 gem "jekyll-sitemap" 5 gem "kramdown-parser-gfm" 6 ~ gem "kramdown-math-katex" # <- New package
This package translates math blocks designated with $$ into appropriate HTML. For example, it can translate this text for Euler’s Equation
$$e^{ix} = \cos x + i \sin x$$
into the following HTML, partially copied below:
<span class="katex"><span class="katex-mathml">...</span>
The HTML should ultimately look something like this when viewed through your browser:
2. Use Rendering Package
Although we made the rendering package available through step 1 above, we need to tell kramdown to leverage this package when translating our Markdown files into HTML. You should specify “math_engine: katex” in _config.yml as shown below:
61 kramdown: 62 # Use KaTeX to render math equations 63 math_engine: katex
3. Include Dependencies
After steps 1 and 2, kramdown will parse our Markdown into appropriate HTML, but we will also need some additional files so that the HTML will display properly.
You will need to download fonts and katex.css.
I saved these files in a folder called katex, but how you manage these resources is up to you.
drwxrwxr-x - tim 21 Feb 11:04 N- katex drwxrwxr-x - tim 21 Feb 11:04 N- └── 0.15.2 drwxrwxr-x - tim 21 Feb 10:06 N- ├── fonts .rw-rw-r-- 26k tim 21 Feb 9:55 N- └── katex.css
In the HTML header definition for your blog posts (e.g. in _layouts/default.html), you’ll need to add the following:
{% if page.katex %}
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/katex/0.15.2/katex.css" />
{% endif %}
The {% if page.katex %} conditional allows you to control which blog posts actually include the CSS necessary for . So, any blog post that uses will need “katex: True” added to the header like this:
1 --- 2 layout: post 3 title: Blogging with KaTeX 4 katex: True 5 ---
That’s all there is to it! Hopefully these steps will work for you and you’ll be up and running with .