4 ms·

Show HN: Generate pretty code screenshots with gradients

12 points by marcoslooten 6y ago

marcoslooten 6y ago
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.
auslegung 6y ago
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 6y ago
  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/photo/1 https://twitter.com/MarcoSlooten/status/1291735166713565185/...
egfx 6y ago
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 6y ago
  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.
sprobertson 6y ago
Demo results look great. Two other options I'd like to see are color scheme and inner/outer padding.
- marcoslooten 6y ago
  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.
followbl 6y ago
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 6y ago
  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 6y ago
    I was meaning actual screeenshots of i.e. let's say another product. I would 100% use it for that.
    - marcoslooten 6y ago
      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.

12 points by marcoslooten 6y ago

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.

auslegung 6y ago

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 6y ago
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/photo/1 https://twitter.com/MarcoSlooten/status/1291735166713565185/...

egfx 6y ago

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 6y ago
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.

sprobertson 6y ago

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

marcoslooten 6y ago
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.

followbl 6y ago

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 6y ago
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 6y ago
  I was meaning actual screeenshots of i.e. let's say another product. I would 100% use it for that.
  - marcoslooten 6y ago
    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.