Search Term Highlight Style (SCSS)
Gives highlighted search words a soft marker-pen look instead of the browser's default yellow box, matching the Highlight Search Terms snippet and any mark elements.
Opens WPIDE on
Code
$marker: #ffe58a;
$marker-dark: #8a6d00;
mark.search-highlight,
.search-results mark {
padding: 0 0.15em;
border-radius: 0.2em;
background: linear-gradient(to bottom, transparent 15%, $marker 15%, $marker 85%, transparent 85%);
color: inherit;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
mark.search-highlight,
.search-results mark {
background: linear-gradient(to bottom, transparent 15%, $marker-dark 15%, $marker-dark 85%, transparent 85%);
}
}Notes
Change $marker to your brand color; dark mode uses a deeper tone automatically.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.