Problems with Math in R blogdown package in .md files with HUGO

Question

I was wondering if anyone can help me fix the following problem with math rendering in the R blogdown package for Hugo static websites?

I made a screenshot showing the Latex code and below the output I get.

The formulas render fine in Atom Markdown-Preview-Plus. The font-size of the formulas also seems to be to large, but that is more a stylistic problem I guess:)

Update 1: I narrowed the problem down to some issue with Math rendering in the Hugo Academic theme (thx @bethanyP for the link)

The code renders fine if I use the default RStudio huge-lithium theme.

Update 2:

Adding the script below to the file head_custom.html makes the formulas work in Hugo Academic if you write math like $$ math expression$$ with backticks before and after the dollar signs:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});
</script>
<script async type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Update 3:

So, I finally solved all problems. Add the following code to huge-academic.css or follow the hugo academic instructions to add a custom css file:

code .MathJax {
  color: black;
  background-color: white;
}

Now all formulas are rendered properly and in black:)

Code for copy/paste:

1:

$$\begin{align}
\alpha & = 1 \\
\alpha & = 2 \\
\end{align}$$

2:

$$\underbrace{P(Jar~1 | Nut~Cookie)}_{\text{posterior}} = \frac{\overbrace{P(Nut~Cookie | Jar~1)}^{\text{likelihood}}\overbrace{P(Jar~1)}^{\text{prior}}}{\underbrace{P(Nut~Cookie)}_{\text{normalizing constant}}}$$

Screenshot:

Note: cdn.mathjax.org is nearing its end-of-life, cf. https://www.mathjax.org/cdn-shutting-down/. — Peter Krautzberger, Apr 11 '17 at 15:19

score 2 · Accepted Answer · answered Mar 23 '17 at 22:01

I finally got it to work, thx @bethanyP for your help!

If you want to write advanced Latex math in Hugo-academic using RStudio blogdown package in .MD (note: plain markdown not R-markdown files) files you have to do the following:

Enable MathJax by adding a file into layouts/partials/ called "head_custom.html" with the following code:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});
</script>
<script async type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Then go to themes/hugo-academic/static/css/hugo-academic.css and add the following code to render the math with black font:

 code .MathJax {
  color: black;
  background-color: white;
}

Use `` backticks around $inline-math$ or $$display-math$$

Hope it helps!

Best

Note: cdn.mathjax.org is nearing its end-of-life, cf. https://www.mathjax.org/cdn-shutting-down/. — Peter Krautzberger, Apr 11 '17 at 15:19
[@Cristoph](https://stackoverflow.com/users/4820430/christoph) and if you want to write in a rmd file? — Cristóbal Alcázar, Jul 29 '17 at 15:42
Just a disclaimer: RMD will still not work if you rendering your site via a hugo theme which does not support MathJax by default... learnt that the hard way — RK1, Dec 03 '18 at 12:37

score 1 · Answer 2 · answered Mar 21 '17 at 21:51

1

For the fraction try the underscore after the forward slash:

 $2/_3$

should get you the division symbol like the image above

And this works fine for me...I retyped your text and it seems OK, outside of a spacing error or something I cannot see why it is not working:

 $$\begin{align}
 \alpha & =1 \\
 \alpha & = 2 \\
 \end{align}$$

See the screen capture below:

with the slash, again try /_ but the rest of the big equation it would help to have the code, not an image, so I can cut and paste to test yours, tweak and repost.

answered Mar 21 '17 at 21:51

sconfluentus

4,693
1
21
40

Thx for the fast reply! @ your solution for $2/3$: Using an underscore is only a work-around imo, since the number is then rendered as a subscript to the "/". But a nice work-around, thx! Using \frac{}{} also works, but sometimes I just want "/". There seems to be an issue with interpreting plain "/" only. @begin{align}: Do you use RStudio's blogdown package or plain Hugo? Using the blogdown package, it only renders properly if I use .RMD files, but not in .md files. I added the code to my question for copy/paste, thx for pointing that out – Christoph Mar 21 '17 at 22:18
1

I think I see the issue..so in regular markdown, the math engine is different, you need to run the equation inside of an escaped pair of parentheses `\( your mathy stuff in here )\`. There is a great resource for using blogdown check out some of the differences and you should get past the hurdles you are facing. And yes, I was using rMarkdown with is different in some instances.. https://bookdown.org/yihui/blogdown/output-format.html – sconfluentus Mar 22 '17 at 00:29
Thx a lot for the link. Math renders well with the default huge-lithium theme, the issue seems to be how the Hugo Academic theme handles math expressions. I will make that clear in the question. – Christoph Mar 22 '17 at 18:31

Problems with Math in R blogdown package in .md files with HUGO

2 Answers2