style.css

.shiki {
  position: relative;
  background-color: #f9f9f9 !important;
  padding: 14px 0 !important;
}

.shiki code {
  display: block;
  min-width: 100%;
  width: -webkit-fit-content;
  width: fit-content;
}

.shiki .line {
  display: inline-block;
  width: 100%;
  padding: 0 20px;
}

.shiki .diff.remove {
  background-color: rgba(244, 63, 94, .15) !important;
  opacity: 0.7;
}

.shiki .diff.remove::before {
  content: '-';
  color: #b34e52;
}

.shiki .diff::before {
  position: absolute;
  left: 4px;
}

.shiki .diff.add {
  background-color: rgba(16, 185, 129, .15) !important;
}

.shiki .diff.add::before {
  content: '+';
  color: #18794e;
}

.shiki .highlighted {
  background-color: rgba(142, 150, 170, .14);
}

.shiki .highlighted-word {
  padding: 1px 3px;
  margin: -1px -3px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.shiki.has-focused .line {
  filter: blur(.095rem);
  opacity: 0.7;
  transition: filter .35s, opacity .35s;
}

.shiki.has-focused .line.focused,
.shiki.has-focused:hover .line {
  filter: blur(0);
  opacity: 1;
}

html.dark .shiki {
  background-color: var(--shiki-dark-bg) !important;
}

html.dark .shiki span {
  color: var(--shiki-dark) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

html.dark .shiki .highlighted-word {
  border-color: #6b7280;
}

@media (prefers-color-scheme: dark) {

  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}