Latex-workshop: 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.

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.

[Astrantia]

@tamuratak It looks sooooooooo much better now. Thanks man, you are amazing.

Try doing this and see how much time does it take on your computer:

        \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*}

This takes a lot of time on my machine and takes milliseconds on https://www.mathjax.org/#demo so I guess there must be something off here.

[Astrantia]

@tamuratak Also do you want to remove Scaling option now?

[tamuratak]

@Astrantia this problem is reproducible for me. I have measured execution time of each step. What takes lots of time seems to be VSCode rendering svg in hover. So what I can do is nothing right now.

[Astrantia]

@tamuratak Are you sure something is wrong with vscode svg renderer for performance? Try hovering over this:

        \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}

        \end{align*}

VS

       \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*}

From what I noticed the issue is one long line, if you split the same equation in multiple lines the time it takes to render falls significantly.

[Swoy]

Amazebalz! This would be so brilliant for boxes, minipage and tables too!

[tamuratak]

@Astrantia you are right. Now fixed. Thanks.

[Swoy]

If MatJax is to large, how about Katex? It's also incredibly fast. I see it doesn't support SVG out of the box, but maybe down the line? Reference

cc @tamuratak, @James-Yu

[James-Yu]

@Swoy I'm not familiar with either of them. It may rely on some extra great work from the community.

[Swoy]

@James-Yu I'm looking into it. So far I an see it can be rendered into HTML5 and we could maybe use canvas2svg.js to have it rendered into SVG.

Seeing how insanely fast it is compared to MatJax, I suspect that this wouldn't be too much overhead?

[James-Yu]

I would definitely prefer KaTeX given its speed and small footprint. Any contributions are welcomed, and I will switch to this issue in the next week if not resolved then. Though that requires a lot of learning 😢

[Swoy]

I'm going to deep dive a bit over the next days, if anything, I can provide my findings here.
I found this pull request that explains a bit.

[James-Yu]

I looked into KaTeX a bit, and found it somehow limited compared with MathJax, e.g., https://github.com/Khan/KaTeX/issues/604. I suppose this issue has served its need, and we can have a new issue on KaTeX related discussions.

[tamuratak]

As for the footprint of MathJax, the large part of it is MathJax/fonts/HTML-CSS/TeX/png, ~114MB, which we don't require for SVG output. Other files can be removed also. While , an Atom extension using MathJax for SVG output, includes MathJax code in its own repo, the size of included MathJax codebase is ~7MB. At least, we can discuss about including MathJax codebase.

As for KaTeX, KaTeX supports only HTML and MathML as an output format, neither SVG nor PNG. Considering the restriction of VSCode API, we cannot use KaTeX for math preview on hover.

[James-Yu]

Incorporating a custom version of MathJax in the extension is highly appreciable I would say.

[kw-lee]

Is it possible to preview inline like preview-inline?

[James-Yu]

Seems not possible @alpha195 Limited by vscode.

[Shengchao19]

It seems it only works with tab preview but not external web preview.

[sloth3toe]

I'm using version 5.13.0 but do not see this hover feature at all. Am I missing any steps?

[viktorstrate]

It should work "out of the box", it does for me at least..

Does your files have a .tex extension?
And does it otherwise build without problems, using LaTeX Workshop?

Try making a new file called test.tex. And put this inside it, and hover the mouse over one of the blocks.

\begin{align*}
  e=mc^2
\end{align*}

$ e=mc^2 $

[sloth3toe]

@viktorstrate , thanks. Yes I can compile just fine. I've been using this extension for a while with all of my .tex files.

I tried a minimal file as you suggested, but I don't see any hovering capability at all even though it compiles fine and I can see the pdf as normal:

\documentclass[12pt]{article}
\usepackage{amsmath}

\begin{document}
\begin{align*}
    e=mc^2
\end{align*}

$ e=mc^2 $
\end{document}

[carmo-lucas]

I'm having an issue where in every equation in my document, hover is showing some redefined commands I created. Any ideas on how to fix it?

[tamuratak]

Please open a new issue filling out information required in the issue template.

Setting latex-workshop.hover.preview.newcommand.parseTeXFile.enabled to false might resolve. See link.