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:

Slide with ugly source code
Slide with ugly source 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:

Slide with beautiful source code (by carbon.now)
Slide with beautiful source code (by carbon.now)

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:

Predefines themes

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

carbon themes (1) - Monokai
carbon themes (1) - Monokai

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

carbon themes (2) - OneLight
carbon themes (2) - 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:

Some config options
Some config options

Export to png and svg

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

carbon export options
carbon 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 it’s no good for 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

Thanx

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

TAGS