Show HN: BeautifulCode, generate beautiful images of your source code | Hacker News Reader

Show HN: BeautifulCode, generate beautiful images of your source code

beautifulcodes.in

54 pointsrahulpadalkar52 comments

Open articleView on HN

This seems like a pretty straight clone of https://carbon.now.sh/

Would you say it's a CARBON copy?

You're fired

You’re hired.

I’m tired.

You're admired, acquired, then retired and expired.

Looks like BeautifulCodes supports more languages?

Although 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.

The fonts don't change with my browser, not sure if it's because of Safari or the domain blockers I use.

That being said, there was a recent discussion on dev fonts that might be interesting: https://news.ycombinator.com/item?id=25159038

Edit: Seems to be the domains that are blocked, doesn't work with Firefox or Chromium either. I might need to open fonts.google.com

Edit Edit: this seems to be the issue https://github.com/lightswitch05/hosts#google-fonts

yep, i started it as a project to learn Svelte.

This 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>

Having said that, now that I'm calm, nice work, this looks great!

Code, 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 [1]: https://www.collinsdictionary.com/dictionary/english/code [2]: https://www.merriam-webster.com/dictionary/literally [3]: https://archer.fandom.com/wiki/Trademarks_and_Techniques#Use...

Whichever 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/ seems to handle this just fine.

I would guess they're using Prism [0]. No idea what the support for C/C++ is though.

0: https://prismjs.com/

I 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.c...

Yeah, 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.

what exactly is sketchy about it? code without context really doesn't have much in the way of security concern.

I 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".

Agree. 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!

The 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.

Or 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.

I would prefer a format that can be copied as text. Images of code are frustrating...

This 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.

This is the only place I'd consider using them. It's not the most accessible of approaches.

For 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.

Fascinating stuff. I'd love to see the end result.

Thanks. One of these centuries, maybe my obsessive perfectionism will give way and I’ll actually publish something. :-)

Some 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.

I can't explain why, but i find it annoying when anyone refers to source code as "codes"

It's because "source code" is an uncountable noun, like "knowledge". See e.g. https://www.ef.co.nz/english-resources/english-grammar/count...

The line numbers do not line up with the lines of code?

Probably a little CSS bug

I can understand the syntax highlighting, but why add a window around it and some buttons? What's the value proposition? Aesthetics?

You can remove it.

I 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

I expected something similar to Instacode (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.

I’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

"Hide/show..." is a weird label for those checkboxes at the bottom, especially since they work in completely opposite ways.

Editing the code is weird with Safari 13, the pointer was a few char off. Exporting PNG does not work.

What would be useful is an api like send in whole code as base64 and it responds with base64 png.

Is there an offline version of this?

Site doesn’t scroll on my iPad. I’ll check it out on my computer in a while.

You might want to render 2x, the output PNG is quite pixelated.

Oh! So this is where the images on twitter are coming from :)

Needless to say, the code itself should be beautiful.

I'm looking the same for screen capture.

You might be looking for: https://asciinema.org/

The font list is... very impressive.

Just enough lines for the PHPDoc.

PrtScn

...then share

Ah! The 'Fair and Lovely' for software programs .

Reply on news.ycombinator.com