What's the proper way to implement highlight.js in phoenix?

Question

I've used this, and it works but it feels kind of hacky. I've tried copying the highlight.pack.js file to web/static/js and calling it from a .html.eex file but that just gives me an error. I've tried using the CDN (it worked) but that didn't give me the results I wanted. So what's the proper way to implement highlight.js in phoenix v1.2.0. I'm using Earmark v1.0.1 for markdown support if that matters.

Valuator

Does this phoenixframework.org/docs/… help at all? It's hard to tell what you're asking for here--what's the error you're getting? – Showy

Answer 1

The proper way is to install it via NPM:

$ npm install --save highlight.js

Note that --save will automatically add the latest version of highlight.js to package.json, you may also set a specific version there and run npm install. After installing, you can import and use the library in web/static/app.js

import hljs from "highlight.js"
hljs.initHighlightingOnLoad();

The process is the same for any NPM package you might want to use. Non-JS assets, such as CSS files, are not automatically imported from NPM packages. Therefore, you need to whitelist them in the npm section in your brunch-config.js.

npm: {
  // ... keep the other settings
  styles: {"highlight.js": ['styles/default.css']}
}

Obviously, replace default.css with the name of your preferred color scheme. More information on pulling styles from NPM packages can be found in the Brunch documentation.

Penultimate

Thanks, this answer helped me understand how this works. – Valuator