{"action":"created","issue":{"url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/856","repository_url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop","labels_url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/856/labels{/name}","comments_url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/856/comments","events_url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/856/events","html_url":"https://github.com/James-Yu/LaTeX-Workshop/issues/856","id":367738590,"node_id":"MDU6SXNzdWUzNjc3Mzg1OTA=","number":856,"title":"Hover Preview. Please try!","user":{"login":"tamuratak","id":10665499,"node_id":"MDQ6VXNlcjEwNjY1NDk5","avatar_url":"https://avatars0.githubusercontent.com/u/10665499?v=4","gravatar_id":"","url":"https://api.github.com/users/tamuratak","html_url":"https://github.com/tamuratak","followers_url":"https://api.github.com/users/tamuratak/followers","following_url":"https://api.github.com/users/tamuratak/following{/other_user}","gists_url":"https://api.github.com/users/tamuratak/gists{/gist_id}","starred_url":"https://api.github.com/users/tamuratak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tamuratak/subscriptions","organizations_url":"https://api.github.com/users/tamuratak/orgs","repos_url":"https://api.github.com/users/tamuratak/repos","events_url":"https://api.github.com/users/tamuratak/events{/privacy}","received_events_url":"https://api.github.com/users/tamuratak/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-10-08T11:03:26Z","updated_at":"2018-10-08T14:40:53Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Hi,\r\nI 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](https://github.com/tamuratak/LaTeX-Workshop/tree/hover_preview). Additional libraries are not required.\r\n\r\n![oct-08-2018 19-11-30](https://user-images.githubusercontent.com/10665499/46603628-9267a400-cb2e-11e8-8492-a94df5655ac2.gif)\r\n\r\n## implementation\r\n\r\n1.  In HoverProvider,  we send a string of equation  to WebView using WebView.postMessage\r\n2. In WebView, with MathJax, we convert the string to a SVG string.\r\n3. We render the SVG string  in a canvas element again.\r\n4. Wiht [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL), we convert the image in the canvas element to a string of png dataURL.\r\n5. We send back the string to LaTeX-Workshop extension process with [postMessage](https://code.visualstudio.com/docs/extensions/webview#_passing-messages-from-a-webview-to-an-extension).\r\n6. We make a markdown string with the dataURL.\r\n7.  Hover renders the markdown.\r\n8. We've done it!\r\n\r\n## Pros\r\n\r\n- Fast. It must be faster than you expect. Thanks to V8.\r\n- We do not need to install any other libraries and binaries.  Implemented only in TypeScript and JavaScript.\r\n- No abusing of VSCode API. I believe.\r\n\r\n## Cons\r\n\r\n- 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.\r\n- Hover API is very restricted. Additional features are impossible.\r\n\r\n## ToDo\r\n\r\n- Change colors of rendered equations to appropriate ones for each theme. Now only suited for light themes.\r\n- Zoom option for rendered euqations.\r\n- Others?"},"comment":{"url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/comments/427861473","html_url":"https://github.com/James-Yu/LaTeX-Workshop/issues/856#issuecomment-427861473","issue_url":"https://api.github.com/repos/James-Yu/LaTeX-Workshop/issues/856","id":427861473,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNzg2MTQ3Mw==","user":{"login":"Astrantia","id":32885386,"node_id":"MDQ6VXNlcjMyODg1Mzg2","avatar_url":"https://avatars1.githubusercontent.com/u/32885386?v=4","gravatar_id":"","url":"https://api.github.com/users/Astrantia","html_url":"https://github.com/Astrantia","followers_url":"https://api.github.com/users/Astrantia/followers","following_url":"https://api.github.com/users/Astrantia/following{/other_user}","gists_url":"https://api.github.com/users/Astrantia/gists{/gist_id}","starred_url":"https://api.github.com/users/Astrantia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Astrantia/subscriptions","organizations_url":"https://api.github.com/users/Astrantia/orgs","repos_url":"https://api.github.com/users/Astrantia/repos","events_url":"https://api.github.com/users/Astrantia/events{/privacy}","received_events_url":"https://api.github.com/users/Astrantia/received_events","type":"User","site_admin":false},"created_at":"2018-10-08T14:40:53Z","updated_at":"2018-10-08T14:40:53Z","author_association":"NONE","body":"@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. \r\n"}}
{"actor":{"display_login":"Astrantia"}}