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:

Answer 1

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