我使用 Tailwindcss 創建了一個帶有 Post、Comment 模型的簡單 Rails 7 應用程式。
我在匯入 highlight.js 庫以在 Trix 編輯器中呈現語法代碼時遇到問題。
這是配置/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:[email protected]/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
我有什么不對嗎？
謝謝。
uj5u.com熱心網友回復：
看起來您在 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'
uj5u.com熱心網友回復：
根據您的 pin url [email protected] index 中的代碼，您應該使用import HighlightJS，除此之外，此 index js 檔案已經匯入js，bash并且ruby（以及 ~ 其他 40 種流行語言），因此您無需自己注冊.
pin "highlight.js", to: "https://ga.jspm.io/npm:[email protected]/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）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/408610.html
標籤：