Copy with style in Atom

Preparing slides with code …

Such a chore. I do it regularly and have never found a good way to do it. I usually fall back to keeping the snippets as short as possible and hand coloring the code. It sucks, but it sucks less than the alternatives, at least I can still edit it.

Most recently after I did this I had a look in Atoms packages to see if there was any help to be had. Sure enough there are a few packages that try to solve this.

Some light

Unfortunately the first on only supports RTF and uses Pygments to color the code. Now in theory if you had a pygments stylesheet that exactly matched the one in Atom that should work fine. I use the Railscasts theme in Atom and there is one for Pygments so …

Nope, they don’t even agree on the tokenization.

More light

The other package that tries to solve this uses the internal DOM in Atom to copy the styles out, but it also only supports RTF.

After a misspent afternoon trying to get the RTF to convert to HTML using textutil and pbcopy I gave up. It converts just fine but it ends up as text on the clipboard and is pasted as text, HTML code without any syntax highlighting.

Rolling your own

I liked the approach of the second one, the code is already highlighted and in HTML, how hard could it be?

The author classifies his package as an ugly hack and says it only works sometimes. But I figured that since Atom is supposed to be hacked that wasn’t a problem.

So I spent some time fighting with Atom about partial updates to the editor DOM, scroll event that triggered as complete before the editor updates and some other fun stuff, but I have good news:

My first ever Atom package is now live! You can find it at the Atom package repository and it does this:

It supports output in both HTML and RTF, can run custom commands to pipe the result to, has three presets that you can configure for different targets and font, size and background color are customizable.

So I hope that helps you out next time you need to copy code from Atom to your presentation or document!