Hover Preview. Please try!

[tamuratak]

Hi,
I have implemented hover preview. When you put your mouse cursor on \begin{...} or $...$, then an equation rendered with MathJax hovers. I want this one to be merged to LaTeX-Workshop although it is now alpha version. Please try this branch. Additional libraries are not required.

implementation

1. In HoverProvider, we send a string of equation to WebView using WebView.postMessage
2. In WebView, with MathJax, we convert the string to a SVG string.
3. We render the SVG string in a canvas element again.
4. Wiht HTMLCanvasElement.toDataURL, we convert the image in the canvas element to a string of png dataURL.
5. We send back the string to LaTeX-Workshop extension process with postMessage.
6. We make a markdown string with the dataURL.
7. Hover renders the markdown.
8. We've done it!

Pros

• Fast. It must be faster than you expect. Thanks to V8.
• We do not need to install any other libraries and binaries. Implemented only in TypeScript and JavaScript.
• No abusing of VSCode API. I believe.

Cons

• We need WebView. We now use the WebView of pdf.js viewer for that purpose. When you close the preview tab, hover will not appear.
• Hover API is very restricted. Additional features are impossible.

ToDo

• Change colors of rendered equations to appropriate ones for each theme. Now only suited for light themes.
• Zoom option for rendered euqations.
• Others?

[James-Yu]

Great work! Really looking forward to its maturity!

[Astrantia]

@tamuratak Great work!! Thanks for sharing this contribution. I absolutely agree speed is a number one priority here, so why did you go with MathJaX instead of KaTeX?

[tamuratak]

KaTeX does not support SVG as an output format.

[Astrantia]

@tamuratak I tried it just now and it seems to be working fine with the light themes but completely unusable with dark themes. The one thing I noticed is that when using 4k monitor the previews are blurry.

[tamuratak]

If you set Window: Zoom Level of VSCode to none zero value, preview is blurry. If not, I need more information. Thanks.

[tecosaur]

This may not be the most useful comment but,

❤❤❤

Edit: This may now be a less useless comment. Could this be of interest — https://forum.vuejs.org/t/trick-katex-math-expression-render-to-svg/11713

[Astrantia]

@tamuratak place a cursor inside \|frac{1}{2} , (where | is). Output:

I think you need to handle placing cursors \|env because \\ddagger messed up with the initial \

[tamuratak]

Now, we support hover preview for dark themes. Please test! The most tricky part of this implementation is that we cannot know actual colors used in each theme in extension process [1], but we can know the colors in WebView process. I have found this workaround in this entry by @henoc. Great thanks.

[1]: related issue microsoft/vscode#32813

Since I have added MathJax as submodule for offline editing, you have to type

git submodule init
git submodule update

after git clone.

Regards,

[tamuratak]

place a cursor inside \|frac{1}{2} , (where | is). Output:

This is a wontfix bug. I think what is happening is obvious to users. If you want not to render cursor, please set latex-workshop.hoverPreview.cursor.enabled to false. Thank you for your testing.

[Astrantia]

@tamuratak Or what about adding an if case for '\frac{x}{y}' then '\ddagger' + '\frac{x}{y}'

[tamuratak]

Now cursor in tex commands is not rendered. Please test.

[Astrantia]

@tamuratak looks good to me now.
Only thing I don't like is about scaling. When I set scaling to 2, on 4k monitor it starts to look good, but then it is too big. If I reset scaling to 1 then it is blurry again. Do you think that can be fixed?

Also I had to do git submodule init and git submodule update, it didn't work otherwise. I'm assuming you will bundle mathjax with your PR right?

[tamuratak]

I think we cannot. If we can resize images in hover widget using CSS, we can fix this problem. Hover API, very restricted [1], does not allow us to customize CSS.
An unrecommended workaround is that you directly edit app\out\vs\workbench\workbench.main.css.

[1] related issue microsoft/vscode#14165

I will bundle MathJax as a submodule in my PR. Otherwise, PR will be too large. Submodule or duplicating source codes of MathJax in repo depends on maintainers' decision. In either case, users will not have to care about MathJax, which will be included in an installed package.

Regards,

[Astrantia]

@tamuratak One final thing:

       \begin{align*}
            \frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot\frac{x}{xx}\cdot
        \end{align*}

Why does this take a lot of time to load?

[tamuratak]

I missed that markdown engine in VSCode does support SVG format. Now, the scaling problem is fixed. Please test.