fumadocs-ui/css/lib/shiki.css

The Radix UI version of Fumadocs UI

.shiki:not(.not-fumadocs-codeblock *) {
  --padding-left: calc(var(--spacing) * 4);
  --padding-right: calc(var(--spacing) * 4);

  code span {
    color: var(--shiki-light);
    font-style: var(--shiki-light-font-style);
  }

  .line {
    position: relative;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
  }

  .line:empty {
    height: 1lh;
  }

  &.has-focused .line:not(.focused) {
    filter: blur(2px);
    transition: filter 200ms;
  }

  &.has-focused:hover .line:not(.focused) {
    filter: blur(0);
  }

  .diff::before {
    position: absolute;
    left: calc(var(--spacing) * 1.5);
  }

  .diff.remove {
    opacity: 0.7;
    --fd-counter-color: var(--color-fd-diff-remove-symbol);
    @apply bg-fd-diff-remove;
  }

  .diff.remove::before {
    content: '-';
    @apply text-fd-diff-remove-symbol;
  }

  .diff.add {
    --fd-counter-color: var(--color-fd-diff-add-symbol);
    @apply bg-fd-diff-add;
  }

  .diff.add::before {
    content: '+';
    @apply text-fd-diff-add-symbol;
  }

  .highlighted {
    --fd-counter-color: var(--color-fd-primary);
    @apply bg-fd-primary/10;
  }

  .highlighted::after {
    position: absolute;
    content: '';
    @apply inset-y-0 left-0 border-l-2 border-fd-primary/50;
  }

  .highlighted-word {
    padding: 1px;
    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
  }

  &[data-line-numbers] .twoslash-meta-line {
    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
  }

  &[data-line-numbers] .line {
    counter-increment: line;
    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
  }

  &[data-line-numbers] .line::after {
    position: absolute;
    content: counter(line);
    color: color-mix(
      in oklab,
      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
      transparent
    );
    @apply inset-y-0 left-0 w-7 text-right;
  }
}

.dark .shiki:not(.not-fumadocs-codeblock *) {
  code span {
    color: var(--shiki-dark);
    font-style: var(--shiki-dark-font-style);
  }
}

/* inline code */
code.shiki:not(.not-fumadocs-code *) span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
}

.dark code.shiki:not(.not-fumadocs-code *) span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
}