prism.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');

pre[class*='language-'] {
  font-size: 12px;
  font-family: 'Fira Code', monospace;
  color: theme('colors.zinc.50');
  margin-top: 0rem !important;
  border-width: 1px;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-color: theme('colors.neutral.700');
}

.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.selector.class,
.token.function {
  color: theme('colors.pink.400');
}

.token.attr-name,
.token.keyword,
.token.rule,
.token.pseudo-class,
.token.important {
  color: theme('colors.blue.300');
}

.token.module {
  color: theme('colors.purple.300');
}

.token.attr-value {
  color: theme('colors.blue.300');
}

.token.string {
  color: theme('colors.orange.300');
}

.token.class {
  color: theme('colors.teal.300');
}

.token.punctuation,
.token.attr-equals {
  color: theme('colors.zinc.500');
}

.token.unit,
.language-css .token.function {
  color: theme('colors.sky.200');
}

.token.comment {
  color: theme('colors.emerald.400');
  opacity: 0.7;
}

.token.property,
.token.operator,
.token.combinator {
  color: theme('colors.zinc.400');
}

.code-highlight {
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

.code-line {
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 4px solid rgba(0, 0, 0, 0); /* Set placeholder for highlight accent border color to transparent */
  line-height: 1.5rem;
}

.code-line.inserted {
  background-color: theme(
    'colors.emerald.900'
  ); /* Set inserted line (+) color */
}

.code-line.deleted {
  background-color: theme('colors.red.900'); /* Set deleted line (-) color */
}

.highlight-line {
  margin-left: -14px;
  margin-right: -16px;
  background-color: theme('colors.zinc.800'); /* Set highlight bg color */
  border-left: 2px solid theme('colors.amber.400'); /* Set highlight accent border color */
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  margin-left: -8px;
  color: theme('colors.zinc.500');
  content: attr(line);
}

.rehype-code-title {
  margin: 0 !important;
  display: inline-flex;
  position: relative;
  top: 1rem;
  left: 2rem;
  background: theme('colors.zinc.900');
  color: theme('colors.zinc.100');
  font-family: theme('fontFamily.mono');
  padding: 0.25rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border-top: 4px solid theme('colors.indigo.600');
  font-size: 0.8rem;
}