[HTML] Inline-styles are not highlighted correctly

[manniL]

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.

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>

[orta]

Interesting, what does the html look like?

[manniL]

Interesting, what does the html look like?

Added to the original post 😋

[manniL]

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 primer/github-vscode-theme#163) but has been fixed for VScode as mentioned in the linked issue.

TL;DR

• Vitesse and GitHub Themes had the "wrong color for inline styles" issues
• Solved in VS Code for all these themes
• Still present in Shiki though

[muenzpraeger]

That should be in now with 0.12.0.

[manniL]

@muenzpraeger Thanks for the update! I can confirm that it was resolved for the github-dark theme but not for vitesse. Is this an issue of the vitesse template from here on then?

[muenzpraeger]

@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. ;-)

[octref]

The closing quote is an issue with vitesse-dark theme itself:

[octref]

The upstream issue is fixed too.

[manniL]

Thanks a lot @octref 🙏