Search code examples
elixirphoenix-frameworkhighlight.js

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

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.

Solution

  • 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.