
Show HN: Generate pretty code screenshots with gradients - marcoslooten
https://www.snippetshot.com
======
marcoslooten
Snippet Shot is side project I build during my vacation. I wanted something
like the obvious tool, but simpler and more in line with my workflow. I also
really wanted a gradient background because I'm a bit tired of the solid color
backgrounds! So basically just changing it up, challenging myself and seeing
how such a tool is built.

The way it works: you either paste in a Github gist url or just the code,
tweak the settings if needed (including choosing a gradient) and downloading a
PNG or SVG of the code.

I'm pretty happy with it right now for my personal use cases, but I'm planning
on adding a bunch of other features and improvements and I'm really curious to
hear your opinion. I know it's nothing groundbreaking, but hopefully it's of
use for some people.

------
egfx
Nice, from what I can see it looks like there isn't a way to embed gists with
a nice font pack and coder style aesthetic. But I also think the gradient
feature is detached from what this should be. It's rudimentary to add your own
CSS border, so I'm not sure I like that particular feature. It's interesting
to note that with [https://codepen.io](https://codepen.io) you can export to
gist and with this you can get back some of the styling in an embed. And
create an alt embed with your own branding. That's what I found most clever.

~~~
marcoslooten
Thanks for checking it out! So if I understand correctly, to you the feature
to create an image from a gist is useful, but the gradients are too limiting
or detracting from what you want it to be? I'm thinking about making that more
flexible (turn it off).

Although it sounds like carbon.now.sh is more what you are looking for
perhaps?

Again appreciate you checking it out and I will consider your remarks.

------
followbl
Love this. Would legit use this as a quick tool even for non-code snippets -
meaning screenshots - just because it makes them look that much better!

~~~
marcoslooten
Thank you, appreciate it!

For sure, you can just set it to Markdown and use it for snippets of text. For
now just in the monospace (Mono Lisa) font, but if that suits your style you
can do that.

~~~
followbl
I was meaning actual screeenshots of i.e. let's say another product. I would
100% use it for that.

~~~
marcoslooten
Oh cool, got it. Did not expect that but it's something else than a device
mockup! If you're handy with HTML and CSS you could probably replace the code
window with your own image (in the devtools inspector) and it should work.

------
auslegung
What do you think about creating a demo? I just want to see what this looks
like, I’m on mobile and don’t care to find some legit code to test.

~~~
marcoslooten
Yeah, mobile is a bit difficult because of the way the screenshots are
generated, but if you want to look at a generated screenshot with some
JavaScript, check this picture:
[https://twitter.com/MarcoSlooten/status/1291735166713565185/...](https://twitter.com/MarcoSlooten/status/1291735166713565185/photo/1)

------
sprobertson
Demo results look great. Two other options I'd like to see are color scheme
and inner/outer padding.

~~~
marcoslooten
Thank you for your kind words and feedback.

Especially color scheme is an option that has been requested multiple times.
Here, it really shows I was not building it for an audience but just for
myself. Now that it's public, I should consider making it more flexible
without adding too much complexity. I think color schemes are relatively easy
to add and might give a lot of value.

Inner/outer padding is something I haven't seen mentioned before, but totally
get.

I need to figure out a way to keep it simple and cater to more use cases. I
think both points are valid and I'm probably adding those short term.

