Using LaTeX equations in markdown

[harshvardhaniimi]

I am unable to use LaTeX equations in the .Rmd or .Rmarkdown files. The markdown file renders the equation well, but the website shows the raw equation.

This issue was raised for the blogdown so I guess it is related to MathJax. I tried the solution suggested by yihui but it didn't work.

I'm new to Blogdown, and I learnt about this theme yesterday from your R-Ladies workshop on YouTube. So, if I missed something, please let me know.

[harshvardhaniimi]

Maybe not the best way to do it, but this solution by @Lauler worked!

I put the code below in footer.html (found at themes/hugo-apero/layouts/partials/footer.html).

<!-- 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 -->

[mikedecr]

@harshvardhaniimi I was working on this for my own site and can recommend a cleaner solution.

You're definitely on the right track by including a script for mathjax in the theme files, but it's best to avoid directly modifying the files in [site root]/themes/hugo-apero/... because those are the theme defaults. If you want to modify the content of those files, we can save your own versions in the site directory (mimicking the same tree structure as themes/hugo-apero/...) and Hugo will use those custom files instead of the defaults. For example, if I create my own [site root]/layouts/partials/footer.html, then Hugo will ignore the default [site root]/themes/hugo-apero/partials/footer.html and use my version instead. This lets us modify theme components modularly without corrupting the theme's defaults :)

So in the case of mathjax, we just need a way to insert the code in Yihui's example into a site "partial."
One way to do this is to copy the contents of (for instance) themes/hugo-apero/layouts/partials/footer.html into layouts/partials/footer.html and modify it like so:

<footer class="site-footer pv4 bt b--transparent ph5" role="contentinfo">
    [ ... all of the other code is here ...]  
    <script src="//yihui.org/js/math-code.js"></script>
    <script async
      src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
</footer>

which should give every page on your site the ability to render mathjax in a blogdown post. It's possible the first time you tried to use Yihui's solution you mentioned above because you didn't replace the YOUR_CDN_HERE component of the link. That piece of Yihui's solution is easy to miss at first, so I wanted to flag that.

The above should work, but if you wanted to be even more modular with this process, instead of putting the mathjax code directly into footer.html, you could call another partial that contains custom footer content: {{ partial "foot_custom.html" }}. That file could then contain the mathjax code or, indeed, further calls to other partials files. Because Hugo builds websites from lots of little pieces, it can be helpful to keep all of your custom little pieces organized in separate, well-labeled files for your own future comfort.

Hope this works

[apreshill]

Thank you! Help here is greatly appreciated, if you'd be willing to offer this partial as a PR to the theme I'd happily merge it in! Mathjax is in my todo list: hugo-apero/hugo-apero-docs#30

[harshvardhaniimi]

@mikedecr Moving footer.html to layouts/partials/ worked perfectly! Thanks for pointing to replace YOUR_CDN_HERE; I had missed it entirely.

@apreshill I will put this as a pull request for everyone's benefit.

Edit: Created pull requests for the theme (main...harshvardhaniimi:patch-1). I couldn't add the file to iyo-apero repo as it required write access.

[mikedecr]

@apreshill I could give this a shot combined with something like {{if site.Params.enableMathjax }} to let users set an option in the global config? I will need to dig around in the theme to get used to editing and testing a theme from its source repo.

[mikedecr]

@harshvardhaniimi if I could make a slight suggestion to your site based on the commit you submitted, I would recommend you make your layouts/partials/footer.html look like this:

<footer class="site-footer pv4 bt b--transparent ph5" role="contentinfo">
  <nav class="db dt-l w-100">
    <p class="site-copyright f7 db dtc-l v-mid w-100 w-33-l tc tl-l pv2 pv0-l mv0 lh-copy">
      {{ if ne site.Copyright "" }}{{ site.Copyright | safeHTML }}{{ else }}&copy; {{ now.Format "2006"}}{{ if site.Params.orgName }} {{ site.Params.orgName }}{{ end }}{{ if site.Params.orgLocal }}, {{ site.Params.orgLocal }}{{ end }}{{ end }}
      <span class="middot-divider"></span>
      Made with <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/hugo-apero/" rel="dct:source">Hugo Apéro</a></span>.
      <br />
      {{ partial "shared/attribution.html" }}
    </p>
    {{ if and (not .IsHome) (site.Params.socialInFooter) }}
    <div class="site-social-links db dtc-l v-mid w-100 w-33-l tc pv2 pv0-l mv0">
      {{ partial "shared/social-links.html" . }}
    </div>
    {{ end }}
    <div class="site-links f6 db dtc-l v-mid w-100 w-67-l tc tr-l pv2 pv0-l mv0">
      {{ range site.Menus.footer }}
      <a class="dib pv1 ph2 link" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
      {{ end }}
    </div>
  </nav>
  <script src="//yihui.org/js/math-code.js" type="text/javascript"></script>
  <script async src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML">  </script>
</footer>

In other words, place the calls to the two mathjax scripts within the <footer></footer> tags instead of creating a separate set of tags. And you definitely don't want to paste [ ... all of the other code is here ...] anywhere because that isn't HTML code, I was only typing that to stand in place of the rest of the code in that file!

[apreshill]

Hi @mikedecr -

I think I would prefer something like what I did here:

hugo-apero/layouts/partials/shared/comments.html

Line 8 in f761c96

{{ with site.Params.utterances }}

If you want to start a branch with a PR, I'm happy to respond inline!

Thank you- Alison