Awesome presentations deserve beautiful code
Tags: presentation, code
Published: 2022-01-20 11:43:30


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uewhzmq3z130owhmn5u.png)
 <figcaption>Fig.1 - Slide with ugly code.</figcaption> 

I like to introduce [carbon](https://carbon.now.sh) - 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)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb78wmihb4gy8wxq5ve0.png)
<figcaption>Fig.2 - Slide with beautiful code.</figcaption> 
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:

![carbon themes (1) - Monokai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm1smn1yrm2r78ee304e.png) 
<figcaption>Fig.3 - carbon theme (Monokai).</figcaption> 

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

![carbon themes (2) - OneLight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcr3xkgpwmjslcgveha7.png)
<figcaption>Fig.4 - carbon theme (OneLight)</figcaption> 

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]()
<figcaption>Fig.5 - some config options.</figcaption> 

#### Export to png and svg

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

![carbon export options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzs8qgr34x81atllyibl.png)
<figcaption>Fig.6 - export options.</figcaption> 

#### 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](https://www.innoq.com/en/topics/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](https://www.wren.co/join/carbon)) on their website. 


### Links
* [carbon.now.sh](https://carbon.now.sh)
* The creators, [carbon_app](https://twitter.com/carbon_app)
* Their [Github repository (carbon-app)](https://github.com/carbon-app/carbon)

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

Thanx to [Miguel Henriques
](https://unsplash.com/photos/E0bIdzi8zoQ) for the header image.