Rails 7 way to integrate prismjs

I want to integrate prismjs into my new Rails 7 application, but with some modifications (just a selection of languages, only one color scheme etc.). For that, the documentation suggests using babel-plugins-prismjs. So, in order to use this, I need babeljs.

The Rails Guide explains, that importmap-rails is the way to go now and I love to go that way. I don’t want all that complicated webpack/npm/yarn toolchain if I don’t need it.

So, I think I have 2 (or more?) options here:

  • Custom generate the prismjs.js file on their website and load it?
  • Make it work with babel-plugins-prismjs somehow?
  • ?

I am a little lost here. I want to use the idiomatic way (importmap), but with a custom prismjs version. How can I do that without introduce a whole set of dependencies and 500 npm packages?

suggest you use webpacker or vite

Hm, thats not the answer I hoped for. As I mention, I don’t want to use the whole webpack/yarn/npm/vite thing, I just want to use the importmap. I try to ask differently: What is the suggested/idiomatic Rails 7 way (with importmap as a default) for handling javascript packages like prismjs, which need babeljs?

Import maps is a way for clients (browser) to locate and download javascript files. Babel is an executable that allows the server to process javascript files to make them more compatible.

Two are completely different things.

If you need Babel, then you need something to run it when assets:precompile is run. Which means you need jsbundling-rails, webpacker or shakapacker. And they all rely on webpack.

jsbundling-rails can also be used with esbuild or Rollup.

By saying “webpack” I meant bundlers in general. It seems to me that the OP wants to use only import maps, without bundlers to avoid yarn/node/etc.

As for the other two, esbuild as far as I know does not support babel. The maintainer implemented some of the babel transformations directly into it instead, so I’m not sure it will have everything prismjs needs.

As for Rollup, that one I do not know.

My goal was to keep things simple. I solve my problem with a 3 line bash script, which download the customized version of prismjs and put it in the vendor folder.

1 Like