realistic-highlight.css

body {
  --fluro-yellow-rgb: 255, 255, 0;
  --fluro-pink-rgb: 255, 0, 255;
  --fluro-purple-rgb: 200, 0, 255;
  --fluro-coral-rgb: 240, 128, 128;
  --fluro-blue-rgb: 0, 255, 255;
  --fluro-green-rgb: 0, 255, 0;
  --text-highlight-rgb: var(--fluro-yellow-rgb);
}

mark.yellow {
  --text-highlight-rgb: var(--fluro-yellow-rgb);
}
mark.purple {
  --text-highlight-rgb: var(--fluro-purple-rgb);
}
mark.blue {
  --text-highlight-rgb: var(--fluro-blue-rgb);
}
mark.green {
  --text-highlight-rgb: var(--fluro-green-rgb);
}
mark.coral {
  --text-highlight-rgb: var(--fluro-coral-rgb);
}
mark.pink {
  --text-highlight-rgb: var(--fluro-pink-rgb);
}

mark,
.markdown-preview-view mark,
.cm-s-obsidian span.cm-highlight {
  color: inherit;
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    105deg,
    transparent 0,
    transparent 0.3em,
    rgba(var(--text-highlight-rgb), 0.7) 0.5em,
    rgba(var(--text-highlight-rgb), 0.4) 1.6em,
    rgba(var(--text-highlight-rgb), 0.4) calc(100% - 1.4em),
    rgba(var(--text-highlight-rgb), 0.7) calc(100% - 0.5em),
    transparent calc(100% - 0.3em),
    transparent 100%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: 0 0 0.75em var(--background-primary-alt);
}

.cm-s-obsidian span.cm-formatting-highlight {
  background-image: none;
}
.cm-s-obsidian .cm-highlight + span.cm-formatting-highlight {
  background-image: none;
}