如何使用 importmap 将 Highlight.js 安装到 Rails 7？

Question

我使用 Tailwindcss 创建了一个带有 Post、Comment 模型的简单 Rails 7 应用程序。

我在导入 highlight.js 库以在 Trix 编辑器中呈现语法代码时遇到问题。

这是 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"

还有 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)
    })
})

浏览器中的消息错误：

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

我错了吗？

谢谢。

Answer 1

根据您的 pin url highlight.js@11.4.0 index 中的代码，您应该使用 import HighlightJS，除此之外，此索引 js 文件已导入 js、bash 和 ruby（以及 ~ 其他 40 种流行语言)，因此您无需自己注册。

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 %>

注意：关于line-number，我试过highlightjs-line-numbers.js，但看起来这个插件只适用于CommonJS（你的索引js文件是es6）。

Answer 2

看起来您在 application.js 中导入了 highlight.js，然后尝试从固定位置再次导入它，这不是 importmaps 文档中推荐的模式。

尝试导入整个 highlight.js 或只导入您想要的特定语言。

尝试更新 application.js 文件中的导入并删除特定语言

import hljs from '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'

或

import {javascript, ruby, bash} from 'highlight.js'