Latex-workshop: Real-time math preview

[tamuratak]

In VS Code Insiders, WebviewEditorInset has become available. So, I have implemented real-time math preview. It is fast and lightweight than I expected. This feature seems promising. Related to #1122 and #1420.

You can try on this branch with VS Code Insiders. You can toggle with Ctrl-l Ctrl-i.

I hope you enjoy this feature.

Technical Details

• MathJax is used to render equations as before.
• Displaying multiple real-time math previews at the same time is very heavy because WebviewEditorInset is implemented with WebView.
• Horizontal alignment is not configurable because of the restriction of VS Code API. We can not display an equation directly below an inline math.
• To implement this feature, I have split the math preview code in src/providers/hover.ts into src/components/mathpreview.ts.

[James-Yu]

Awesome! Happy to merge the feature once it and vscode are ready.

[ofenerci]

Very interesting feature!

[tecosaur]

I wonder if there would be scope to use this for realtime tikz preview?

Something like: tikpicture → standalone document → pdf → png

[jlelong]

Real time tikz preview will however always require to run the latex compiler, which is not so much realtime. Moreover, it will lead to failure whenever there is a syntax error in the tikzpicture, which is almost always the case when you are typing.

[tecosaur]

Hmmm. Definitely an issue. I wonder if it would be possible to use something like what's done with chktex.
Where after X milliseconds (maybe a 1-2k would be a good default) the tikzpicture is attempted to be compiled.
If it finished successfully convert to png and display, else leave the previous image and add small error banner.

This would require careful thinking about the design and implementation, however, I see it as one of the areas that could really make creating large documents a lot easier.

Example

I have a ~100 page document which uses a rather heavy (read: slow compilation) custom class,
and has a bunch of embedded figures. It takes ~20s to recompile.
When messing around with the positioning of a single figure it would be nice to not have to wait as long.
Manually putting this into its own file just for the development of the figure, and working out what all the relevant lines to include are is a bit much for each figure.
Having something which could give not necessarily real-time, but quick updates on how a tikzpicture looks would be very nice.

[tecosaur]

Addendum: Actually, upon second thoughts this may be better as a web view like the live preview. Just thinking that the number of lines can get fairly long fairly quickly.

Perhaps a code lense above tikzpictures that:

1. Creates a file in the /tmp directory
2. Generates contents from the tikzpicture
   
   
   
   • add relevant lines found from regex in current file (e.g. \tikzset{})
   
   
   • adds lines from a file specified in settings (like MathJax hover preview)
   
   
   • add the tikzpicture code
   
   
3. Compile and convert to pdf (using something like \documentclass[convert={density=300,size=1080x800,outext=.png}]{standalone})
4. Embed into webview
5. Updates after no typing for X milliseconds

This is getting a bit off topic so I may just open a feature request at some point (also liable to try to do this myself).

[tamuratak]

We do not have to convert a pdf file to png if we can display the pdf file on WebviewEditorInset with pdf.js. That will be possible when the current restriction on local files is removed.

[cvcore]

Hi @tamuratak I was trying to compile your branch today but met the following error

ERROR in main.js from Terser
Invalid regular expression: /(?<!\$|\\)\$(?!\$)(?:\\.|[^\\])+?\$|\\\(.+?\\\)/: Invalid group [./src/components/mathpreview.ts:427,15][main.js:38100,22]

after executed vsce package command in the root folder of the repository. Can you give me a hint of what might be wrong with my environment?

Edit: resolved by updating nodejs from 8 to 12

[jlelong]

Up. Any news on this issue?

[tamuratak]

No. The API is still experimental. Only available in vscode.proposed.d.ts

[tamuratak]

A discussion on the proposed API continues in microsoft/vscode/issues/85682 . Up voting in the issue might encourage the deployment of the API.

[Kaiyokun]

@tamuratak I'm very interested about your work and I just can't wait to give it a try. I have been cloned your repository at this link you provided, then I executed npm install && npm run release to get the vsix package. But when I installed it manually, I haven't get the real-time math preview functionality to work, even after I toggled with Ctrl-l Ctrl-i (its just insert a \textit{} string in my cursor position). So, I'm wondering how to enjoy this excellent work? Perhaps I may missing some step to bundle this extension.

[tamuratak]

You can use the branch only with VS Code Insiders. And you have to start the Insiders with:

code --enable-proposed-api James-Yu.latex-workshop

[Kaiyokun]

Thanks for your kindly reply. It's my fault that I don't recognized the feature branch at the first time. I should checkout the branch add_realtime_mathpreview_4 (29a7ae47) rather that the default master branch (4cd97d4a). Finally I have got this feature worked. Thank you @tamuratak!

P.S. Maybe something you have already noticed, if not, I'd be glad to show you here:

1. When I try to package this extension, the vsce complains that:

...

This extension consists of 6689 files, out of which 4552 are JavaScript files. For performance
reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should
also exclude unnecessary files by adding them to your .vscodeignore:
https://aka.ms/vscode-vscodeignore
 DONE  Packaged: /home/kaiyo/LaTeX-Workshop/latex-workshop-8.7.2.vsix (6689 files, 16.57MB)

...

I guess maybe you should try to minify the package by using webpack or something similar.

1. The real-time math preview functionality's key binding is conflict with the shortcut textit as I mentioned before:
   
   Maybe you should consider change it to another key binding like Ctrl-m Ctrl-p for Math Preview.