Weird behavior on 3.x, and not on 4.x

[jangxyz]

On trying to use @mapbox/rehype-prism with svelte, I came along with the issue of rendering bunch of [object Object] literals printed.

(The @html directive let's your render html without escaping any angle brackets)

It even happens without applying imported rehypePrism plugin to the processor. Just import rehypePrism from '@mapbox/rehype-prism' somehow "stringifies" the objects. Commenting out the import statement as well shows the original content as expected.

(Nothing special, just some C++ code working with OpenCV)

Digging deeper, I found that

• @mapbox/rehype-prism depends on refractor^3.4.0 (currently 3.6.0 installed)
• It happens during the register phase in refractor/index.js, thus happens by "just importing it".
  • By binary search, I have nailed down to three languages that cause the problem:

    refractor.register(require('./lang/arduino.js'))
    refractor.register(require('./lang/chaiscript.js'))
    refractor.register(require('./lang/cpp.js'))

    Commenting out all of them shows the correct result. Leaving any of them uncommented shows the stringified result.

• refractor^4 seems to work fine (tested with 4.5.0)

The languages arduino and chaiscript registers and extends refractorCpp, so my bet is on that one (these are the only two langauges that requires cpp.js). However the file contains mostly parameters, so I'm stuck.

I would've start looking into the prism code or svelte, but found out for some reason it works okay with refractor^4. I wonder if there is an explanation here -- and hopefully don't have to start digging again. I can't find much information about the difference between 3.x and 4.x, except for the 4.0.0 release note. My guess is that using ESM imports and not somehow interferes with the global scope, but cannot figure out what the actual difference is.

The project seems to keep both major versions, so I'm confused.

• Are there explicit difference policies between the two versions?
• Would it be rehype-prism library that should be fixed (tell them to use 4.x instead), or the 3.x branch?
• Or maybe there both fine, and somethings wrong with the framework (svelte)?

[jangxyz]

As a side note story, I started out with rehype-highlight, but found out highlight.js does not support line numbers, but Prism does.

If I had found out that refractor does not support prism plugins, I wouldn't have came across this route. My bad. 😂 Maybe I should try rehype-prism-plus, or start creating a transformer myself.

Thought the problem itself is worth to mention, though.

[wooorm]

Hey!

• It’s a good idea to ask the mapbox folks to update to support v4
• Prism (and highlight.js) work as “singletons”. If you register a language once somewhere, it’ll be registered everywhere
• Two major versions (3 and 4) in your dependency tree means that there are multiple copies, so registering something with one copy will not add it to the other
• There are more things listed in the changelog: v4 also starts off with a much smaller base of only common languages, instead of all languages, and it returns a different value (which mapbox/rehype-prism probably doesn’t understand)

I’m closing this because it’s not yet a reproducible problem here. My recommendation is to raise a PR with mapbox/rehype-prism folks to update. There are tons of different ways to highlight code. You can choose which one works for you.