← BACK

add mathjax to github pages and jekyll

this note is basically a copy from bodunhu.com blog, but edited for correction

brief summary on how to add Mathjax v3 support to your Jekyll website
- Add the following line inside _config.yml located in your root directory. Usually it’s already included in most jekyll-based blog setup
```
  markdown: kramdown
```
- Create a file called mathjax.html insides _includes/, add these lines (these settings come from the Mathjax documentation):
```
  <script>
  MathJax = {
    tex: {
      inlineMath: [ ['$', '$'], ['\$', '\$'] ]
    },
    svg: {
      fontCache: 'global'
    }
  };
  </script>
  <script
    type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
  </script>
```
- For Jekyll, add this line in your _includes/head.html before </head>. In this example i encapsulate it in raw tag to avoid jekyll processing
```
		
  {% include mathjax.html %}
		
```
  - the original blog had a typo that written wrongly as ` {% include mathjax.html >}} `, which is missing the proper closing tag (likely because trying to avoid jekyll processing)
- Now you can write in-line math equations in your markdown file like:
```
  \$f(x) = x^2\$
```
```
  $f(x) = x^2$
```
  - The above text will be render to: $f(x)=x^2$

[!info]- Additional Info on Mathjax v2 and v3

If you are already using Mathjax v2 and wish to just convert it to v3, you may also try this configuration converter. There is a much more detailed guide but it may contain information unnecessary to average Hugo or Jekyll users.html) how to migrate from mathjax v2 to v3.

The most useful resource is the official Mathjax documentation.

References

Metadata

topic:: 00 Coding00 Coding
#MOC / for programming language, coding guide and libraries focusing on data analytics and html/css
- related:: mathjax in github Private or Broken Links
  The page you're looking for is either not available or private!
updated:: 2022-07-15 Private or Broken Links
The page you're looking for is either not available or private!
reviewed:: 2022-07-15 Private or Broken Links
The page you're looking for is either not available or private!
#Reference

← BACK

add mathjax to github pages and jekyll

brief summary on how to add Mathjax v3 support to your Jekyll website

References

Metadata