The A List Apart Blog Presents:

Syntax Highlighting Outside Your Editor

Article Continues Below

Whether you’re giving a talk, sharing work with your team, or presenting work to your clients, there comes a time when you’ll need to show code outside of a text editor. Copying and pasting code from a text editor to say, Keynote, is an easy process. The difficulties come in when you want to preserve syntax highlighting, which is crucial to bringing code to life.

I’m in the midst of building a few talks that contain a lot of code, so I’ve been exploring tools to improve my workflow from my editor of choice, Sublime Text, to Keynote. I was looking for the easiest way to copy code as rich text—with my preferred color scheme, font face, and font size applied—to be pasted directly into Keynote.

The first tool I tried was a Sublime Text package, installed with Package Control, called SublimeHighlight. With SublimeHighlight installed, you can select code and trigger a command to copy the code to your clipboard as rich text.

Available SublimeHighlight commands

Built on top of Pygments, it’s a really nice package for Sublime Text that fits my workflow perfectly. However, the available format options didn’t feel extensive or powerful, and I seemed to be doing a lot of tweaking in Keynote. The speed of copying directly out of Sublime Text was outweighed by the time I spent in Keynote.

I began looking for a tool that would allow me to spend less time tweaking styles in Keynote, and found Highlight, a command line utility with a terrifying amount of documentation. Fear not; the learning curve is low, and the possibilities are endless. To install it, either follow the instructions, or if you’re running OS X and Homebrew, just run brew install highlight.

To achieve my direct-to-Keynote nirvana, I played with the available command line options a bit until I was satisfied. What I came up with looked like this:

highlight -O rtf -t 2 -K 40 -k 'Source Code Pro' --style twilight _output.js | pbcopy

Though verbose, it’s not as complicated as it looks: -O rtf sets the output format to rich text, -t 2 sets tabs to 2 spaces, -K 40 sets font size to 40, and -k 'Source Code Pro' sets the font face to Source Code Pro, my preferred font face. I created a theme to match my preferred color scheme, Twilight, and specify its use by including --style twilight. To use this without the custom theme, just leave the --style twilight out.

The final bit, _output.js | pbcopy, tells Highlight to run _output.js, the file containing code to be processed, through its formatter and copy the results to the clipboard. All I have to do is run that line, paste into Keynote, and I have a perfectly formatted chunk of code.

It’s not the perfect workflow by any means, but I love the amount of flexibility and control Highlight provides. You can see how I’ve been making heavy use of this tool in talks that I’ve posted to Speaker Deck.

7 Reader Comments

  1. Yeah… I just copy and paste from PHP Storm and it keeps my text highlighting.
    I guess other JetBrains IDEs do that too if you work in Python/Ruby/Java

  2. In Komodo Edit 8 (free) you just need to export it to html by using:
    File > Print > Print to html file
    Once in html you can open it with your browser and copy paste it to textedit for example.

    Another alternative is to use highlightjs

  3. Using highlight gives the flexibility when you use editors like SublimeText, TextMate or even Vim (my preferred choice). However, to augment this process, it can be turned into an Alfred app workflow, so you wouldn’t even need to visit the terminal. 🙂

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Design for Amiability: Lessons from Vienna

Computing was born in a Viennese café. Between 1928 and 1934, while Hitler plotted and Europe crumbled, a motley crew of mathematicians, philosophers, architects, and economists gathered weekly to puzzle out the limits of reason—and invented Computer Science in the process. What made their collaboration possible wasn't just brilliance (though they had plenty). It was amiability: the careful design of a social space where difficult people could disagree without destroying each other. Longtime A List Apart contributing author Mark Bernstein mines this forgotten history for lessons that might just save today's embattled web from its worst impulses. Spoiler: it involves better coffee service and the looming threat of public humiliation.

From Beta to Bedrock: Build Products that Stick.

Building towards bedrock means sacrificing some short-term growth potential in favour of long-term stability. But the payoff is worth it: products built with a focus on bedrock will outlast and outperform their competitors, and deliver sustained value to users over time. Liam Nugent shows us how.

User Research Is Storytelling

At a time when budgets for user experience research seem to have reached an all-time low, how do we get stakeholders and executives alike invested in this crucial discipline? Gerry Duffy walks us through how the research we conduct is much like telling a compelling story, complete with a three-act narrative structure, character development, and conflict resolution—with a happy ending for researchers and stakeholders alike.

Discover more from A List Apart

Subscribe now to keep reading and get access to the full archive.

Continue reading