Hexo and KaTeX

Posted on | Edited on | In | Comments: | Views:

Now we’ve build our Hexo site on GitHub and seen Hexo’s “Hello World” post, it’s time to embed KaTeX.

1. hexo-math

Install

1
$ npm install hexo-math --save

If it doesn’t work on your Mac, try sudo.

1
$ sudo npm install hexo-math --save

Config

In your Hexo root directory, find _config.yml, add this code at the end. Don’t change those indents.

1
2
3
4
5
6
7
8
9
math:
  engine: katex
  katex:
    css: https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css
    js: https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js
    config:
      # KaTeX config
      throwOnError: false
      errorColor: "#cc0000"

2. hexo-theme-next

“«NexT» is a high quality elegant Hexo theme. It is crafted from scratch, with love.” Let’s install it. Change dir to your local Hexo root directory, make sure you see subdirectories like node_modules, source, themes, etc.

1
2
3
$ cd MyBlog
$ ls
_config.yml  node_modules  package.json  public  scaffolds  source  themes

Clone the whole theme repository to your local Hexo root directory.

1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

3. hexo-theme-next Math Equations

Install hexo-renderer-markdown-it-plus

You need to uninstall the original renderer hexo-renderer-marked first.

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

Config

In your themes/next/_config.yml, below Third Party Services Settings, find the following parts and change some of them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Math Equations Render Support
math:
  enable: true
  per_page: false
  #engine: mathjax
  engine: katex
  ...
  ...
  katex:
    # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css
    #cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

    copy_tex:
      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
      enable: true
      copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
      copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

Make sure the KaTeX version you set in both _config.yml and themes/next/_config.yml are 0.10.0, the default version 0.7.1 doesn’t work. “copy_tex” is enabled and it will bring us a bonus(see the bottom of this page).

Don’t Forget:

In your Hexo root directory, open _config.yml, then replace theme: landscape with theme: next.

4. Usage

Inline

1
Aha! $E = mc^{2}$.

Output:
Aha! E=mc2E = mc^{2}.

Block

1
2
3
4
$$
\left(\beta m c^2 + c \left(\sum_{n=1}^3\alpha_n p_n\right)\right) \psi(x,t)
= i\hbar \frac{\partial \psi(x,t)}{\partial t}
$$

Output:

(βmc2+c(∑n=13αnpn))ψ(x,t)=iℏ∂ψ(x,t)∂t\left(\beta m c^2 + c \left(\sum_{n=1}^3\alpha_n p_n\right)\right) \psi(x,t) = i\hbar \frac{\partial \psi(x,t)}{\partial t}

Bonus: Select this funcion and paste it in a text editor. What do you get? It’s a KaTeX format text! COOL!

More info: KaTeX Supported Functions