CODEWITHSUNDEEP
visual-studio-codemarkdown
user14096
user14096

Reputation: 133

vscode: Is it possible to show an image inside a text buffer?

e.g. I write a markdown document and include a line like [myimage](/mypath.jpg) to see the image in a big size above or below this line.

When I'm writing markdown I regularly have to look at an embedded file. At the moment I have to use a split layout and switch my attention between the text buffer and the preview. That's slowing me down and distracting.

What I mean is a full size preview that can fill the whole width of the buffer and is permanently shown. This is offered by the emacs markdown-mode (see this image with a command named "markdown-toggle-inline-images".). This is also available in sublime text e.g. via an add-on named sublime_zk. This is possible in atom with add-ons like preview-inline or inline markdown images.

This would allow to use VSCode like a WYSIWYG md-editor like typora but with all the benefits of using your daily edtior. This should also be interesting for programmers - at least on hackernews typora is regularly praised as the best markdown editor (see e.g. here)

I didn't see an addon for this. Something related was discussed about two years ago in issue 7689 - but this only concerns a mini preview in the gutter or if you move the mouse over a link. For this there is already the add-on Image preview.

Upvotes: 13

Views: 6062

Answers (1)

Matt Bierner
Matt Bierner

Reputation: 65273

This is not possible as of VS Code 1.29. The VS Code api does not provide a way to insert custom elements like images into the editor.

The two closest existing APIs:

  • The code lens api: CodeLensProvider. These allow you to insert additional clickable commands into an editor (such as displaying a reference count above a function) but these can only be text buttons

  • The hover api: HoverProvider. Hovers can contain images since they display markdown content. However they are only displayed when the user hovers over them

Upvotes: 4

Related Questions