Adding highlightjs for code highlighting in Rails 7

May 08, 2023
My code highlighting sucked in this blog,  Not saying it is wonderful now, But documenting what I did here. . 

In rails 7 , There are multiple ways you can work with javascript, 
  • Work with importmap, The default in Rails 7 and the future of how we use javascript ! .
  • Work with NPM packages using javascript bundlers like esbuild, webpack or rollup.

I decided on using the first option, importmaps. 
In rails 7 ,  It is likely that you already have it enabled , If not 
./bin/bundle add importmap-rails

./bin/rails importmap:install

The above steps is not needed most of the time if you are using rails 7 , As Rails 7 as of today ships with importmap.

Adding in highlightjs
bin/importmap pin hightlight.js

This should write up highlightjs in importmaps. 
❯ cat config/importmap.rb
# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

pin "highlight.js", to: ""

This would give me capability to reference highlight.js library in my rails application.js files. 
I am also using trix for WYSWUG editor for this blog. Hence, the code elements are wrapper in pre block.
Simple as that, Now in application.js . 
❯ cat app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more:
import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"
import {HighlightJS } from "highlight.js"
document.addEventListener('turbo:load', (event) => {
  document.querySelectorAll('pre').forEach( element => {


This should be it.  The code highlighting should be working.
Screenshot 2023-05-08 at 13.46.46.png 95.8 KB