49f9c9741e
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.
77 lines
907 B
CSS
77 lines
907 B
CSS
/*
|
|
Based off of the Ayu theme
|
|
Original by Dempfi (https://github.com/dempfi/ayu)
|
|
*/
|
|
|
|
.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
background: #191f26;
|
|
color: #e6e1cf;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: #5c6773;
|
|
}
|
|
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-attribute,
|
|
.hljs-attr,
|
|
.hljs-regexp,
|
|
.hljs-link,
|
|
.hljs-selector-id,
|
|
.hljs-selector-class {
|
|
color: #ff7733;
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-meta,
|
|
.hljs-builtin-name,
|
|
.hljs-literal,
|
|
.hljs-type,
|
|
.hljs-params {
|
|
color: #ffee99;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-bullet {
|
|
color: #b8cc52;
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-built_in,
|
|
.hljs-section {
|
|
color: #ffb454;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.hljs-selector-tag,
|
|
.hljs-symbol {
|
|
color: #ff7733;
|
|
}
|
|
|
|
.hljs-name {
|
|
color: #36a3d9;
|
|
}
|
|
|
|
.hljs-tag {
|
|
color: #00568d;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-addition {
|
|
color: #91b362;
|
|
}
|
|
|
|
.hljs-deletion {
|
|
color: #d96c75;
|
|
}
|