Adding HighLightJS to rails 7.1 with ImportMaps

Question

I'm trying to add HightlightJS

# importmap.rb    
pin "highlightjs", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"

// application.js
import hljs from "highlightjs"

Which gives error:

Uncaught SyntaxError: ambiguous indirect export: default

I'm trying to use the simple quickstart here: https://highlightjs.org/

What am I doing wrong? Importmaps? Or HighlightJS? How do I get it working?

The root of the problem was I was doing this:

bin/importmap pin highlightjs                                                                                                                                                         ✹
Pinning "highlightjs" to https://ga.jspm.io/npm:[email protected]/highlight.pack.js

and then breaking it worse by editing the importmap entry to the up to date but not ES module version.

As per @alex answer, it needs to be this:

bin/importmap pin highlight.js                                                                                                                                                        ✹
Pinning "highlight.js" to https://ga.jspm.io/npm:[email protected]/es/index.js

hi Will i didn't try it but can you try something like that if it will work (./bin/importmap pin highlightjs --download) — hardik
– hardik, Commented Nov 24, 2023 at 5:56

Alex · Accepted Answer · 2023-11-24 12:29:29Z

2

You have to use ES module package:
https://highlightjs.readthedocs.io/en/latest/readme.html#es6-modules-omit-in-toc

pin "highlight.js", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js"

import hljs from "highlight.js"

Or just use importmap command:

bin/importmap pin highlight.js

import hljs from "highlight.js"

answered Nov 24, 2023 at 12:29

Alex

31.3k10 gold badges69 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Will Over a year ago

thanks, yes I had tried using the pin task, but it got an old version (see my edit above). Is there somewhere I could have looked up the correct packagename to pin, highlgiht.js not highlightjs ?

Alex Over a year ago

@Will yes, you can search on npmjs.com/package/highlight.js or jsdelivr.com/package/npm/highlight.js etc...

Collectives™ on Stack Overflow

Adding HighLightJS to rails 7.1 with ImportMaps

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related