@rtdui/tailwind-plugin/src/shiki-dual-themes.css

tailwind plugin for Rtdui components

/****** shiki语法高亮 明暗主题 ******/
@media (prefers-color-scheme: dark) {
  .shiki {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    span:not(.line) {
      color: var(--shiki-dark) !important;
    }
    .line.line.diff.remove {
      background-color: var(--color-red-800);
    }
    .line.line.diff.add {
      background-color: var(--color-green-700);
    }
    .line.line.highlighted.warning {
      background-color: var(--color-yellow-700);
    }
    .line.line.highlighted.error {
      background-color: var(--color-red-800);
    }
  }
}

[data-theme="dark"] {
  .shiki {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    span:not(.line) {
      color: var(--shiki-dark) !important;
    }
    .line.line.diff.remove {
      background-color: var(--color-red-800);
    }
    .line.line.diff.add {
      background-color: var(--color-green-700);
    }
    .line.line.highlighted.warning {
      background-color: var(--color-yellow-700);
    }
    .line.line.highlighted.error {
      background-color: var(--color-red-800);
    }
  }
}

pre.shiki {
  padding: 24px 0;
  margin-bottom: 8px;
  position: relative;
  line-height: 20px;
  &::before {
    content: attr(data-language);
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 0.25rem;
    background-color: var(--color-base-300);
    color: var(--color-gray-500);
  }
  code {
    display: block;
    padding: 0 24px;
    .line {
      display: block;
      min-height: 20px;
      &::before {
        position: absolute;
        left: 8px;
      }
    }
  }
  /* 高亮行 */
  &.has-highlighted {
    .line.highlighted {
      transition: background-color 0.5s;
      margin: 0 -24px;
      padding: 0 24px;
      /* width: calc(100% + 48px); */
      background-color: var(--color-base-300);
      /* 错误级别 */
      &.warning {
        background-color: var(--color-yellow-200);
        /* opacity: 0.9; */
      }
      &.error {
        background-color: var(--color-red-300);
        /* opacity: 0.9; */
      }
    }
  }
  /* 焦点行 */
  &.has-focused {
    .line:not(.focused) {
      filter: blur(0.095rem);
    }
    &:hover {
      .line:not(.focused) {
        filter: blur(0);
      }
    }
  }
  /* 差异行 */
  &.has-diff {
    .line.diff {
      transition: background-color 0.5s;
      margin: 0 -24px;
      padding: 0 24px;
      /* width: calc(100% + 48px); */
      &.remove {
        background-color: var(--color-red-100);
        user-select: none;
        &::before {
          content: "-";
          color: var(--color-red-500);
        }
      }
      &.add {
        background-color: var(--color-green-200);
        &::before {
          content: "+";
          color: var(--color-green-600);
        }
      }
    }
  }
  /* 行号 */
  &.has-line-number {
    code {
      counter-reset: row_number;
      .line {
        margin: 0 -24px;
        padding: 0 24px 0 56px;
        /* width: calc(100% + 48px); */
        &::before {
          content: counter(row_number);
          counter-increment: row_number;
          /* width: 1rem;
        text-align: right; */
          color: var(--color-gray-500);
          margin-right: 1em;
        }
        &.highlighted,
        &.diff {
          padding-left: 56px;
        }
        &.diff.remove {
          &::before {
            content: counter(row_number) " -";
          }
        }
        &.diff.add {
          &::before {
            content: counter(row_number) " +";
          }
        }
      }
    }
  }
  /* 词高亮 */
  .highlighted-word {
    background-color: var(--color-base-300);
    /* border: 1px solid var(--color-base-300); */
    padding: 1px 3px;
    margin: -1px -2px;
    border-radius: 4px;
  }
}