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.
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.
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.
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.
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.
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.
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 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.
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")
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]
56 comments
[ 6.9 ms ] story [ 152 ms ] threadOne 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.
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.
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
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.
0: https://prismjs.com/
[1] https://marketplace.visualstudio.com/items?itemName=adpyke.c...
* Missing Input Mono :(
* Assumes I'm on a Mac (spoiler alert, I'm not)
* Fixed size window
* No adjustable line height
Also, "Codes" is incorrect in this context, and should be "Code".
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!
So, to summarize: it’s for marketing to developers not for code sharing among developers.
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.
...then share
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>
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...