Awesome presentations deserve beautiful code

Ever seen ugly source code on a slide?

Welcome to reality. Every now and then we all need to put code samples onto PowerPoint or Keynote presentations.

But wait - presentation programs are made for text, not for code:
They loose all syntax highlighting when you paste your valuable code into their limited textboxes...
Look at this horrible example:

Fig.1 - Slide with ugly code.

I like to introduce carbon - a free website that elegantly solves this problem. On their website the creators describe their goal short and concise:

"Carbon lets you create and share beautiful images of your source code".

You see a possible result below:

Fig.2 - Slide with beautiful code.

What a difference!

Nice'n Easy

Carbon is incredbly easy to use: Simply paste your code in the textbox or drag a source file.

Carbon has a number of interesting configuration options available: Themes, borders, (fake) window controls and more.

Predefines themes

Several themes are available, all except the Darcula-Pro themes are free:

Fig.3 - carbon theme (Monokai).

If you prefer a lighter theme, you are covered too:

Fig.4 - carbon theme (OneLight)

In case you need to, you may even configure your own custom theme. It's a lot of work, and for me the standard themes are way good enough.

Additional Layout Options

You can set padding, border color, shadow, width, (artificial) window controls and a few more options:

Fig.5 - some config options.

Export to png and svg

As expected, carbon can export the image of your source as png or svg:

Fig.6 - export options.

Alternatives

All right, you may also copy/paste source code as RTF (and hope that your presentation tool really preserves formatting).
You could either paste your code to Microsoft-Word (crossing fingers again for preserved formatting), and export it to PowerPoint from Word. Might work, but is less fun. And in contrast to carbon.sh, it does no good to our atmosphere :-).

But: Accessibility Issues

When you convert source code to images, you have to (manually) take care of accessibility.
Images like the ones generated by carbon.sh are not suitable for screen readers.
If you want to adhere to accessibility good practices, you should therefore include the source code shown in the alt-tag of the generated images.

Enjoy!

You never again need to include source code as plain and ugly text in any of your presentations!

One final remark: The name "carbon" was chosen by the authors because they want to reduce CO2 in the atmosphere, read the small print (...offsets) on their website.

Links

• carbon.now.sh
• The creators, carbon_app
• Their Github repository (carbon-app)

Thanx

Kudos to Joachim Praetorius for improving my English and Lars Hupel for pointing out the accessibility issues!

Thanx to Miguel Henriques
for the header image.

Comments

[Anton Rhein]

Nice tool, will definitely check it out.
You can take a look on Marp and it's extension for VSCode. It let's you create complete presentations by providing a specially flavored Markdown file. Pitifully the VSCode Extension didn't handle synchronous scrolling through the preview very well the last time I used it. And you have to use some css if you want to customize specific slides. But source code is styled and highlighted like a charm. Not sure about accessibility, though 🤔