DEV Community


Discussion on: Sharing code examples with Carbon

kelli profile image
Kelli Blalock • Edited

I wanted a code related image at the top of a post I recently made and I used carbon for that along with stencil to put text on top of it. It's not meant for anyone to really read and copy that code though.

Where I first saw Carbon being used was @samantha_ming's Code Notes on Twitter. I like the way she customizes the carbon images. You can see some on her site

As already mentioned in other comments, accessibility is a concern if the image is the only way to view the code. It would be nice if there was a good way to make the code acccessible for those using screen readers or those who want to copy and paste the code to run it, like maybe a button to expand the code - but I don't know how to make that accessible or if it would work out well in practice. I'm hoping someone comes up with a good way to handle it where the code can be shown on the same page if someone wants a text version of the code.

daveskull81 profile image
dAVE Inden Author

I like how you used Carbon. That's a great use for it to use it in the cover image of an article. Adding your own text to customize it is great too. I really like what Samantha Ming is doing with code examples. Those look really nice.
Accessibility is a big thing to make sure the code is still usable to everyone. Maybe the simple solution is to use the code image and make it a link out to a gist where the code can be copied and read by a screen reader. Or the gist could be embedded below the image.

Forem Open with the Forem app