Problems with Math in the R blogdown package in .md files with HUGO
I was wondering if anyone can help me fix the following math rendering issue in the blogdown R package for Hugo static websites?
I took a screenshot of the latex code and below the resulting output.
Formulas render great in Atom Markdown-Preview-Plus. The font size of the formulas also seems to be large, but this is a more stylistic issue I suppose :)
Update 1: I narrowed the issue down to some kind of math rendering issue in the Hugo Academic theme (thanks @bethanyP for the link)
The code displays fine if I use the standard RStudio theme with huge lithium.
Update 2:
Adding the script below to the head_custom.html file makes the formulas work in Hugo Academic if you write the math both $$ math expression$$
with backsplashes before and after 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 the problems. Add the following code to your kern-academ.css file or follow hugo's instructions to add a custom css file:
code .MathJax {
color: black;
background-color: white;
}
Now all formulas are displayed correctly and in black :)
Copy / paste code:
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:
source to share
I finally got it to work, thanks @bethanyP for your help!
If you want to write advanced Latex math at Hugo-academy using the RStudio blogdown package in .MD files (note: plain markdown files, not R-markdown files), you should do the following:
Enable MathJax by adding a file to 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 topics / hugo -academia / static / css / hugo-academ.css and add the following code to display math with black font:
code .MathJax {
color: black;
background-color: white;
}
Use `` backlinks around $ inline-math $ or $$ display-math $$
Hope it helps!
The best
source to share
For a fraction, try underscore after the slash:
$2/_3$
should get a split character like the image above
And this works great for me ... I retyped your text and it seems OK, outside of the whitespace error or something I can't figure out why it doesn't work:
$$\begin{align}
\alpha & =1 \\
\alpha & = 2 \\
\end{align}$$
See screenshot below:
with a slash, try / _ again, but the rest of the big equation will get the code, not the image, so I can cut and paste to test yours, tweak and rescan.
source to share