Ben SinclairAs I read articles on here, and on other sites like Medium, I sometimes see people post pictures of their work.
Services like Carbon let you paste code in and get a pretty version as an image.
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.
```
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.)
