modification on realistic highlight

[1C0D]

I did a modification to have the same result in edit mode and direct view and in source mode, the equal are not highlighted (the color pink was modified too)

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

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

.markdown-preview-view mark,
.cm-s-obsidian span.cm-highlight {
  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;

}

[1C0D]

tell me what do you think about it. if it's ok I will do a pull request

[deathau]

Looks good to me. Open a PR and I'll put it in 👍

[1C0D]

new version

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-purple-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;
}

can be used like this

<mark class='blue'>blue</mark>
<mark class='pink'>pink</mark>
<mark class='purple'>purple</mark>
<mark class='yellow'>yellow</mark>
<mark class='coral'>coral</mark>
<mark class='green'>green</mark>
==default==