Syntax Highlight without styles
However, with very few lines of CSS, we can turn that into:
Syntax Highlight Light Mode
... and by adding just one CSS-declaration:
.dark {
color-scheme: dark;
}
— we get:
Syntax Highlight Dark Mode
Styling the syntax highlight
First, we need some variables for the colors and basic CSS for the list itself:
ul {
--_property: color-mix(in srgb, HighLight, CanvasText 30%);
--_selector: cornflowerblue;
--_value: orange;
background: color-mix(in srgb, Canvas 95%, CanvasText 5%);
font-family: ui-monospace, monospace;
list-style: none;
margin: 0;
overflow: auto;
padding: 2ch;
}
The color-mix-method is used here with system colors. These will automatically change in dark mode — more on that later.
Next, using native CSS nesting, we make sure that all the child-tags behave as we want:
ul {
& * {
font-size: 1em;
font-style: normal;
font-weight: 400;
margin: 0;
white-space: nowrap;
}
}
For the selector, we allow <em>, <strong> or any <h>eading-tag. We add a {-char after, and after each rule (<li>), we add } and a line-break:
ul {
& :is(em, h2, h3, h4, h5, h6, strong) {
color: var(--_selector);
&::after { content: " {"; }
}
& li::after {
color: var(--_selector);
content: "}\a"; white-space: pre;
}
}
For the <var>iables, we add:
ul {
& var {
&::before { content: "var(--"; }
&::after { content: ")"; }
}
}
We want to display the property/value-pairs as inline, so they don't break to separate lines. We add the :-char after each property — and for the value, we want to end the line with a ;-char and a line-break:
ul {
& dd, & dt { display: inline; }
& dd {
color: var(--_value);
&::after {
content: ";\a";
white-space: pre;
}
}
& dl { margin: 0 0 0 2ch; }
& dt {
color: var(--_property);
&::after { content: ":"; }
}
}
And that's it!
Dark Mode for free
Because we used system colors, we get dark mode for free.
Add color-scheme: light dark; to your body-styles, and change your OS to either light or dark mode, and you should see the syntax-styles update.
The great thing about color-scheme, is that you can force it to one or the other, even if your OS is set to the opposite.
If your OS is set to "light mode" and you set color-scheme: dark on the <ul>-tag, it'll render as "dark mode", even if the rest of the page is in "light mode".
Code
For your reference, here's the complete chunk of CSS — give it a meaningful class-name instead of ul:
ul {
--_property: color-mix(in srgb, HighLight, CanvasText 30%);
--_selector: cornflowerblue;
--_value: orange;
background: color-mix(in srgb, Canvas 95%, CanvasText 5%);
font-family: ui-monospace, monospace;
list-style: none;
margin: 0;
overflow: auto;
padding: 2ch;
& * {
font-size: 1em;
font-style: normal;
font-weight: 400;
margin: 0;
white-space: nowrap;
}
& dd, & dt { display: inline; }
& dd {
color: var(--_value);
&::after {
content: ";\a";
white-space: pre;
}
}
& dl { margin: 0 0 0 2ch; }
& dt {
color: var(--_property);
&::after { content: ":"; }
}
& :is(em, h2, h3, h4, h5, h6, strong) {
color: var(--_selector);
&::after { content: " {"; }
}
& li::after {
color: var(--_selector);
content: "}\a"; white-space: pre;
}
& var {
&::before { content: "var(--"; }
&::after { content: ")"; }
}
}
NOTE: The code use native nesting and color-mix, which are currently behind-a-flag or in "nightly"-versions of browsers.
Cover Image by DALL·E, using the prompt:
Using the terms "cascading style sheets" and "syntax highlight", generate a painting in the style of Salvador Dali