hugo-theme-learn icon indicating copy to clipboard operation
hugo-theme-learn copied to clipboard

Getting Mathjax to work

Open albi3ro opened this issue 5 years ago • 5 comments

I'm trying to get Mathjax and the hugo learn theme to work together on a new site I'm building. For a .md file, inline math equations are not rendering. I have tried

  • $formula$
  • \( formula \)
  • ( formula)

none of which render inline. As you can see in the screenshot of the page,

firefox_screenshot_2018-10-30t18-11-26 155z

I currently have placed the mathjax script

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"> </script>

in \themes\hugo-theme-learn\layouts\partials\header.html and the snippit shows up in the header of the page.

Any idea what I should try next?

albi3ro avatar Oct 30 '18 18:10 albi3ro

Please could you share a block of markdown text where you try and render an equation? It's difficult to investigate this without any sample code.

matalo33 avatar Nov 01 '18 23:11 matalo33

Hi @matalo33 - This would also be of interest to those using blogdown in R, which often makes heavy use of mathjax. I can provide example markdown from one of blogdown's stock example posts:

---
title: "A Plain Markdown Post"
date: "2016-12-30T21:49:57-07:00"
---

This is a post written in plain Markdown (`*.md`) instead of R Markdown (`*.Rmd`). The major differences are:

1. You cannot run any R code in a plain Markdown document, whereas in an R Markdown document, you can embed R code chunks (```` ```{r} ````);
2. A plain Markdown post is rendered through [Blackfriday](https://gohugo.io/overview/configuration/), and an R Markdown document is compiled by [**rmarkdown**](http://rmarkdown.rstudio.com) and [Pandoc](http://pandoc.org).

There are many differences in syntax between Blackfriday's Markdown and Pandoc's Markdown. For example, you can write a task list with Blackfriday but not with Pandoc:

- [x] Write an R package.
- [ ] Write a book.
- [ ] ...
- [ ] Profit!

Similarly, Blackfriday does not support LaTeX math and Pandoc does. I have added the MathJax support to this theme ([hugo-lithium](https://github.com/yihui/hugo-lithium)) but there is a caveat for plain Markdown posts: you have to include math expressions in a pair of backticks (inline: `` `$ $` ``; display style: `` `$$ $$` ``), e.g., `$S_n = \sum_{i=1}^n X_i$`.^[This is because we have to protect the math expressions from being interpreted as Markdown. You may not need the backticks if your math expression does not contain any special Markdown syntax such as underscores or asterisks, but it is always a safer choice to use backticks. When you happen to have a pair of literal dollar signs inside the same element, you can escape one dollar sign, e.g., `\$50 and $100` renders "\$50 and $100".] For R Markdown posts, you do not need the backticks, because Pandoc can identify and process math expressions.

When creating a new post, you have to decide whether the post format is Markdown or R Markdown, and this can be done via the `ext` argument of the function `blogdown::new_post()`, e.g.

astewart-twist avatar Dec 04 '18 18:12 astewart-twist

Since I was experiencing the same issue with the Hugo mainroad theme, I had a look: the mathjax config seems to be missing. If you add it to the partial where you load the mathjax js file from the CDN, simply add this below your script element:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} })
</script>

Something like $\mathcal{N}(0,\,1)$ should be working with this change.

thomasweitzel avatar Mar 03 '19 14:03 thomasweitzel

I've placed the above scrip into header.html as suggested by @albi3ro and it's working for .Rmd files.

TanjaKec avatar Mar 01 '20 07:03 TanjaKec

I put both scripts mentioned by @thomasweitzel and @albi3ro below the

element in header.html, and it's working for .md files. Thanks!

rnahumaf avatar Jul 18 '20 21:07 rnahumaf