Convert inline styles to classes to reduce output size

[GalacticHypernova]

Clear and concise description of the problem

Currently, when highlighting code using codeToHast (and subsequently codeToHtml), the result is exponential in relation to the size of the input. For a 2MB code snippet to be highlighted, the resulting HTML is 32MB in size. That is an x16 increase in size(!), and in return, makes it much more challenging to support syntax highlighting for larger inputs.

Suggested solution

Converting the inline styles into classes could massively reduce the output size.

In the example attached below, we can see that it's setting the --shiki-default variable to the same value, so extracting it to a class will reduce duplication and make the size much more reasonable and make the whole process a lot more performant.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[hyrious]

FYI, I did something similar in my blog: https://github.com/hyrious/hyrious.github.io/blob/main/scripts/markdown-to-js.ts#L175

The final output may look like:

<style>.μ0{color:#24292e;background-color:#fff}.μ1{color:#d73a49}.μ2{color:#6f42c1}.μ3{color:#24292e}.μ4{color:#e36209}.μ5{color:#005cc5}.μ6{color:#6a737d}@media(prefers-color-scheme:dark){.μ0{color:#e1e4e8;background-color:#24292e}.μ1{color:#f97583}.μ2{color:#b392f0}.μ3{color:#e1e4e8}.μ4{color:#ffab70}.μ5{color:#79b8ff}.μ6{color:#6a737d}}</style>
<span class="line"><span class="μ1">type</span><span class="μ2"> </span><span class="μ2"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark μ0" tabindex="0"><code><span class="line"><span class="μ1">type</span><span class="μ2"> FooLike</span><span class="μ1"> =</span><span class="μ3"> {</span></span>
<span class="line"><span class="μ4">    _isFoo</span><span class="μ1">:</span><span class="μ2"> FooLike</span><span class="μ3">;</span></span>
<span class="line"><span class="μ3">}</span></span></code></pre></code></span>FooLike</span></span><span class="μ1"> =</span><span class="μ3"> { </span><span class="μ4"><span class="twoslash-hover"><span class="twoslash-popup-container"><code class="twoslash-popup-code"><span class="μ2">_isFoo</span><span class="μ3">: FooLike</span></code></span>_isFoo</span></span><span class="μ1">:</span><span class="μ2"> </span><span class="μ2"><span class="twoslash-hover twoslash-query-presisted"><span class="twoslash-popup-container"><div class="twoslash-popup-arrow"></div><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark μ0" tabindex="0"><code><span class="line"><span class="μ1">type</span><span class="μ2"> FooLike</span><span class="μ1"> =</span><span class="μ3"> {</span></span>
<span class="line"><span class="μ4">    _isFoo</span><span class="μ1">:</span><span class="μ2"> FooLike</span><span class="μ3">;</span></span>
<span class="line"><span class="μ3">}</span></span></code></pre></code></span>FooLike</span></span><span class="μ3"> }</span></span>

[Plumbiu]

I wrote a transform plugin and it works fine on my blog, but I'm not sure if some colors are missing.