Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 20, 2022 11:43 am GMT

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:

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

Slide with beautiful source code (by carbon.now)

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:

carbon themes (1) - Monokai

Fig.3 - carbon theme (Monokai).

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

carbon themes (2) - OneLight

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:

Some config 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:

carbon export options

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

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.


Original Link: https://dev.to/arc42/awesome-presentations-deserve-beautiful-code-3jn9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To