Emoji breaking rendering

[Lou ✨]

This looks like it might be an expressive-code issue, but feel free to close if is not. I have emojis in some code blocks, and when expressive-code sees that emoji, it stops rendering altogether. A real world example on one of my sites:

Code snippet:

compare({ left: "🟢", right: "🟢" }); // []
compare({ left: "🟢", right: "❌" }); // [{ kind: UPDATE, left: "🟢", right: "❌", path: [] }]
compare({ left: { foo: "🟢" }, right: { foo: "❌" } }); // [{ kind: UPDATE, left: "🟢", right: "❌", path: ["foo"] }]

expressive-code renders this:

compare({ left: "

I'm using it with Astro Starlight, you can check the source here and the bugged output here.

---

• Edit: I had to disable expressive-code temporarily in my site so there's no longer a live example of the bugged output, but you can pull the previous commit from the link above.
• Edit 2: Added reproduction in this comment.
• Edit 3: Reproduction branch deleted. Solution in this comment. Issue was with the rehype-accessible-emojis plugin, so we need it to skip code blocks as well.

[Lou ✨]

Further evidence that the issue comes from expressive-code is that disabling it from Starlight settings renders this code snippet normally.

[Hippo]

Interesting! I just tried inserting the snippet you provided into my docs site and it's working fine:

There must be something else going on here as well. Maybe the issue is tied to particular versions of Astro or the MDX integration?

[Lou ✨]

Maybe, but I don't use MDX anywhere, just plain ol' Markdown. Probably is coming from Astro, I just found out my personal site is also affected by this and I don't use starlight there. Thanks for checking so quickly, Tibor!

[Hippo]

No worries, thanks for reporting!

Ok, good to know it's happening on plain Markdown and pure Astro as well. I'll try to investigate different versions to see if I can make it break locally for me as well.

[Hippo]

I'm sorry, I can't get it to break for me. I have tried both MDX and MD, both with older and the most recent versions of Astro and Starlight, and your code snippet always renders fine.

Could you please try creating a minimal reproduction on StackBlitz? I tried cloning your repo and getting it to run, but there is so much elaborate stuff going on there that I'd need to basically change my whole setup just to get it to run. Looks pretty impressive though!

[Lou ✨]

I made a branch in which I had to downgrade pnpm and node to make it work in stackblitz, but here it is, and the issue is reproducible: {deleted branch}

Wait for it to finish compiling and building, then go to Reference -> Diff and then scroll to the example of the util compare(). You can confirm the rendered result is:

compare({ left: "

But the input generated markdown (that you can find in /docs/src/content/docs/libraries/lou_codes_diff.md has the complete example there:

#### Example

```typescript
compare({ left: "🟢", right: "🟢" }); // []
compare({ left: "🟢", right: "❌" }); // [{ kind: UPDATE, left: "🟢", right: "❌", path: [] }]
compare({ left: { foo: "🟢" }, right: { foo: "❌" } }); // [{ kind: UPDATE, left: "🟢", right: "❌", path: ["foo"] }]

If we disable expressive-code, the generic code snippet provided by astro/starlight shows the entire thing.

Hope this helps ☺️

[Hippo]

Thank you for the quick turnaround on this, that really helps! If I disable your rehype plugin rehypeAccessibleEmojis, the issue disappears.

I assume this plugin is also running on the content of code blocks and either causing invalid/unexpected input going into Expressive Code, or breaking Expressive Code's output afterwards. You said that you also discovered this issue on your own site that doesn't use Starlight - maybe you can experiment with ordering rehype-expressive-code and rehypeAccessibleEmojis there?

[Lou ✨]

Ohhh so there's a conflict with that plugin! I'll see if I can disable it for code blocks! I wonder why did it start happening now (I had both plugins for months with no issues). Either way, thank you for spotting the issue, I'll try some solutions before re-enabling expressive-code. This library is great, thanks for working on it 💖

[Hippo]

There seems to be an option for ignoring parent elements in the plugin! Adding code to the default options like this makes it work for me:

markdown: {
  rehypePlugins: [
    // ...
    [rehypeAccessibleEmojis, { ignore: ['title', 'script', 'style', 'svg', 'math', 'code'] }]
    // ...
  ],
},

[Lou ✨]

You found the solution! You didn't had to 😭Thank you so so much! ✨