Inconsistent Syntax Highlighting in Light and Monokai Themes

Summary

When using the Syntax Highlighting Light Theme and the Monokai Theme, certain code elements can appear as if they’ve been removed. This issue happens because a span with the err class wraps around specific characters, like the @ symbol. This styling makes it confusing during code reviews, as it may seem that elements are missing or improperly highlighted.

In other syntax themes, the @ symbol is also wrapped with a span using the err class, but it isn’t highlighted in red, unlike in the Light and Monokai themes.

Steps to reproduce

1. Open a MR that includes characters such as @ (for example: !172280 (merged)).
2. Go to Settings > Preferences > Appearance
3. Select either the Light or the Monokai theme for syntax highlighting
4. Refresh the MR page to make sure it’s displaying with the selected Syntax Highlighting Theme.
5. Observe that the @ symbol appears as if it’s removed.

What is the expected correct behavior?

The @ symbol and similar characters should display consistently across all syntax highlighting themes. In the Light and Monokai themes, the @ symbol should not appear red or look broken/removed. Instead, it should retain a neutral color that matches its display in other themes, ensuring it is easily visible and does not seem removed or incorrect.

Relevant logs and/or screenshots

Light Theme

Monokai Theme

This bug happens on GitLab.com