mjbvz / vscode-markdown-mermaid

Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
MIT License
640 stars 115 forks source link

Incompatible with Print extension #144

Closed PeterWone closed 1 year ago

PeterWone commented 1 year ago

This may be related to #137

I am the author of the Print extension, which among other things prints Markdown rendered.

I am interested in collaborating to resolve the incompatibility.

As you can see other Markdown extensions are able to render graphics in a compatible manner.

rendered md

While I've had only a cursory look at your code and haven't yet spun it up in the extension host, I'm a bit puzzled as to how it renders, I haven't yet spotted where that's done. The SMILES molecule in the sample above is rendered by the MathPix extension as SVG, which prints beautifully without pixelation.

mjbvz commented 1 year ago

I suspect the issue is related to how we render. AFAIK mermaid can only run in browsers (https://github.com/mermaid-js/mermaid/issues/3650). This means that the VS Code side of this extension does not actually do the rendering mermaid diagrams, instead we have to inject a script into the markdown preview that does the rendering of markdown source that we have pre-processed

I don't know how print is implemented but unless you are getting the rendered content of the markdown preview, the mermaid diagrams will not show up

PeterWone commented 1 year ago

Basically it declares itself to be a markdown extension so it can capture a reference to the vscode markdownit instance, and it calls the render method on that, passing a string containing markdown.

mjbvz commented 1 year ago

Yes that's why it doesn't work: after the markdown -> html step, the mermaid diagrams haven't been rendered yet. The rendering only happens once the diagrams are shown in a webview

Short of being able to run Mermaid in node, I don't think this is in scope of this extension. You can try either post-processing the html to render the diagrams or perhaps capturing the html after it has been rendered somewhere. Sorry I don't have a better answer for you

PeterWone commented 1 year ago

Eventually I send the HTML to a browser. What's the script I need to inject? or at least where should I look in your code

mjbvz commented 1 year ago

This script: https://github.com/mjbvz/vscode-markdown-mermaid/blob/041d7d637a62725cae8f5c9890f4c6999e7c35c9/package.json#L33

But it may only work inside VS Code and not in browsers. You can always bring your own mermaid though if using this script is too difficult

PeterWone commented 1 year ago

Thanks

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows

From: Matt @.> Sent: Friday, 9 December 2022 08:49 To: @.> Cc: Peter @.>; @.> Subject: Re: [mjbvz/vscode-markdown-mermaid] Incompatible with Print extension (Issue #144)

This script: https://github.com/mjbvz/vscode-markdown-mermaid/blob/041d7d637a62725cae8f5c9890f4c6999e7c35c9/package.json#L33

But it may only work inside VS Code and not in browsers. You can always bring your own mermaid though if using this script is too difficult

— Reply to this email directly, view it on GitHubhttps://github.com/mjbvz/vscode-markdown-mermaid/issues/144#issuecomment-1343472801, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABJ6QOF55V25YOREUYYEQWLWMJQXVANCNFSM6AAAAAAQPLOJJE. You are receiving this because you authored the thread.Message ID: @.***>