Syntax highlighting ESNext (inc. JSX) for Keynote presentations

README.md

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

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

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