vuepress-theme-medium/styles/code.styl

Medium-Like blog theme for VuePress

{$contentClass} {
  code {
    color: lighten($textColor, 20%);
    padding: 0.1rem 0.4rem;
    margin: 0.1rem;
    font-size: 0.85em;
    border-radius: 15px;

    .token {
      &.deleted {
        color: #EC5975;
      }

      &.inserted {
        color: $accentColor;
      }
    }
  }
}

{$contentClass} {
  pre, pre[class*='language-'] {
    line-height: 1.4;
    padding: 1rem;
    margin: 2rem 0;
    background-color: $codeBgColor;
    border-radius: 6px;
    overflow: auto;

    code {
      color: #333;
      text-shadow: none;
      padding: 0;
      background-color: transparent;
      border-radius: 0;
    }
  }
}

div[class*='language-'] {
  position: relative;
  background-color: $codeBgColor;
  border-radius: 6px;

  .highlight-lines {
    user-select: none;
    padding-top: 1.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;

    .highlighted {
      background-color: rgba(0, 0, 0, 66%);
    }
  }

  pre, pre[class*='language-'] {
    background: transparent;
    position: relative;
    z-index: 1;
  }

  &::before {
    position: absolute;
    z-index: 3;
    top: 0.8em;
    right: 1em;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
  }

  &:not(.line-numbers-mode) {
    .line-numbers-wrapper {
      display: none;
    }
  }

  &.line-numbers-mode {
    .highlight-lines .highlighted {
      position: relative;

      &:before {
        content: ' ';
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        display: block;
        width: $lineNumbersWrapperWidth;
        height: 100%;
        background-color: rgba(0, 0, 0, 66%);
      }
    }

    pre {
      padding-left: ($lineNumbersWrapperWidth + 1)rem;
      vertical-align: middle;
    }

    .line-numbers-wrapper {
      position: absolute;
      top: 0;
      width: $lineNumbersWrapperWidth;
      text-align: center;
      color: rgba(255, 255, 255, 0.3);
      padding: 1.25rem 0;
      line-height: 1.4;

      br {
        user-select: none;
      }

      .line-number {
        position: relative;
        z-index: 4;
        user-select: none;
        font-size: 0.85em;
      }
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: $lineNumbersWrapperWidth;
      height: 100%;
      border-radius: 6px 0 0 6px;
      border-right: 1px solid rgba(0, 0, 0, 66%);
      background-color: $codeBgColor;
    }
  }
}

for lang in $codeLang {
  div{'[class~="language-' + lang + '"]'} {
    &:before {
      content: '' + lang;
    }
  }
}

div[class~='language-javascript'] {
  &:before {
    content: 'js';
  }
}

div[class~='language-typescript'] {
  &:before {
    content: 'ts';
  }
}

div[class~='language-markup'] {
  &:before {
    content: 'html';
  }
}

div[class~='language-markdown'] {
  &:before {
    content: 'md';
  }
}

div[class~='language-json']:before {
  content: 'json';
}

div[class~='language-ruby']:before {
  content: 'rb';
}

div[class~='language-python']:before {
  content: 'py';
}

div[class~='language-bash']:before {
  content: 'sh';
}

div[class~='language-php']:before {
  content: 'php';
}