15 ms·
Show HN: BeautifulCode, generate beautiful images of your source code
- verdverm 6y agoI would prefer a format that can be copied as text. Images of code are frustrating...
- redis_mlc 6y agoDo you mean as colorized HTML, or what?
- avhon1 6y agoThis could be handy for slideshow presentations. The contents of my screen aren't always easy for other people to look at and understand. This allows for copy-pasting code in and getting a nice clean "screenshot" out of it.
- petepete 6y agoThis is the only place I'd consider using them. It's not the most accessible of approaches.
- Chris_Newton 6y agoFor some new coding articles I’ve been working on, I’m currently experimenting with a hybrid presentation, because I encountered two serious problems with a plain text representation. One was that small devices are awful at handling them. On a phone screen held in portrait orientation, even relatively short lines of code may be too wide to fit. Requiring constant horizontal scrolling is not pleasant or efficient for the reader. If you rotate the phone to landscape instead, the scaling and text resizing behaviour in mobile browsers can be surprising and not at all helpful. The other problem was that in some cases I don’t just want to show plain code, I want to show some sort of annotation overlaid on top of it that illustrates the idea I’m discussing in the article. Once you go beyond simple things like line numbers or basic highlighting, you start to need an image for this. My original thought was to have an SVG overlaid on plain text code, but you can’t control the underlying text well enough to align them reliably, not least because of the first issue above. So then I moved to using an SVG for everything, code and annotations alike. This guarantees everything is aligned correctly, and you can also guarantee the whole thing fits and scales sensibly on small screens and in different orientations using the usual CSS for images. You can even have the text partially selectable, though anything produced in a graphics package is unlikely to faithfully reproduce white space used for indentation and the like. I’d like to investigate whether it’s possible to have fully-selectable listing text that copies and pastes correctly using a hand-crafted SVG, but this approach might prove to be prohibitively time-consuming even if it’s possible. I’d also like to know whether assistive technologies like screen readers would then handle the text correctly. For now, I have settled on using SVGs for listings but also including a link to a plain text source file and somewhat detailed alt text describing the annotations. The longdesc attribute for an img element might have been a better way to do this, but it has been deprecated so browser support is in doubt. If anyone else has been experimenting with presenting illustrated code listings on the web, or has found a solution to mobile browsers doing strange things with listing formatting after device orientation changes, I’d be very interested to know about it.
- lawn 6y agoFascinating stuff. I'd love to see the end result.
- Chris_Newton 6y agoThanks. One of these centuries, maybe my obsessive perfectionism will give way and I’ll actually publish something. :-)
- ziotom78 6y agoSome teachers in my department are consistently putting images from code in their slides and web pages. In this way they force students to retype the code instead of just copying-and-pasting it. Another case could be to make sure that the code always looks the same if you are going to put it in a Powerpoint presentation that you want to share/copy to a conference laptop. (However, if one does not need to embed videos, it's probably better to export a plain PDF.) Apart from these very specific cases, I agree with you: it is more useful to allow people to select the text.
- pacifika 6y agoJust enough lines for the PHPDoc.
- marmaduke 6y agoThe line numbers do not line up with the lines of code?
- arthurcolle 6y agoProbably a little CSS bug
- tsjq 6y agoAh! The 'Fair and Lovely' for software programs .
- daviesgeek 6y agoI’d love to see this be able to handle larger blocks of code. I have a particularly bad poorly bit of code I’d love to print out and keep around XD
- ditn 6y agoThis seems like a pretty straight clone of https://carbon.now.sh/ https://carbon.now.sh/
- cyansmoker 6y agoWould you say it's a CARBON copy?
- deleted 6y ago[deleted]
- SifJar 6y agoLooks like BeautifulCodes supports more languages?
- tromp 6y agoAlthough this differs from carbon in offering a huge selection of fonts, I had trouble finding fixed-width ones other than the default. I would suggest adding a fixed-width check-box that limits the font choice accordingly.
- etaioinshrdlu 6y agoOh! So this is where the images on twitter are coming from :)
- bobnamob 6y agoWhichever syntax highlighter they're using doesn't handle decent chunks of more modern C++ syntax (trailing return types, lambda definitions). Honestly not all that surprised given it refers to C++ as "C and C++"... The elsewise mentioned https://carbon.now.sh/ https://carbon.now.sh/ seems to handle this just fine.
- ZephyrBlu 6y agoI would guess they're using Prism [0]. No idea what the support for C/C++ is though. 0: https://prismjs.com/ https://prismjs.com/
- FraKtus 6y agoEditing the code is weird with Safari 13, the pointer was a few char off. Exporting PNG does not work.
- grbi 6y agoI'm looking the same for screen capture.
- wgx 6y agoYou might be looking for: https://asciinema.org/ https://asciinema.org/
- machinelabo 6y agoI can understand the syntax highlighting, but why add a window around it and some buttons? What's the value proposition? Aesthetics?
- ada1981 6y agoYou can remove it.
- franky47 6y agoI was using carbon.sh to generate those images, but recently I've switched to CodeSnap [1], a VS Code extension that does the same thing without leaving the editor. [1] https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.c...
- ghthor 6y agoYeah, the idea that I'm going to paste code into an editor within a web browser seems really sketchy. Almost as sketchy as all those JSON formatters within web browsers.
- swyx 6y agowhat exactly is sketchy about it? code without context really doesn't have much in the way of security concern.
- alpb 6y agoYou might want to render 2x, the output PNG is quite pixelated.
- oneeyedpigeon 6y ago"Hide/show..." is a weird label for those checkboxes at the bottom, especially since they work in completely opposite ways.
- bArray 6y agoIs there an offline version of this?
- mkl 6y agoI don't understand. Why not just take a screenshot of that bit of code? That way you get the proper font and syntax highlighting, and don't get the unnecessary fake window and background. If it's too small for a slide or whatever, just zoom in first. Also, "Codes" is incorrect in this context, and should be "Code".
- skytreader 6y agoAgree. This is one of those pretty but pointless things. Not to disparage anyone but technically trivial too isn't it? I.e., this isn't novel enough. When exactly would I want to share an image of my source code? I'd mostly share it as text since, you know, that's source code's native format, quite efficient in terms of data size too. If for the typography, yeah I'm already good with my current editor. After all I stare at it all day long!
- jhunter1016 6y agoThe idea here, based on my past use of Carbon, is not for developers to share code with others. It is for marketing page copy and flair. A screenshot of your VS Code editor is not nearly as pretty on a website landing page as this or what Carbon provides would be. So, to summarize: it’s for marketing to developers not for code sharing among developers.
- alpaca128 6y agoOr more precise, for marketing to developers without disabilities and with decent internet connections. Embedding plaintext in an image increases both the difficulty of access as well as data usage by orders of magnitude. One could probably get a significant chunk of the fancy look with plain CSS. And why not offer an export as SVG with some standard fonts? I know it's very comfortable to use and everything, but it just feels like a waste.
- deleted 6y ago[deleted]
- airstrike 6y agoI do feel this is missing a few features * Missing Input Mono :( * Assumes I'm on a Mac (spoiler alert, I'm not) * Fixed size window * No adjustable line height
- ChrisRR 6y agoI can't explain why, but i find it annoying when anyone refers to source code as "codes"
- mkl 6y agoIt's because "source code" is an uncountable noun, like "knowledge". See e.g. https://www.ef.co.nz/english-resources/english-grammar/countable-and-uncountable-nouns/ https://www.ef.co.nz/english-resources/english-grammar/count...
- deleted 6y ago[deleted]
- Nginx487 6y agoNeedless to say, the code itself should be beautiful.
- ChrisMarshallNY 6y agoSite doesn’t scroll on my iPad. I’ll check it out on my computer in a while.
- m3adow 6y agoI expected something similar to Instacode (http://instaco.de/ http://instaco.de/) with more options and filters and was a bit disappointed. I used Instacode a couple of times for nice images in otherwise dry blog entries.
- keyle 6y agoThe font list is... very impressive.
- popup21 6y agoPrtScn ...then share
- tpoacher 6y agoThis is a minor pet peeve of mine so apologies if I come across as rude, but the word 'codes' is a linguistic error (particularly prominent in indian coders for some reason, but also common elsewhere). The word 'code' when applied to computer source code has no plural. This is in contrast to other uses where it does have a plural, like in "Nuclear Codes", or "Codes of conduct". In this capacity, it refers to codes as a collection of 'individual code items' (i.e. symbolic representations that map to practical functionality) that can be thought of as countable items in a bag. However, when used to denote things like source code, or morse code, it is an uncountable singular noun. It is wrong to say "I sent a message using Morse Codes". In this sense, 'code' is similar to sugar, fruit, fish, etc. Note that sugar, fruit, and fish also have this distinction that the word has a plural form, but the plural is only used to denote 'different varieties of', as opposed to a large number of sugar molecules, a large number of otherwise identical fruit items in a basket, or a large number of individual fish of the same type. Obviously you can't change the website now just to correct a silly grammar mistake, since that would cost money, but ... arrrgh. Other words often mistakenly used in the plural when they shouldn't: - Advice: Let me give you some advice (not some advices) - Practice: You need more practice (not practices) - Exercise: You lack exercise (not exercises - 'exercises' means a collection of individual exercise items, not an increased quantity of exercise) - Text: You need to add more text (not texts - 'texts' means a number of text items, e.g. "this appears in many texts") etc. </rant>
- tpoacher 6y agoHaving said that, now that I'm calm, nice work, this looks great!
- gnabgib 6y agoCode, software, (arguably) middleware (not an accepted word yet).. are all uncountable [0][1]. Code itself is a bit of an aberration though.. even as a noun representing a set of rules (which dictionaries list as countable) it can be uncounted - 'code of conduct', 'penal code', 'code of the Samurai'. I really hope it doesn't become another literally [2].. despite Archer's efforts [3] [0]: https://dictionary.cambridge.org/dictionary/english/code https://dictionary.cambridge.org/dictionary/english/code [1]: https://www.collinsdictionary.com/dictionary/english/code https://www.collinsdictionary.com/dictionary/english/code [2]: https://www.merriam-webster.com/dictionary/literally https://www.merriam-webster.com/dictionary/literally [3]: https://archer.fandom.com/wiki/Trademarks_and_Techniques#Use_of_Figuratively_vs_Literally https://archer.fandom.com/wiki/Trademarks_and_Techniques#Use...
- bobbydreamer 6y agoWhat would be useful is an api like send in whole code as base64 and it responds with base64 png.