Katex: single or double dollar sign as formula delimiter

[redstoneleo]

I want to use a pair of single dollar sign as formula delimiter for inline style math formula and double for display style , my settings as following

<script>
    renderMathInElement(document.body,{delimiters: [
                        {left: "$", right: "$", display: false},
                      {left: "$$", right: "$$", display: true}
]});

</script>

This caused KaTeX to render well for inline style math formula but not for display style , any good solutions ?
BTW, the same delimiter rule works well for MathJax, I just want to use KaTeX as an replacement Of MathJax for speed reason .

[xymostech]

Hi @redstoneleo! I think the problem is that the auto-render plugin searches through the delimiters from first to last searching for a match. So, when it sees a $$ with your list of delimiters, it matches an empty inline math instead of a display math block. What happens if you try reversing the order of the delimiters?

[redstoneleo]

@xymostech Thank you, after reversing the order of the delimiters as following

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script>
<script>
    renderMathInElement(document.body,{delimiters: [
                        {left: "$$", right: "$$", display: true},
                      {left: "$", right: "$", display: false}
]});

</script>

It magically works !
options is an optional object argument in function renderMathInElement(elem, options) according here https://github.com/Khan/KaTeX/blob/master/contrib/auto-render/README.md
So Does key order matter for javascript object? especially for options object here ? BTW, I am not familiar with JavaScript

[edemaine]

@redstoneleo If you look closely, there is no key order issue here --- there are two dictionaries wrapped in an array (with [...]). So they are definitely ordered, and yes, order matters for the purpose of auto-render.

@xymostech This seems like a natural use-case and an easy "gotcha". Perhaps we should mention the issue explicitly in auto-render's README? "If you use both $ and $$ delimiters, be sure to list $$ first."

[csilvers]

If the API allows it, you could sort the delimiters by length (longest left-delimiter to shortest). This is a trick I often use to make sure you find the longest matching prefix first.

[xymostech]

@csilvers I think doing that sorting makes the most sense.

It should be pretty easy to do, just a small change in auto-render.js. Maybe we could leave this open as an easy beginner task for someone to contribute?

[redstoneleo]

Thanks guys!
I think $ and $$ are the most frequently used MathJax delimiters under the advocate of https://math.stackexchange.com
so perhaps we should uncomment this line
https://github.com/Khan/KaTeX/blob/38ba9f91877cdbc3b687de16803c41d6fffafb74/contrib/auto-render/auto-render.js#L78
for ease of switching from MathJax to KaTeX.

[GeeLaw]

Another first thought could be calling renderMathInElement twice, as the following:

renderMathInElement(document.body,{delimiters: {left: "$$", right: "$$", display: true}]});
renderMathInElement(document.body,{delimiters: {left: "$", right: "$", display: false}]});

Just providing a general idea you might find useful when dealing with other problems.

[xymostech]

The reason we don't have $ as a delimiter on by default currently is because if you have the $ delimiter, you can't type $s normally. We could make \$ outside of a delimiter turn into a $, which is what we do at KA. Do you know what MathJax does? We'd probably want to make something like that work if we added $ as the default.

[uranusjr]

MathJax does the same thing, as noted in their documentation:

The default math delimiters are $$...$$ and \[...\] for displayed mathematics, and \(...\) for in-line mathematics. Note in particular that the $...$ in-line delimiters are not used by default. That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly.

[xymostech]

Okay. If that's what MathJax does too, we should probably just leave the default as it is. If we fix the $ problem we should update the documentation with easy instructions for using the $ delimiter too.

[edemaine]

Incidentally, I notice that the example HTML file included with auto-render actually already shows how to use $ as a delimiter (along with $$, \(, \[), and lists them in the desired order. It's probably worth either:

1. adding a clearer note (in the sample HTML and/or in the README) about order mattering; or
2. sorting the delimiters so that order doesn't matter (though I'm vaguely worried that this might break some use-cases... it's hard to imagine for the actual common delimiters).

[stsievert]

I'm running into this same bug (math delimited by $$ doesn't display), but re-ordering my delimiters with $ and $$ doesn't display the math. This is the last barrier to switching from MathJax.

When I view the HTML of the page I'm viewing locally, I see that wrapping math in

• $$ results in a <script type="math/tex">x+y</script> tag and does not display.
• $ gives a <span class="katex"> block (and displays inline)
• a new delimiter %% to replace $$ gives a <span class="katex"> and does display.

I do have macros defined in my call to renderMathInElement. Deleting them didn't display the math. I have added spacing (i.e., $$ x = y $$, $$ x+y$$, $$x-y$$) with no effect.

I am writing my pages in markdown and serving via Jekyll.

[kevinbarabash]

I'm surprised that $$ results in <script type="math/tex">x+y</script>. We have code in contrib/ to auto-render math and code to render math inside <script type="math/tex"></script>, but I don't believe we have any code to generate the <script> tags. Do you know what's causing this?

[edemaine]

@stsievert Please post a complete example of an HTML file?

[stsievert]

Ah! Turns out my markdown parser (kramdown) automatically includes math blocks, which converts Markdown $$...$$ to <script type='math/tex'>...</script>, which means that katex doesn't have a chance to touch the $$ delimiter.

I resolved this by adding

kramdown:
  math_engine: nil  # for katex (because kramdown defaults to mathjax)

to by _config.yml.

[edemaine]

Glad you found a fix!

[q2apro]

Link to the auto-render extension was missing: https://github.com/Khan/KaTeX/tree/master/contrib/auto-render

[varunagrawal]

I'm having this same issue. I am using Jekyll and my footer has this JS

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.body, {
              delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
              ]
          });
      });
    </script>

While $ $ is displayed correctly, $$ $$ math is not displayed which is weird since it shows in the VS Code extension but not on the site.
Any help? I can provide more information if needed.

[edemaine]

@varunagrawal Probably best to open a separate issue, as yours does not sound related. I also doubt we'll be able to debug without a complete example of input and output, which you could put on Gist or similar. I would in particular check whether the $$ is making it into the HTML output by Jekyll. With Jekyll it might be a better idea to do server-side rendering via an extension, or use the option that generates <script type="math/tex"> (MathJax-style) tags that people above were using. See discussion in #2048.