Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[HTML] Inline-styles are not highlighted correctly

See original GitHub issue

Update

Solution/Not an issue

I’ve created an example through the official shiki demo sandbox. Weirdly, it works as expected there when using the default theme but not when using vitesse-dark nor github-dark 😅

Hey 👋

When using inline styles, e.g. <p style="color: red">Red content</p> while using the html language setting for shiki, they are not highlighted correctly.

grafik

Generated HTML

<pre class="slidev-code shiki shiki-dark" style="background-color: rgb(18, 18, 18);"><code><span class="line"><span style="color: rgb(133, 133, 133);">&lt;</span><span style="color: rgb(66, 153, 136);">p</span><span style="color: rgb(219, 215, 202);"> </span><span style="color: rgb(224, 165, 105);">style</span><span style="color: rgb(133, 133, 133);">=</span><span style="color: rgb(201, 138, 125);">"</span><span style="color: rgb(219, 215, 202);">color: red"</span><span style="color: rgb(133, 133, 133);">&gt;</span><span style="color: rgb(219, 215, 202);">Red content</span><span style="color: rgb(133, 133, 133);">&lt;/</span><span style="color: rgb(66, 153, 136);">p</span><span style="color: rgb(133, 133, 133);">&gt;</span></span></code></pre>

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

muenzpraegercommented, Dec 21, 2022

@manniL I believe so that it’s somehow an issue with the theme.

I tried your example with a few other themes, and only in the vitesse-dark theme I’m seeing a different tokenization than with the other themes.

Personally I’m not very deep into the mechanics - but I’m curious to figure why. So stay tuned for a day or two. 😉

1reaction

manniLcommented, May 10, 2022

~~Okay, seems to be an issue with vitesse-dark and vitesse-light. Closing here ☺️~~

Update

I’ve reopened the issue because both themes work fine in VSCode and do not show the problem with the wrong “closing double quote”.

Also, the issue does not only apply to vitesse-dark and vitesse-light theme but also to github-dark and github-light (which were used as base for the vitesse themes though).

The issue itself was present also for VSCode (according to https://github.com/primer/github-vscode-theme/issues/163) but has been fixed for VScode as mentioned in the linked issue.