Create beautiful images of code.
Home Page: https://showcode.app
License: MIT License
Create beautiful images of code.
Showcode can also be accessed via an API. View the documentation here:
Showcode can also be purchased as a standalone desktop application:
Thank you for your support! 🙏
npm install && npm run dev
The image constraints can be adjusted by drag handles, however there is a "window padding" control to effectively adjust the constraints of the code window.
It would probably feel more consistent to allow changing the size of the window using drag handles as well?
By Github personal token or log in with the account, store all snippets in a repo.
I don´t know if could be useful, but I prefer to share the idea.
I like this kind of tool, I work in dev-tools also :).
The background padding control is a little confusing, because it seems to compete with the drag resizing / is not properly synched with the image dimensions. I recorded a video to illustrate that.
Basically the background padding makes sure you cannot make the image smaller than the padding, which is good.
However, the padding is not added to the dimensions shown beneath the drag handles. When resizing the image afterwards using the handles, there is a dead zone of (backgroundPadding * 2) px where the dimensions increase, but the image does not get bigger. That's easy to explain, since it does not get added to the actual dimensions as stated earlier, so the top and bottom padding needs to be caught up to first.
No database is needed and could be good to keep the collection of snippets.
When you have selected a theme and press up/down key, it only switches the theme once and then the select becomes inactive. I think it would be better if you could just keep pressing up/down key to switch between themes. this might be a bug.
Particularly the ones in the Mesh and Grainy tabs are neat and work great for code screenshots
💜 Seriously love this tool!
I would love to be able to easily recall the settings of past code exports. Maybe the initial implementation can be as simple as saving the last known settings in localStorage?
Thanks for considering this feature!
Hello
Good job @stevebauman !!!
Just notify line number has some bugs.
I'm probably a bit weird like this, but I would love to be able to code on the right side.
Somehow my wires get crossed when I "code" on the left, and see the results on the right.
Hi there! absolutely amazing app. I wish it had the option to pick a custom font!
It would be nice to be able to have a toggle to disable the entire background with padding so full code screenshots could be taken.
Marking this as a bug for importance. Showcode should have tests.
In multiple vector editing applications the SVG opens as an empty file in the correct proportions, in particular neither Adobe Illustrator CC 2022 (Mac) or Inkscape can open these files.
Often I'd like to have more of the background gradient shown so I want to make the image wider, but keep the code the same. It looks like this should work by dragging the side handles, but it doesnt.
The only way I can hack around it is to add a bunch of padding and then scale the padding back down
👀 I guess it would be really 🔥 to add an emoticon menu somewhere on the code editor to easily add emoticons for illustration purposes. 🥰
Firefox implemented support for ClipboardItem about a year ago (see https://bugzilla.mozilla.org/show_bug.cgi?id=1619947), but they still don't have it activated by default.
Unless the user manually sets dom.events.asyncClipboard.clipboardItem in about:config, clicking the copy button in the app will throw a ReferenceError: ClipboardItem is not defined that is unhandled.
I would suggest adding a .catch() handler in the promise resolved at
showcode/components/Preview.vue
Line 730 in 32a4b90
typeof ClipboardItem === 'undefined'.
I would do a PR for it myself, but I don't want to mess around in your code without knowing how you would want that handled.
Hey there, first of all: loving the app.
I used the app today and saw that there were some updates. This new version, however, had some performance issues in Chrome for me. In Firefox, the app works fine. The issue was encountered today for the first time, but the preview time I used it was October 16th. Back then, the performance issues weren't showing yet.
The performance issues start when I want to type some new code in the editor. All other buttons and options work fine for me. When typing, it can take up to 20 seconds before the code is shown in the editor. This is fine when it only happens in the preview. But the editor itself should be performant IMO.
{
"tab": {
"id": "ed1005d4-b60c-4164-825d-6297713ea1a4",
"created_at": "2021-12-10T10:07:29.435Z",
"name": "Advent of Code"
},
"page": {
"editors": [
{
"id": "57bfdd34-e361-46d0-a52f-05502fce70e9",
"tabSize": 4,
"language": "php",
"value": "<?php\n\n$input = explode(PHP_EOL, file_get_contents('puzzle-input.txt'));\n\n$answer = collect($input)\n ->map(fn (string $line) => new LineSyntaxChecker($line))\n ->each(fn (LineSyntaxChecker $line) => $line->validate())\n ->reject(fn (LineSyntaxChecker $line) => $line->isValid())\n ->groupBy(fn (LineSyntaxChecker $line) => $line->errorScore())\n ->map(fn (Collection $lines, int $score) => $score * $lines->count())\n ->sum();\n\necho 'hello world';"
}
],
"sizes": [
40,
60
],
"orientation": "landscape",
"previousOrientation": null
},
"settings": {
"width": 799,
"height": 408,
"showHeader": true,
"showTitle": true,
"showShadow": true,
"showColorMenu": true,
"showLineNumbers": false,
"background": "conic-26",
"backgroundPadding": "32",
"themeType": "dark",
"themeOpacity": 1,
"themeName": "material-default",
"themeBackground": "rgba(38,50,56,1)",
"borderRadius": 12,
"fontSize": 16,
"lineHeight": "22",
"padding": "16"
}
}I did a performance run in Chrome. If you open the image in a new tab, you may see something useful there. I'm not sure what I'm looking at but I thought I'd share it anyway.
If there is any more information you need of tests I can run for you, please let me know. I'm not sure what is causing this problem. If I have to take a wild guess, the image gets regenerated on every keypress and Chrome sends a lot of power to that rendering process.
16:9 is the ideal for posting to twitter due to cropping, would be nice if there was a "Make 16:9" button that would resize the background or padding so the exported image would crop nicely on twitter
It would be great to have bash support, what do you think?
Store the used ones in localstorage so that they can be reused in the future.
Maybe check out what Carbon uses for the UI to set colors & gradients
Sometimes I'd like to blur out some lines not because I'd like to hide them, but because I'd like to de-emphasize them. The current blur is good for hiding code, but it's too strong for just de-emphasizing.
Changing the blur strength would be a good solution to this.
Alternatively, let the users pick an "emphasis mode" where they could pick if they want to blur the non-emphasized lines, or if they want to lower their opacity (again to a configurable number). That'd probably be even better than blur for some things.
Even if the "project" title is changed to something else than Untitled-1, the exported image will still be named Untitled-1.png/jpg/svg.
Also, every exported image is called Untitled-1, even if I have multiple tabs open.
I trying to check how looks, if I finish and looks good, I will do a PR if you want.
btw, congrats for the tool!
The export menu is opening below the preview window.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
