How does order of registration matter?

[khinshankhan]

I think it definitely matters but unsure how I should organize my custom languages. For context I was trying to syntax highlight

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

using html (alias of markup). Nothing in the style block was being highlighted (in fact I think github doesn't handle this well either?). However, the playground https://prismjs.com/test.html#language=markup handled it just fine... after I changed languages to css and back to markup.

Before I open a bug, I wanted to make a minimal reproduction of the issue and found that the tokenization worked just fine (I was using the esm.sh version for ease). Then realized that using the highlighter from all worked just dandy. I narrowed it down to these 2 registrations:

refractor.register(markup)
refractor.register(css)

since this didn't work:

refractor.register(css)
refractor.register(markup)

I'm pretty sure markup has to be registered before css.

So to generalize that, I'm guessing 'dependencies' (interpolated) of a language should be registered afterwards? A bit shaky on this and what consequences this may have.

[wooorm]

No clue!

Are you saying things are broken for you?

[khinshankhan]

They were broken when I did

refractor.register(css)
refractor.register(markup)

but working when I did

refractor.register(markup)
refractor.register(css)

Haven't encountered it yet but I (probably) overthought about cases of how language A may allow for embedding of language B but B may also allow for A.

For now I guess the the only thing I can do is just be more vigilant in testing various embedded languages in languages and trying various register orders.

[wooorm]

Right, Prism is a bit weird like that. I don’t think refractor does anything. Closing as this has more to do with Prism. You could try other highlighters, such as lowlight or starry-night!