Switch to Prism for syntax highlighting

[coryhouse]

This pull request shows how to switch from highlight.js (which I currently use in the course demo) to Prism. I suggest using Prism instead of highlight.js because Prism offers superior JSX syntax highlighting.

Note how JSX is properly syntax highlighted via Prism (unlike highlight.js which colors all JSX the same color):

As you can see in this pull request, it's a pretty straightforward migration.

Related clips

• Use Prism instead of highlight.js here
• Mention Prism here
• Configure Prism instead here

[coryhouse]

Note the address where I downloaded this custom Prism build.

You can see all the options here.

[takes12no1]

I wanted to say be careful about adding plugins with this builder. When I tried to add some interesting ones (for example copy to clipboard) It made React puke.
Getting Uncaught DOMException: Failed to execute 'removeChild' on 'Node' when rerendering component

I think this was because one of the plugins changed the DOM without React knowing. I did not test which one was the culprit since I spent hours trying to troubleshoot already.

[jjacode]

@coryhouse when you added this file did you not get an error with the WorkerGlobalScope being undefined? Or a bunch of eslint warnings?

[coryhouse]

Nope, I didn't get any linting issues. If you pull down this branch and run it, do you get any linting issues?

[jimu]

@jjacode: I got the eslint errors you described. I forgot to add the eslint "configuration comment" to prism.js

1. download prism.js from the specified url
2. edit this file and place /* eslint-disable no-eval */ before any javascript

After adding this comment, the errors went away

[bgazzera]

Thanks a lot! this really helps since we are using CSS Modules, and highlight.js has no support for it. Prism has a plugin that handles this perfectly.