title: How to install Highlight.js to Rails 7 with importmap?
body: <p>I created a simple Rails 7 application with Post, Comment models using Tailwindcss.</p>
  <p>And I have a problem with importing the highlight.js library to render syntax code in Trix editor.</p>
  <p>This is config/importmap.rb:</p>
  <pre><code># Pin npm packages by running ./bin/importmap
  
  pin &quot;application&quot;, preload: true
  pin &quot;@hotwired/turbo-rails&quot;, to: &quot;turbo.min.js&quot;, preload: true
  pin &quot;@hotwired/stimulus&quot;, to: &quot;stimulus.min.js&quot;, preload: true
  pin &quot;@hotwired/stimulus-loading&quot;, to: &quot;stimulus-loading.js&quot;, preload: true
  pin_all_from &quot;app/javascript/controllers&quot;, under: &quot;controllers&quot;
  pin &quot;trix&quot;
  pin &quot;@rails/actiontext&quot;, to: &quot;actiontext.js&quot;
  pin &quot;highlight.js&quot;, to: &quot;https://ga.jspm.io/npm:highlight.js@11.4.0/es/index.js&quot;
  </code></pre>
  <p>And javascrip/application.js</p>
  <pre><code>// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
  import &quot;@hotwired/turbo-rails&quot;
  import &quot;controllers&quot;
  import &quot;trix&quot;
  import &quot;@rails/actiontext&quot;
  
  import &quot;highlight.js&quot;
  
  import hljs from &quot;highlight.js/lib/core&quot;
  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) =&gt; {
      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) =&gt; {
          hljs.highlightElement(el)
      })
  })
  </code></pre>
  <p>The message error in a browser:</p>
  <pre><code>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
      &lt;anonymous&gt; es-module-shims.js:2
  </code></pre>
  <p>Am I wrong anything?</p>
  <p>Thanks.</p>