Transparent shot background about polacode

[tobi-or-not-tobi]

I've checked the code of this extension and based on that tweaked the underlying css a little bit to accomplish this. There are a few caveats that might be worth mentioning:

• the background of the image depends on the colorTheme of vscode, i.e. light vs dark. Light theme's actually already get a transparent background. The reason for the dark theme not to have this, is most probably because the image looks horrible in preview mode, since the transparent background gets dark by the vscode background.
• the huge spread of the css box shadow and the relatively small padding is causing the hard cut on the edge of the image. That can be easily fixed by either changing the box-shadow or padding, or both.

In order to this quick and dirty for my self I changed the following in the index.html provided in the src/webview folder:

#snippet-container {
  background-color: transparent !important; // ensure bg is always transparent (looks ugly in preview though)
  padding: 50px; // ensure we have enough padding to avoid a hard cut of the shadow
}

#snippet {
  box-shadow: 0px 0px 71px -17px rgba(0, 0, 0, 0.75); // just an alternative shadow
}

I think that the different options should be configurable, using properties, however the default settings should provide an image without the hard cut of the edges. Then we don't need to agree in this ticket on the exact style rules...
Next, we should have a better preview, so that the transparent background of the image doesn't clash with vscode background.

This can be done in different ways. Happy to join with a PR, let me know if that makes sense.

[MatteoGabriele]

@jeremy-ingenuity I used it here and if you see, without that cropping would have looked so much better.

[rediche]

Transparent background would be absolutely amazing.

[nerdenough]

I'm keen for transparency as well, but the drop shadow currently extends past the edge of the image so you'd need to adjust that too 🤔

[MatteoGabriele]

Yeah I was actually looking for the same feature.
I seriously love this plugin and with a transparent background and not cut on the shadow will be perfect to drop in a Medium article for example for a very nice and clean look.

thanks for you effort

[jeremy-ingenuity]

Yes same here @MatteoGabriele , I was using it for a Medium post :D

Thank you very much to the developer!

[bestony]

Yes, I also need this feature, I want to use this plugin in my PowerPoint!

[MadMaxMcKinney]

Would love to hear if these are being worked on.

[sebelga]

Yes, this is quite strange indeed. Such a nice polaroid but a cropped shadow :( Not of much use...