Remove italics from ayu quotes/comments for alignment

Comments in code examples often rely on exact column alignment,
e.g. for ASCII-art.  This alignment often relies on both code and
comment characters having exactly the same width.

Setting `font-style: italic` seems to break these invariants with
common monospace fonts used by browsers.  This may be due to font
synthesis when the monospace font does not have a native italic
variant.

E.g., see these code examples when using the `ayu` theme:

- https://doc.rust-lang.org/1.90.0/reference/types/closure.html#r-type.closure.drop-order
- https://doc.rust-lang.org/1.90.0/reference/types/impl-trait.html#r-type.impl-trait.generic-capture.precise.use

It seems more important to have correct alignment than to style these
elements in italics, so let's drop the italic styling.

One alternative would be to set `font-synthesis: none` instead.  This
would prevent font synthesis-related misalignment while still
rendering italics when a font supports italics natively.  This might
correct the alignment issue, but ASCII-art in comments often wants
vertical bars to actually be vertical, so it still seems better to
just turn off italics entirely.

A more minimal change might be to only drop this from comments and not
from `hljs-quote`, but it seems the styling for these classes are
usually kept in sync, so we preserve that here.
This commit is contained in:
Travis Cross 2025-10-27 18:47:31 +00:00
parent f84b1a15b6
commit 49f9c9741e

View file

@ -13,7 +13,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
.hljs-comment,
.hljs-quote {
color: #5c6773;
font-style: italic;
}
.hljs-variable,