v135 · css
Code search styling
Syntax-highlighted code blocks have a specific problem: the browser's default yellow find-in-page highlight disappears over colored tokens. ::search-text lets you style the highlight per theme — a vivid amber on a light code block, a pink overlay on dark, warm ochre on solarized.
::search-text: checking…
Switch themes below, then use Ctrl+F / ⌘F and search for escape, function, or return to see how the styled highlight looks against each syntax palette. A JS-powered in-page search simulator is also provided below.
regexp-escape.js
Use Ctrl+F to see ::search-text in action
/* ::search-text scoped to code blocks — per-theme */
/* Light theme: yellow-to-orange */
.theme-light .code-block ::search-text {
background: #fef08a;
color: black;
}
.theme-light .code-block ::search-text:current {
background: #f97316;
color: white;
}
/* Dark theme: browser yellow is invisible here → use vivid pink */
.theme-dark .code-block ::search-text {
background: #ffb86c;
color: #1e1e1e;
}
.theme-dark .code-block ::search-text:current {
background: #ff79c6;
color: #1e1e1e;
}
/* Solarized: warm ochre that reads against the teal bg */
.theme-solar .code-block ::search-text {
background: #b58900;
color: #002b36;
}
.theme-solar .code-block ::search-text:current {
background: #cb4b16;
color: #fdf6e3;
}