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:

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:

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:

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

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:

Export to png and svg

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

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.