I am unsure as to why the demo at: https://katex.org can render the following LaTex correctly:
\left| \frac{1}{2} \right|
as it will output: image.
However, when I try to do the same (with the same settings):
let userInput = "\\left| \\frac{1}{2} \\right|";
katex.render(userInput, result, {"displayMode":true,"leqno":false,"fleqn":false,"throwOnError":true,"errorColor":"#cc0000","strict":"warn","output":"htmlAndMathml","trust":false,"macros":{"\\f":"#1f(#2)"}})
The output looks like this: image2. Notice how the absolute value symbol closes the numerator and denominator rather than the entire fraction instead.
How do I fix this? Is my JS or HTML (HTML is the most likely culprit here) incorrect? Did I correctly import the stylesheets and JS? Or is something else wrong?
Edit(s) and other discoveries worth noting:
\displaystle
in the LaTex to render.{\displaystyle \lim_{n\rightarrow \infty}} \left|\frac{1}{2}\right|
(for example) as LaTex for KaTex to render, it will allow for certain elements to be in displaystyle and others not. However, the question still stands, how does katex's demo do it?WATCH YOUR STYLESHEETS!!! It was an error because I imported a different stylesheet (Bulma) that happened to alter the output...
Fix: Rewrite css.