How to install Highlight.js to Rails 7 with importmap?

Question

I created a simple Rails 7 application with Post, Comment models using Tailwindcss.

And I have a problem with importing the highlight.js library to render syntax code in Trix editor.

This is 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: "https://ga.jspm.io/npm:highlight.js@11.4.0/es/index.js"

And javascrip/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "trix"
import "@rails/actiontext"

import "highlight.js"

import hljs from "highlight.js/lib/core"
import javascript from 'highlight.js/lib/languages/javascript'
import bash from 'highlight.js/lib/languages/bash'
import ruby from 'highlight.js/lib/languages/ruby'

hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('ruby', ruby)

document.addEventListener('turbo:load', (event) => {
    document.querySelectorAll('pre').forEach(function(preElement) {
        const languageRegex = /(?!lang\-\\w\*)lang-\w*\W*/gm
        const codeElement = document.createElement('code')

        let preElementTextNode = preElement.removeChild(preElement.firstChild)
        let language = preElementTextNode.textContent.match(languageRegex)

        if (language) {
            language = language[0].toString().trim()
            preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '')
            codeElement.classList.add(language, 'line-numbers')
        }

        codeElement.append(preElementTextNode)
        preElement.append(codeElement)
    })

    document.querySelectorAll('pre code').forEach((el) => {
        hljs.highlightElement(el)
    })
})

The message error in a browser:

Uncaught Error: Unable to resolve specifier 'highlight.js/lib/core' from http://localhost:3000/assets/application-18666563d3b8c368b2de6f038dc38276f2eb21cb75d45593f9efd1e4200f55c4.js
    throwUnresolved es-module-shims.js:792
    d es-module-shims.js:655
    L es-module-shims.js:646
    promise callback*getOrCreateLoad es-module-shims.js:644
    d es-module-shims.js:659
    L es-module-shims.js:646
    promise callback*getOrCreateLoad es-module-shims.js:644
    topLevelLoad es-module-shims.js:393
    processScript es-module-shims.js:766
    processScriptsAndPreloads es-module-shims.js:668
    ze es-module-shims.js:373
    promise callback* es-module-shims.js:335
    <anonymous> es-module-shims.js:2

Am I wrong anything?

Thanks.

Answer 1

according to the code from your pin url highlight.js@11.4.0 index, you should use import HighlightJS, beside that, this index js file already import js, bash and ruby (and also ~ other 40 popular languages), so you no need to register by yourself.

pin "highlight.js", to: "https://ga.jspm.io/npm:highlight.js@11.4.0/es/index.js"

// application.js
import { HighlightJS } from "highlight.js"

document.addEventListener('turbo:load', (event) => {
  document.querySelectorAll('pre').forEach(function(preElement) {
    // your code
    // after extract the lang, for example: lang-ruby
    // you could highlight code as below
    HighlightJS.highlightElement(codeElement, language.split("-")[1])
  });
});

application.html.erb
<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css" %>
<%= javascript_importmap_tags %>

Note: about the line-number, i tried highlightjs-line-numbers.js but it looks like this plugin just work with CommonJS (your index js file is es6).