Transform Your Presentations from Boring to Amazing: 5 Syntax Tools for Pretty Code Snippets and Source Code
If you’ve ever had to give a presentation or put together a deck that includes source code, you know how difficult it is to format, style and colorize the text. These tools make your life easy and elevate your presentations from boring to amazing.
Carbon
Carbon allows you to create and share beautiful images of your source code. All you do is type in your code, choose one of their 25+ color themes, and let it do it’s thing.
It auto-detects many programming languages, including TypeScript, JavaScript, C#, JSON, and others. You can also choose to create your own theme if that’s something you need, say, to match your branding guidelines or ensure accessibility.
Carbon also has a robust settings panel to modify the image to your liking. It exports in PNG or SVG, making it easy to plug into your deck, or even a blog post.
Carbon also modifies the URL string with your pre-formatted information, like this, so you can share with others what the code might look like, and more easily collaborate.
Note: Something to consider is that Carbon produces PNG or SVGs, taking away the ability for users to copy and paste the code into external sources. Some of the themes may not be fully accessible in regards to contrast guidelines.
Slides Code Highlighter
Slides Code Highlighter is an easy to use open source tool developed by Roman Nurik (check out the repo). It has fewer theme options than Carbon, but unlike Carbon, you can copy the text characters instead of just images. This is great if you ever make a typo or need to change a small thing on the fly in your presentation, or want to enable your users to copy and paste code directly into their code editors or terminals.
The coolest feature Slides Code Highlighter is some of the auto-styling to highlight, focus and bold selected text. The focus is one of my favorites in particular! It fades out everything in the code snippet except for the area you select with your cursor. This helps to really draw attention to a specific string keyword or code bit, or an error.
Like Carbon, Slides Code Highlighter also has many language options and let’s you adjust formatting items like the font family, font size and the tab size.
Code Syntax Highlighter Figma Plugin
If you’re a UX designer, or know your way around Figma, this nifty plugin will save you hours! If you try to copy/paste the formatted text from the other two tools I covered above into Figma, you might be disappointed to find out that the colors and fonts do not copy over. The Code Syntax Highlighter Figma plugin is amazing if you’re editing in Figma.
Code Syntax Highlighter has both an editor or the ability to convert existing text into a pre-formatted code snippet frame, allowing you to either export in any Figma-supported format, or manipulate and copy the text as needed.
Summary
Tools like these are great productivity hacks when you’re putting together sexy decks, presentations, or even documentation. Let me know if you’ve come across any others you like!
