Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy committed Oct 10, 2023
1 parent e6ad081 commit 2fd5d7c
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
24 changes: 24 additions & 0 deletions .changeset/few-peas-hunt.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
1 change: 1 addition & 0 deletions packages/astro/components/Code.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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) ?? '';
Expand Down

0 comments on commit 2fd5d7c

Please sign in to comment.