supabase/apps/docs/styles/code-block.css

@utility code-line-number {
  @apply select-none text-right text-muted/70 pl-3 pr-2 min-h-5 leading-5;
  @apply bg-[var(--row-rest)] sticky left-0 z-10;
  @apply group-hover/row:text-muted group-hover/row:bg-[var(--row-hover)];
  @apply after:pointer-events-none after:absolute after:inset-y-0 after:left-full after:w-4;
  @apply [--gutter-fade:var(--row-rest)] group-hover/row:[--gutter-fade:var(--row-hover)];
  @apply after:bg-[image:linear-gradient(to_right,var(--gutter-fade)_0%,color-mix(in_srgb,var(--gutter-fade)_85%,transparent)_25%,color-mix(in_srgb,var(--gutter-fade)_50%,transparent)_50%,color-mix(in_srgb,var(--gutter-fade)_15%,transparent)_75%,transparent_100%)];
}

@utility code-line-content {
  @apply min-h-5 leading-5 pl-3 pr-18 group-hover/row:bg-[var(--row-hover)];
}

/* Code blocks need margin applied when in content container */
.prose :where(.shiki, .shiki-wrapper):where(:not(.shiki-wrapper *)) {
  margin-block: 2rem;
}

/* Code block theme colors for use with Supabase Theme */
[data-theme='dark'],
.dark {
  --code-token-keyword: #bda4ff;
  --code-foreground: #ffffff;
  --code-token-constant: #3ecf8e;
  --code-token-string: #ffcda1;
  --code-token-comment: #949494;
  --code-token-parameter: #ffffff;
  --code-token-function: #3ecf8e;
  --code-token-string-expression: #ffcda1;
  --code-token-punctuation: #ffffff;
  --code-token-link: #ffffff;
  --code-token-number: #ffffff;
  --code-token-property: #3ecf8e;
  --code-token-variable: var(--code-foreground);
  --code-highlight-color: #232323;
  --shadow-codeblock:
    0 0 0 0 var(--border-default), 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --drop-shadow-codeblock: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
[data-theme='light'],
.light {
  --code-token-keyword: #5f2fc4;
  --code-foreground: oklch(from var(--foreground-light) l c h / 1);
  --code-token-constant: #15593b;
  --code-token-string: #9a5200;
  --code-token-comment: #6a6a6a;
  --code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
  --code-token-function: #15593b;
  --code-token-string-expression: #9a5200;
  --code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
  --code-token-link: oklch(from var(--foreground-light) l c h / 1);
  --code-token-number: oklch(from var(--foreground-light) l c h / 1);
  --code-token-property: #15593b;
  --code-token-variable: var(--code-foreground);
  --code-highlight-color: #1c1c1c;
}

/* Token classes emitted by CodeBlock.utils.ts */
.shiki .s-f {
  color: var(--code-foreground);
}
.shiki .s-c {
  color: var(--code-token-comment);
}
.shiki .s-n {
  color: var(--code-token-constant);
}
.shiki .s-u {
  color: var(--code-token-function);
}
.shiki .s-k {
  color: var(--code-token-keyword);
}
.shiki .s-a {
  color: var(--code-token-parameter);
}
.shiki .s-r {
  color: var(--code-token-property);
}
.shiki .s-p {
  color: var(--code-token-punctuation);
}
.shiki .s-s {
  color: var(--code-token-string);
}
.shiki .s-e {
  color: var(--code-token-string-expression);
}
.shiki .s-v {
  color: var(--code-token-variable);
}
.shiki .s-i {
  font-style: italic;
}
.shiki .s-b {
  font-weight: bold;
}
.shiki .s-l {
  text-decoration: underline;
}

/* Word wrap styles for code blocks */
.shiki[data-wrapped='true'] .code-scroll {
  overflow-x: hidden !important;
}

.shiki[data-wrapped='true'] .code-content {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

.shadow-codeblock {
  box-shadow: var(--shadow-codeblock, none);
}

.shiki-wrapper {
  --tab-flare-ring:
    transparent 6.75px, var(--border-color-default) 7.25px, var(--border-color-default) 7.75px,
    transparent 8.25px;
  --tab-flare-fill: transparent 6.75px, var(--background-color-200) 7.25px;
  --tab-flare-left:
    radial-gradient(circle at 0 0, var(--tab-flare-ring)),
    radial-gradient(circle at 0 0, var(--tab-flare-fill));
  --tab-flare-right:
    radial-gradient(circle at 100% 0, var(--tab-flare-ring)),
    radial-gradient(circle at 100% 0, var(--tab-flare-fill));
}

.codeblock-drop-shadow {
  filter: var(--drop-shadow-codeblock, none);
}

.code-sample-source :is(.shiki, .code-sample-surface) {
  mask:
    linear-gradient(#000 0 0),
    var(--source-notch-mask) right -2px bottom -2px / var(--source-notch-mask-width) 42px no-repeat;
  mask-composite: exclude;
  mask-clip: no-clip;
}