Katex: Expose KaTeX rendering options through auto-render interface

[onstrees]

KaTeX is fast enough to give a live preview of formulas entered in a text area. I use the auto-render extension for this, because it recognizes math expressions in plain text surroundings, and it works fine. But it is an inconvenience that incomplete math causes a log to the console, with stack trace, for every character entered until the math symbol is complete. This is a minor nuisance if you enter \pi, but \epsilon gives six stack traces before the symbol is complete. As a workaround, I replaced the console.log statement by spaces in katex/contrib/auto-render.min.js (version 0.5.1)

[kevinbarabash]

If you use the throwOnError option, the incomlete commands will render in red until they're recognized. See https://github.com/Khan/KaTeX#rendering-options. I'm curious about the live preview... are users on your site typing in math that you're rendering on each keystroke?

[onstrees]

I'm sorry, I am not the most experienced javascript programmer, but the function renderMathInText of katex/contrib/auto-render.js takes no options argument. It just has a hardcoded options object in it's call on katex itself: katex.render(math, span, {displayMode: data[i].display}); so there is nothing I can add. To make sure I did try to pass the {throwOnError:false} option in my function call, but that did'nt do anything.

And yes, math is rendered on each keystroke. I use AngularJS and https://github.com/tfoxy/angular-katex as wrapper around katex for the magic interactivity. It works fast enough, even on my 15-years old pc, although there is a problem with some symbols not showing in my Firefox v. 42 on Windows; they do not appear at first with some font sizes, but after zooming in and out again with Ctrl + and Ctrl - they get OK. As far as I can make out, only the higher than normal characters are affected (\sum, \int, \left or \right{ ...).

I tried adding a screenshot, but the forum has problems with it, both in jpg and in png

[kevinbarabash]

I see, thanks for the link to your project. auto-render.js exports renderMathInElement, how are you using renderMathInText?

[onstrees]

I do not call renderMathInText myself, but renderMathInElement does so via a call to renderElem, with as only options delimiters and ignoredTags.

The error message in the Firefox console (while typing \pi) is:
KaTeX auto-render: Failed to parse '\p' with ParseError: KaTeX parse error: Expected 'EOF', got '\p' at position 2: \p -- auto-render.min.js:1:1326

Position 1:1326 in auto-render.min.js reads:
console.error("KaTeX auto-render: Failed to parse '"+r[i].data+"' with ",f);
and that agrees only with this statement in renderMathInText of auto-render.js:
console.error( "KaTeX auto-render: Failed to parse '" + data[i].data + "' with ", e );

[kevinbarabash]

@webtrees I think it makes sense to have something like a katexOptions property that can be passed to renderMathInElement that can be passed down to katex.render.

[onstrees]

Thank you for considering this issue.

I finally managed to get the live LaTeX preview online in one of those online javascript playgrounds. If all is well you can see it in action here: http://jsbin.com/gatosifepe/edit?html,css,js,output

[ylemkimon]

Closing as auto-render extension now supports passing options to KaTeX. See https://khan.github.io/KaTeX/docs/autorender.html for more detail.

[jason-s]

Where are the delimiters defined in the autorender options? I don't see them, other than a vague mention in the docs:

It searches all of the text nodes within a given element for the given delimiters,

---

huh, my comment is a dupe of #1944