Working around LaTeX and Plotly issue in Hugo Minimal

April 4, 2020
out-of-the-loop

I’ve noticed some wierd quirks about Hugo Minimal, which is the theme used for this website. There’s no indication it supports by default rendering of LaTeX with MathJax. However, I have no problem rendering LaTeX - see this post of mine for example.

What is problematic for me is including a plotly chart in a document that contains LaTeX. Plotly is nice if you want to include interactive plots in your documents. Here’s a scatterplot from the mtcars dataset.

library(plotly)
plot_ly(mtcars,
        x = ~hp,
        y = ~mpg)

For some reason if I include a plotly chart, LaTeX typed in the document will not render.

\(c^2 = a^2 + b^2 - 2abcos(C)\)

As shown above, you instead see the raw LaTeX.

The workaround that checks-out for me is using a LaTeX online editor like CodeCogs. The website converts math expressions you type to LaTeX. They automatically produce html code that can be copied and pasted into your document – even inline! So, I can write the law of cosines formula is with no issue, thanks to the html produced by CodeCogs. It looks like this:

<a href="https://www.codecogs.com/eqnedit.php?latex=\inline&space;c^2&space;=&space;a^2&space;&plus;&space;b^2&space;-&space;2abcos(C)" target="_blank"><img src="https://latex.codecogs.com/gif.latex?\inline&space;c^2&space;=&space;a^2&space;&plus;&space;b^2&space;-&space;2abcos(C)" title="c^2 = a^2 + b^2 - 2abcos(C)" /></a>

So I don’t know why LaTeX code renders natively without modifying Minimal’s Javascript, or why it it doesn’t render when I include plotly charts. One of those is a happy coincidence. Thankfully for the other one, you can turn to CodeCogs to sort it out!