How to use MathJax in Jekyll in a details block?

Question

I want to use the inline math formula from MathJax in a Jekyll website inside a details tag.

Consider this block:

<details>
  <summary>Click to expand</summary>
  Function \\(f\\) leads to 

  $$ f(x) = x^2 $$ 

</details>

On my website I can view the $$ f(x) = x^2 $$ part but inline formula does not work.

Do you want a screen cast of the issue? but I can be reproduced by copying the above code example into a jekyll page — A.Dumas, Aug 03 '18 at 14:51
"copying the aove into a jekyll page" is not enough information The HTML output migh thelp but it's not clear what you are expecting. If you're using kramdown then check its special syntax for inline equations. — Peter Krautzberger, Aug 05 '18 at 09:52

score 0 · Answer 1 · answered Apr 07 '19 at 14:46

I'm not sure how to enable $ \sum_{thing}^{done} $, so far to enable in-line formatting with MathJax I've had to configure it to use $ \sum_{thing}^{done} $ . Which I've tested using your above code (with some other adjustments) and found to be functional!

`./test.html`

---
layout: page
permalink: /test/
title: Test
---
{%- include mathjax.html -%}


<details><summary>Click to Expand</summary>
Function $f$ leads to
$$
  f{ \left( x \right) } = x^{2}
$$
</details>

There's two versions for the mathjax.html includes...

Complex version can be found here apart of an answer that shows how to juggle using CDNs on production and non-CDN srcing for non-production builds.

Simple version can be found here apart of an answer that shows how to set various MathJax settings within the include file's <script> tags.

... I'll not be re-posting'em but the simple version is available for download from GitHub, just tap the raw button then Ctrl^s to save ;-)

This was tested using kramdown for the markdown interpreter along with mathjax: true set within a project's _config.yml file.

Some notes about the diff between the page code from the question and what I've posted

permalink is not required and was only used for testing the body of the page's code.
What's set for layout isn't important but without a permalink I believe that title becomes a requirement to have most layouts set cross-linking up correctly.
I'm not tabbing in by any amount until within a multi-line formatted block, while the question's code was only tabbed in by two () spaces, and it generally takes four to trigger a <code> block, I don't want the markdown interpreter to even get a whiff of an invite to muck-up the markup desired.
Using f{} (curly-braces around things having to do with f) pulls the parentheses a few pixels closer, not required for small stuff, however, it does make intentions that much more explicit for formatted and un-formatted versions.
Using \left( \sum_{thing}^{done} \right) allows the height of parentheses to grow a little bit in height.

Hopefully some of these tips have allowed ya to get past this hurdle.

How to use MathJax in Jekyll in a details block?

1 Answers1

./test.html

`./test.html`