Better Syntax Highlighting with gatsby-remark-vscode

March 22, 2020

Thanks to a tip-off by a friend, I recent­ly switched over from Prism to a plugin called gatsby-remark-vscode, which uses VS Code’s high­light­ing engine to per­form syntax high­light­ing on during build-time. Aside from the per­for­mance ben­e­fit from not having to exe­cute Pris­mJS, VS Code’s engine is a lot more pow­er­ful and sophis­ti­cat­ed. You can read more about its ben­e­fits in the README.

gatsby-remark-vscode also sup­ports adding plu­g­ins from the VSCode ecosys­tem, which means having access to the full unlim­it­ed range of VS Code themes and syntax high­light­ing plu­g­ins for uncom­mon lan­guages.

This came in useful when I had to sup­port syntax high­light­ing for Haskell and Erlang.

I man­aged to find the cor­re­spod­ing VS Code plu­g­ins, kindly authored by Jus­tu­sAdam for Haskell and pgourlain for Erlang.

How­ev­er, they both had custom postinstall steps which did not allow them to be installed prop­er­ly. There’s a npm install --ignore-scripts that you can use, but it will affect all pack­ages as well, which I didn’t want.

I ended up fork­ing the repos and remov­ing the postinstall steps. I don’t expect to have to keep up to date with upstream much since this is just syntax high­light­ing, so this way suits me just fine.

Run:

npm install siawyoung/language-haskell siawyoung/vscode_erlang

then add the exten­sions to your gatsby-remark-vscode con­fig­u­ra­tion:

extensions: ["language-haskell", "erlang"],