blog/src/styles/_code.scss

@import 'variables';

code,
kbd,
pre,
samp {
  font-family: $font-family-monospace;
  font-size: $font-size-small;
}

code,
kbd {
  padding: 0.2rem 0.3rem;
}

code,
samp {
  white-space: normal;
  color: inherit;
  background-color: $brand-grey-dimmed;
  border-radius: $border-radius;

  :global(.dark) & {
    background-color: rgba($code-bg, 0.7);
  }
}

kbd {
  color: $kbd-color;
  background-color: $kbd-bg;
  border-radius: $border-radius;
  border: 1px solid $kbd-bg;
  box-shadow: inset 0 1px 0 rgba(#fff, 0.4);
  padding: 0.15rem 0.4rem;
}

pre {
  @include breakoutviewport;

  position: relative;
  display: block;
  padding: 0;
  margin-bottom: $spacer;
  line-height: $line-height;
  color: $code-color;
  background-color: $code-bg;
  border-radius: $border-radius;

  // overwrite Nord theme background color
  &,
  &:global(.nord) {
    background-color: $code-bg;
  }

  // make 'em scrollable
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 800px;

  // stylelint-disable no-descending-specificity
  code {
    padding: $spacer $spacer / 2;
    white-space: pre;
    display: block;
    color: inherit;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;

    &,
    :global(.dark) & {
      background: none;
    }

    @media (min-width: $screen-sm) {
      padding: $spacer;
    }
  }

  &::-webkit-scrollbar {
    width: 0.35rem;
    height: 0.35rem;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba($brand-main, 0.8);
    border-radius: $border-radius;
  }

  &::-webkit-scrollbar-track {
    background: rgba($brand-main, 0.2);
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
  // stylelint-enable no-descending-specificity
}

pre[data-language]::before {
  background: $brand-grey;
  border-radius: 0 0 $border-radius $border-radius;
  color: $brand-grey-dimmed;
  font-size: $font-size-mini;
  font-family: $font-family-base;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  position: absolute;
  right: $spacer / 2;
  top: 0;
}

pre[data-language='js']::before {
  content: 'js';
}

pre[data-language='bash'] {
  &::before {
    content: 'bash';
  }

  .grvsc-line:only-child {
    padding-left: 0.5rem;
    display: block;

    &::before {
      content: '$';
      opacity: 0.5;
      display: inline-block;
      margin-left: -0.5rem;
      margin-right: 0.5rem;
    }
  }
}

pre[data-language='html']::before {
  content: 'html';
}

pre[data-language='css']::before {
  content: 'css';
}

pre[data-language='php']::before {
  content: 'php';
}