Making the output look nicer.

[Amir-Zia-Home]

I am using the Wolfram Engine + WLJS desktop app.

If I run the following commands:

    Integrate[Sqrt[x + Sqrt[x]], x];
    TeXForm[%];
    CellView["$$"<>%<>"$$", "Display"->"markdown"]

I get a nicely formatted output in the WLJS desktop app.

Why don't the developers make this output the default one? Will an update address this issue?

I want to define a function named ShowTeX[Command[...]]and paste it in my init.m file. so that whenever I run ShowTeX[Command[...]], the output of Command[...] is the nice version.

How do I define this function? Where should I define it?

[JerryI]

Hi @Ahri-man

Why don't the developers make this output the default one? Will an update address this issue?

LaTeX form is limited to math equations only, while Wolfram Language output can be images, rows of images, equations mixed with other objects, sound, video and etc. Following the notebook structure of, let's say - Mathematica, we need to make sure, that the output can be copied or edited and still be a valid input form.

Therefore we can only progressively improve the current output format, while TeX output shown in your code snippet can be optional and defined by a user for a specific task they have.

How do I define this function? Where should I define it?

One can put it to init.m file

FileNameJoin[{$UserBaseDirectory,"Kernel"}] // SystemOpen

then

(** User initialization file **)

System`ShowTeX[expr_] := System`CellView["$$"<>TeXForm[expr]<>"$$", "Display"->"markdown"]

After the restart

[Amir-Zia-Home]

OK, I found some bugs:

in the first case, ShowTeX[] should output EllipticF instead of just F.
in the second case, ShowTeX[] outputs the Latex code ?
in the third case, ShowTeX[] outputs the Latex code ?

[JerryI]

I guess KaTeX, that we are using to render LaTeX, does not support array env. Anyway, I don't believe that WL always outputs "good" LaTeX code.

In the new version of WLJS Notebook we introduced MMAView, which bypasses WLJS StandardForm and outputs a rasterized expression using Mathematica's renderer

[JerryI]

See also https://wljs.io/frontend/Reference/GUI/MMAView

[noeckel]

KaTeX in general supports LaTeX arrays. It seems to work fine if we avoid markdown and directly use LaTeX display:
ShowTeX[expr_] := CellView[TeXForm[expr], "Display"->"latex"]
With this, I get the expected 2D display for a matrix, e.g.,
ShowTeX[{{a,b},{c,d}}]

[JerryI]

Great! Thanks @noeckel

One can also wrap it with CellPrint as

ShowTeX[expr_] := (CellPrint[TeXForm[expr], "Type"->"Output", "Display"->"latex"];)

[JerryI]

UPD: 12 Dec 2025

We are trying to improve the default Codemirror 6 rendering:

However our initial tests show performance degradation of the editor 😕 Parentheses, brackets have to query the size of elements between periodically to adjust their size and we also have to replace normal font glyphs with dynamic SVGs, that carries an extra load. We might find the solution in the future...

[JerryI]

Otherwise, there would be multiple instances of CodeMirror running simultaneously, which would probably slow things down..

Surprisingly since WLJS 1.5.0 we exactly keep multiple instances of CodeMirror (no statics). Sometimes it may rich 100-200 in a single cell if you have many superscripts, subscripts or fractions :) However, CM is designed in the way, that multiple instances can reuse the state or some services of the others. Then the perfomance is usually ok.

I'm assuming you're already somehow making sure that CodeMirror is loaded only when the user clicks or focuses on a particular cell

We do sort of (actually not we, but this is a built-in feature of CM) it renders only visible decorations in the viewport. If the cell is hidden or far down in the notebook, it won't occupy the resources.

What now is changed from the previous version is only brackets decorations, that takes 0.4-0.8 ms to locate and parse and a bit more time to replace them with span element, that uses KaTeX fonts (which is nice, because we anyway load and use them when rendering markdown cells) to render {, [, (. KaTeX provides 5 different sizes, so we picked the class corresponding to the defined size based on the 5 sets of height threshold.

[JerryI]

PS: Previously when tried dynamically generated SVGs to render {,[,(, it looked like that was the main performance bottleneck.

[JerryI]

We are closer and closer to the final version. Soon it will be public.
As a bonus, a basic linter was added:

https://github.com/WLJSTeam/wljs-editor/compare/base...autobrackets

[noeckel]

In the screenshot, I see one more potential issue: on the last line, the square bracket for Abs is stretched, but the superscript 2 isn't raised high enough to match the height of the [...]. Maybe you can add the same factor that picks the KaTeX font size as a multiplier for the baseline offset in super and subscripts?

[JerryI]

In the screenshot, I see one more potential issue: on the last line, the square bracket for Abs is stretched, but the superscript 2 isn't raised high enough to match the height of the [...]. Maybe you can add the same factor that picks the KaTeX font size as a multiplier for the baseline offset in super and subscripts?

Yes it is fixable. Probably some styles error in flex boxes

[JerryI]

I shall close this branch with this:

https://github.com/WLJSTeam/wolfram-js-frontend/releases/tag/v2.9.2