Update docs

This commit is contained in:
bluwy 2023-10-10 21:46:49 +08:00
parent e6ad081950
commit 2fd5d7ce43
2 changed files with 25 additions and 0 deletions

View file

@ -5,3 +5,27 @@
---
Update internal `shiki` syntax highlighter to `shikiji`. Existing docs on `shiki` still stays the same, but `shikiji` will help make bundling simpler and easier to maintain.
`shikiji` also produces a smaller HTML output by attaching fallback `color` styles on the `pre` or `code` element instead of to the line `span` directly. For example:
Before:
```html
<code class="astro-code" style="background-color: #24292e">
<pre>
<span class="line" style="color: #e1e4e8">my code</span>
</pre>
</code>
```
After:
```html
<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
<pre>
<span class="line">my code<span>
</pre>
</code>
```
This shouldn't affect most existing styles as assigning a color to `span` or `.line` didn't work before, but if you did create this style anyways, it may now indirectly affect syntax highlighting.

View file

@ -81,6 +81,7 @@ const html = highlighter.codeToHtml(code, {
node.tagName = 'code';
}
// Cast to string as shikiji will always pass them as strings instead of any other types
const classValue = (node.properties.class as string) ?? '';
const styleValue = (node.properties.style as string) ?? '';