How to use Latex expressions in blogdown?

[gresch]

If I use

$$SE = \sqrt{\frac{s_{1}^{2}}{n_{1}}+\frac{s_{2}^{2}}{n_{2}}}$$

in the document the resulting HTML page shows this result

[SE = \sqrt{\frac{s_{1}^{2}}{n_{1}}+\frac{s_{2}^{2}}{n_{2}}}]

Can anybody help out?

[Lauler]

I ran into this. You have to load mathjax javascript library to display mathematical notation on your pages. The easiest way to do this is to insert the following snippet:

<!-- Loading mathjax macro -->
<!-- Load mathjax -->
    <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
    <!-- MathJax configuration -->
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true,
            processEnvironments: true
        },
        // Center justify equations in code and markdown cells. Elsewhere
        // we use CSS to left justify single line equations in code cells.
        displayAlign: 'center',
        "HTML-CSS": {
            styles: {'.MathJax_Display': {"margin": 0}},
            linebreaks: { automatic: true }
        }
    });
    </script>
    <!-- End of mathjax configuration -->

into one of the partials files which you're sure will be loaded on each of your posts. You can find these in layout/partials. In my case I put the code above in the sidebar.html file because the sidebar is guaranteed to load on all my posts.

For you it depends on which theme you have installed. Usually sidebar.html/header.html/footer.html are good bets. This is something which ought to be covered blogdown's documentation.

[yihui]

We will document this in the near future. The approach @Lauler mentioned has a potential problem, but I don't have the time to explain it in detail. You can see what I did in the default template of blogdown: https://github.com/yihui/hugo-lithium/blob/master/layouts/partials/footer_mathjax.html

[riversdark]

@yihui Hi is there a list of tested themes known to render equations properly? The default them hugo-lithium-blogdown looks a bit too simplistic..

The hugo-future-imperfect looks nice but does not render the equations. I tried simply copying the footer file you mentioned to the layouts folder but it messes some other things up. I know absolutely nothing about html.

[pzhaonet]

I don't understand why people have been talking about the Load mathjax codes. In my case, I simply set the option 'math = true' in config.toml and all the equations went perfectly the right way. My website is built by blogdown, hugo-academic theme.

But my story went another way as follows.

1. At the beginning, the LaTeX equations were not displayed correctly on my website.

2. I set the option 'math = true' in config.toml, and run 'blogdown::serve_site()'. Equations were still not correctly displayed in RStudio Viewer.

3. After trying many times, I clicked accidentally the Show in new window button at the topleft corner of RStudio Viewer, and surprisingly found that the equations were displayed correctly in Firefox!

For both the newest version 1.0.143 and the preview version 1.1.233 of RStudio.

So it is a problem of RStudio Viewer? Curiously.

My sessioninfo:

R version 3.3.3 (2017-03-06)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

[yihui]

@pzhaonet You can use math = true only because your theme supports it (thanks to the author of the hugo-academic theme). Hugo does not support MathJax out of the box.

There are known issues with RStudio Viewer on Windows. In particular, https resources are unlikely to work, which means (1) you have to use protocol-relative URLs for https resources, i.e. // instead of the hardcoded https://; (2) we must have access to the resources via http://, which depends on the server settings.

If you don't understand what these mean, your best choice is to pop out the web page from RStudio Viewer into your real web browser.

[pzhaonet]

Thanks for explanation. Lucky and proud to use hugo-academic theme!

[yihui]

Finally I have documented how to make MathJax work properly: https://bookdown.org/yihui/blogdown/templates.html This section is quite long but you will understand the nuts and bolts of Hugo much better.

[sillasgonzaga]

Does anyone know how to do this in blackburn theme?

[ThomasDelSantoONeill]

Hi I'm trying to enable latex notation in the skills widget in the academic configuration of blogdown. Any ideas on how to proceed? Thanks in advance.

[kongdd]

help! The preview of this markdown file works normally in rstudio. But this equation isn't shown in html.

$$
w\left(r_{i}^{k}\right)=\left\{\begin{array}{ll}{w_{i}^{k-1}\left(1-\left(r_{i}^{k} / 6 s\right)^{2}\right)^{2},} & {0<r_{i}<6 s} \\ {w_{m i n},} & {\left|r_{i}^{k}\right| \geqslant 6 s} \\ {w_{i}^{k-1},} & {-6 s<r_{i} \leqslant 0}\end{array}\right.
$$

[tcgriffith]

Hi, @kongdd

Your equation rendered fine on my machine

Source

My guess is that the mathjax library was not loaded correctly. In chrome you could hit F12 and check if there's any errors.

[kongdd]

Thanks for your reply.
I am rendering this equation in hugo blog. But it does not work.

[tcgriffith]

Ahh, I forgot to check the repo name.

Blogdown is another story because it doesn't use pandoc as the markdown engine so the latex is not supported. Please check the blogdown manual

In short, the issue is that not all Hugo themes have mathjax supported. The default Hugo-lithium theme has it, but the majority of Hugo themes do not have it.

You have two options:

• Use Rmd format for the blogdown posts, mathjax is embedded in the generated html and passed to Hugo.

• Get your hands dirty and set up mathjax for your theme.

[kongdd]

@tcgriffith Thanks for your detailed suggestion! Both of md and Rmd works now. I have to say Rmd is much simple.

[r-saikat]

Hey, I have a much simpler solution to this. This should be enough for HTML noobs like me who want to use any Theme. Just add the following to the head of the Rmd file where you want to use Math and proceed. This adds Mathjax to your webpage from a nearby CDN.

header-includes:

• <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
• <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Finally, the RMD should look like this:

---

title: "The tile of your page"
author: "Your Name Here"
date: 2020-09-23
categories: ["Replace this as you wish"]
tags: ["Replace this as you wish"]
header-includes:

• <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
• <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

---

Your text here which can now handle math equations.