vuepress-theme-plume/lib/client/styles/mark.css

A Blog&Document Theme for VuePress 2.0

/**
 * Mark
 * -------------------------------------------------------------------------- */
mark {
  --vp-mark-text: currentcolor;
  --vp-mark-bg: transparent;
  --vp-mark-bg-shift: 0.55lh;
  --vp-mark-linear-color: var(--vp-c-brand-3);
  --vp-mark-bg-image: linear-gradient(to right, var(--vp-mark-linear-color) 50%, transparent 50%);

  padding: 2px;
  color: var(--vp-mark-text);
  background-color: var(--vp-mark-bg);
  background-image: var(--vp-mark-bg-image);
  background-repeat: no-repeat;
  background-position: 100% var(--vp-mark-bg-shift);
  background-size: 200%;
  animation: var(--vp-mark-animation, mark-highlight 1.5s 0.5s forwards);
}

mark:where(.note) {
  --vp-mark-linear-color: #ff0;
}

mark:where(.info) {
  --vp-mark-linear-color: var(--vp-c-default-1);
}

mark:where(.tip) {
  --vp-mark-linear-color: #39ff14;
}

mark:where(.warning) {
  --vp-mark-linear-color: #fc0;
}

mark:where(.caution, .danger) {
  --vp-mark-linear-color: #f99;
}

mark:where(.important) {
  --vp-mark-linear-color: #ccf;
}

:not(h1,h2,h3,h4,h5,h6) mark {
  font-weight: 500;
}

[data-theme="dark"] mark:where(.note) {
  --vp-mark-linear-color: #660;
}

[data-theme="dark"] mark:where(.tip) {
  --vp-mark-linear-color: #063;
}

[data-theme="dark"] mark:where(.warning) {
  --vp-mark-linear-color: #c60;
}

[data-theme="dark"] mark:where(.caution, .danger) {
  --vp-mark-linear-color: #c66;
}

[data-theme="dark"] mark:where(.important) {
  --vp-mark-linear-color: #66c;
}

[data-mark-mode="lazy"] mark {
  --vp-mark-animation: none;
}

[data-mark-mode="lazy"] mark.vp-mark-visible {
  animation: mark-highlight 1.5s 0.2s forwards;
}

@keyframes mark-highlight {
  0% {
    color: inherit;
    background-position: 100% var(--vp-mark-bg-shift);
  }

  100% {
    color: currentcolor;
    background-position: 0 var(--vp-mark-bg-shift);
  }
}