Skip to content

Instantly share code, notes, and snippets.

@mxstbr mxstbr/
Last active Sep 1, 2017

What would you like to do?
Syntax highlighting ESNext (inc. JSX) for Keynote presentations

Syntax Highlighting ESNext (inc. JSX)

To get syntax highlighting for ESNext (including JSX), you need to have pygments-lexer-babylon installed:

pip install pygments pygments-lexer-babylon

Now when you run pygmentize on a .jsx file it'll automatically use the new lexer! 🎉

If you want to force the babylon lexer to be used on files ending in .js, use the -l jsx option on the command line. Something like this:

pygmentize -l jsx myfile.js

Shortcuts for Keynote

I've added two functions to my .zshrc to allow me to quickly highlight and copy files for keynote presentations:

function hl() {
  PYGMENTS_NODE_COMMAND=node pygmentize -f rtf $* | pbcopy

function hljsx() {
  PYGMENTS_NODE_COMMAND=node pygmentize -f rtf -l jsx $* | pbcopy

The PYGMENTS_NODE_COMMAND stuff is necessary because by default it assumes node to be runnable with nodejs, which it isn't on my machine. YMMV, you can remove that part if calling nodejs -v in your terminal doesn't throw an error.

This is how you use them, hl is used for everything, and if I need to force ESNext/JSX support I'll use hljsx:

hl styles.css
hl MyComponent.jsx
hljsx MyComponent.js

You can also pass as many options as you'd like into both, for example to highlight in monokai:

hljsx MyComponent.js -O style=monokai

This comment has been minimized.

Copy link

robink commented Apr 22, 2017

Last line , correct usage is : hljsx -O style=monokai MyComponent.js


This comment has been minimized.

Copy link

jcubic commented Aug 27, 2017

running pip install pygments pygments-lexer-babylon make jsx work with jekyll, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.