Add PrismJs to a rails 6 webpacker site

Question

I'd like to add PrismJS.

https://prismjs.com/index.html

So I have run

yarn add prismjs

Then updated application.js with:

import Prism from 'prismjs';

and application.scss:

@import  '~prismjs/themes/prism';

And now it highlights JS and CSS like this:

 <pre><code class="language-css">p { color: red }</code></pre>

But, I can't add any more languages. Eg Liquid.

I've tried to follow the instructions to use https://github.com/mAAdhaTTah/babel-plugin-prismjs. So in babel.config.js:

plugins: [
  ["prismjs", {
    "languages": [ "css", "liquid"]        
  }],

But no highlighting markup is added to the page for liquid.

I get an error in the webpack-dev-server:

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In ..node_modules/prismjs/prism.js

So, How should I properly add the prism-js babel plugin to babel.config.js ?

Answer 1

Did you forget to run yarn add babel-plugin-prismjs? I was able to get prism to highlight liquid just fine.

Here's what I have in app/javascript/stylesheets/application.js file:

import 'prismjs';

document.addEventListener('turbolinks:load', () => {
  Prism.highlightAll();
});

And in my application.scss:

@import "prismjs/themes/prism";

My babel.config.js is basically set-up the same as yours.

Also, make sure that if you modify babel.config.js that you run the following command to recompile your assets...

bundle exec rails webpacker:compile

Otherwise, there's a chance that your changes won't show up. That is, unless you make a tiny change to your application.js right before you refresh the page and webpacker recompiles everything anyways.