Convert inline styles to classes to reduce output size #824
Comments
GalacticHypernova
changed the title
GalacticHypernova
changed the title
|
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Clear and concise description of the problem
Currently, when highlighting code using
codeToHast(and subsequentlycodeToHtml), 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
Contributes
The text was updated successfully, but these errors were encountered: