Katex: Math in line with the text using $ .. $ instead of \ (.. \)

Created on 6 Apr 2019 · 8Comments · Source: KaTeX/KaTeX

Hi.

I have a website in html5 where I put the rendering code of KaTeX v0.10.1 between the <head> .. </ head> tags

And it displays the mathematical symbols delimited with $$ .. $$ and with \ [ .. \], but it does not work when I want to put mathematics in line with the text, that is, mathematical symbols inside a paragraph with simple dollar $ .. $ , instead only works $ .. $

I've already tried putting the following in the <body>..>/body> :

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

</script>

but nothing.

The website where I am doing this testing is:

https://matematicauniversitaria.com/matlai/
(notice the $y^2$ that appears there)

Any suggestions?

How do I make the mathematical symbols appear in line with the text using $ ... $?

Thanks in advance.

bug

Source

MathSalomon

All 8 comments

@MathSalomon Try putting the $$ search string before $, as in:

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

ronkok on 6 Apr 2019

@ronkok Try putting the $$ search string before $, as in:
<script>
    renderMathInElement(document.body,{delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false}
    ]});
</script>
Thank you. I just did it like you said, putting
<script> renderMathInElement(document.body,{delimiters: [ {left: "$$", right: "$$", display: true}, {left: "$", right: "$", display: false} ]}); </script>
inside the labels <body> .. </body>
But it does not work, look how my page was:
https://matematicauniversitaria.com/matlai/
everything works except the simple dollar $..$

MathSalomon on 6 Apr 2019

I do not pretend to be an expert in security issues. I don't really know the intended effect of declarations like integrity="sha384-... or how defer might interact with that sort of thing. I do that if I strip that out and move the renderMathInElement script to the end of the body, then the page loads fine. To be specific, my <head> includes:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>

and the renderMathInElement comes after the math.

ronkok on 7 Apr 2019

👍1

@ronkok Thank you. I see that it works.
I have put in <head>..</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>

and the renderMathInElement in thehead, not in the body.

All right up there, but how do I renderise \[.. \]? because I see that it is now disabled.

By the way, the code that includes integrity =" sha384 -...had been copied from the starter template at https://github.com/KaTeX/KaTeX#starter-template
I hope someone tells me what advantages that code brings, which, I suppose, is the most current.

MathSalomon on 7 Apr 2019

To include \[.. \], add it to the search strings, as in:

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

Regarding, integrity =" sha384 -..., that's not something I can comment on knowledgeably. Others should feel free to chime in.

ronkok on 7 Apr 2019

To include \[..\], add it to the search strings, as in:
<script>
    renderMathInElement(document.body,{delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false},
      {left: "\[", right: "\]", display: true},
      {left: "$", right: "$", display: false}
    ]});
</script>
@ronkok I've put that code as you said, but I can not render the \[ .. \]. I already checked for any possible syntax errors but nothing.
Check, please
https://matematicauniversitaria.com/matlai/index5.html

MathSalomon on 7 Apr 2019

Ah yes, silly mistake. The \ character needs an escape.

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

ronkok on 7 Apr 2019

👍1

@ronkok Excellent, thank you very much 👍 💯

MathSalomon on 7 Apr 2019

Was this page helpful?

0 / 5 - 0 ratings