loading...
Cover image for Embedding code in posts

Embedding code in posts

moopet profile image Ben Sinclair ・2 min read

As I read articles on here, and on other sites like Medium, I sometimes see people post pictures of their code.
Services like Carbon let you paste code in and get a pretty version of your code.

It looks pretty sweet. It's nicely coloured. It has decent contrast. It invariably makes it look like you use a Mac.

And it's still totally inaccessible.

You can't reasonably put a great swathe of code into the alt text for an image. On hosted platforms where you have a limited number of options, you generally can't do something clever with figure vs. code to let people choose the one they want.

However, these same platforms also natively provide code embedding options, with language-specific syntax highlighting. In markdown, it's as straightforward as pasting your code inside triple-backticks. You can force a particular language for the syntax-highlighting by including the language type directly after the opening ticks.

Unfortunately, I can't figure a way to get dev.to to display a series of backticks, even by escaping them in various different ways. For the purposes of this example, assume that ' is a backtick, mmkay?

'''
This will be enclosed in <pre> tags.
'''

'''js
// This will be highlighted as if it was javascript
'''

The resulting code is still heavily marked up to handle the colours and spacing, but it's a lot more accessible:

  • Stylesheets can handle it at different viewport sizes without ending up with really tiny text.
  • It will respect the font sizing overrides you have set in your browser.
  • You can copy and paste it into your own editor with your own font configurations.

This serves more purposes for everyone, not just people with limited vision:

  • When replying to a post you can copy in relevant sections of the original code without having to open two browsers side-by-side and do it all by hand.
  • You can paste that code into your own editor and try it out.
  • You can switch on that trendy new dark mode your browser/Window Manager/OS has and - if you're lucky - the site's styles will respect your settings.
  • You can search for posts containing certain half-remembered bits of code without the expectation that the host site has a million-dollarpound OCR AI system prepared to spare CPU cycles from its regular job of trying to take over the world.

What about other third-party code hosts, like Codepen et al?

They're good, too. Especially if

  • You're on a site that lets you embed scripts but doesn't natively support code highlighting (e.g. a hosted blog)
  • Your code is a fully functional example that can be run as a demonstration, rather than just shown as a snippet.
  • You're happy to add a dependency on another service, with all that entails (more points of failure, potential fees, etc.)

Posted on by:

moopet profile

Ben Sinclair

@moopet

I've been a professional C, Perl, PHP and Python developer. I'm an ex-sysadmin. Back in the day, I had a geekcode which I'm not going to share with you. 418 I'm a teapot.

Discussion

pic
Editor guide
 

I'll do triple backticks here:

const testString="Let's see what happens here";

Does that look right for you? Can you try the same in a reply?

When I draft things they look fine in preview. Well, not 100%, previewing liquid tags in comments is a little shaky. But posts look ok to me in draft.

Is it possible that in drafts there are different classes on the page and you have a browser extension that's blocking something?

 
  • When replying to a post you can copy in relevant sections of the original code without having to open two browsers side-by-side and do it all by hand.

  • You can paste that code into your own editor and try it out.

🙌

 

Another issue: poor internet connections and images don't mix very well. Being in the 25kb+ just for 400 bytes of code is crazy.