How To Get Syntax Highlighting into Keynote Or PowerPoint - The Definitive Way (for JetBrains IDE users)

When it comes to preparing slides, there is one thing I which annoys me most of the time: getting code with my preferred syntax highlighting (which is Darcula from JetBrains IDEs) into Keynote or PowerPoint.

Out in the wild, there are several solutions,

All of them have the same problems, they neither have Darcula as a color scheme nor they have a good looking color scheme at all. Or they highlight too easy. e.g., if I use highlight.js for the following HTML code:

<body>
    <my-wc-a style="width: 100px; height: 100px; position: absolute; transform: rotate(90deg)">
        <!-- Will be transformed, but should be a top layer modal dialog -->
        <my-modal-dialog></my-modal-dialog>
    </my-wc-a>

    <my-wc-b></my-wc-b>
</body>

What I get is:

highlight.js with solarized-dark

But what I want is:

WebStorm Darcula Formatting

Don't get me wrong, the highlighting with highlight.js is nice as well, but what I like about Darcula is, that numbers, values etc. are also colored differently.

And since most of the time, I'm preparing the code for the slides in WebStorm, which is my beloved IDE, as well, so currently I need to leave the IDE, paste the code somewhere (or use a CMD for it) and then put it into a slide.

The Definitive Way (for JetBrains IDE users)

Years ago, IntelliJ/JetBrains' IDEs introduces a setting called "Rich Text Copy" (Editor -> General). In there, you can set a theme which is used for exporting. For a faster exporting, I created a clone of Darcula and changed the following things:

  • Font Name: Fira Code Medium
  • Font Size: 30 pt
  • Default Text Background: None
Rich Text Copy with Darcula Export

With that settings in place, I can simply copy any code in WebStorm, paste it into Keynote/PowerPoint, set a black background and I'm done. How cool is that?

If you want, here is a GitHub repo with the exported Darcula Export color scheme I'm currently using.