CODEWITHSUNDEEP
visual-studio-codevscode-extensions
dustinroepsch
dustinroepsch

Reputation: 1160

VSCode Extension embedding an image in editor area

I want to write an extension for VSCode that searches for a certain word in the text file you are editing and replaces that word with an image in the editors view. Once you click on the image it should transform back into the original text, and become editable like usual.

I was hopeful that this would be possible, but after discovering that VSCode doesn't let you manipulate the DOM directly, I am doubtful.

Could someone point me to some documentation that would enable me to add images to the editor window? (and not the line-number area on the left)?

Thanks a lot in advance!

Upvotes: 5

Views: 7149

Answers (2)

gear
gear

Reputation: 421

Since I always wanted to have this solution myself, I just created a VS Code extension. Although VS Code doesn't allow inline images, it can show them in a tool tip. That's also quite useful for code documentation:

https://marketplace.visualstudio.com/items?itemName=mgiesen.image-comments

Upvotes: 3

Matt Bierner
Matt Bierner

Reputation: 65273

VSCode does not support custom UI, but text decorators may work in your case. Here's an example extension that shows how to use them: https://github.com/Microsoft/vscode-extension-samples/tree/master/decorator-sample

To display an image using decorators, try contentIconPath on ThemableDecorationAttachmentRenderOptions

Upvotes: 4

Related Questions