hexo-theme-butterfly/source/css/_highlight/highlight.styl

// https://github.com/equinusocio/vsc-material-theme
@require 'theme'
@require 'diff'

wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')

$code-block
  overflow: auto
  margin: 0 0 1rem
  padding: 0
  background: $highlight-background
  color: $highlight-foreground
  line-height: $line-height-code-block

  if wordWrap
    counter-reset: line
    white-space: pre-wrap

.code-area-wrap
  position: relative
  margin: 0 0 1rem

figure.highlight
  position: relative

blockquote
  margin: 0 0 1rem
  padding: .1rem .8rem
  border-left: .2rem solid $blockquote-padding-color
  background-color: $blockquote-background-color
  color: $blockquote-color

  a
    word-break: break-all

  p
    margin: 0 !important
    padding: .5rem 0

  footer
    padding: 0 0 .5rem

    cite
      &:before
        padding: 0 .3em
        content: '—'

#article-container
  pre,
  code
    font-family: $code-font !important

  code
    padding: .1rem .2rem
    background: $code-background
    color: $code-foreground
    word-wrap: break-word
    word-break: break-word
    overflow-wrap: break-word

  pre
    @extend $code-block
    padding: 10px 20px

    code
      padding: 0
      background: none
      color: $highlight-foreground
      text-shadow: none

  figure.highlight
    @extend $code-block
    position: relative
    border-radius: 1px

    if hexo-config('highlight_shrink') == true
      display: none

    pre
      margin: 0
      padding: 8px 0
      border: none

    .line
      &::selection
        background: $highlight-selection
        color: $highlight-foreground

      if wordWrap
        &:before
          display: inline-block
          padding: 0 .3rem 0 0
          min-width: 1.6rem
          color: $highlight-gutter.color
          content: counter(line)
          counter-increment: line
          text-align: left

      &.marked
        background-color: $highlight-selection

    table
      position: relative
      display: table
      margin: 0
      width: auto
      border: none

    td
      padding: 0
      border: none

    figcaption
      clearfix()
      padding: .3rem 0 .1rem .7rem
      color: $highlight-foreground
      font-size: 1em
      line-height: 1em

      a
        float: right
        padding-right: 10px
        color: $highlight-foreground

        &:hover
          border-bottom-color: $highlight-foreground

    .gutter pre
      padding-right: .5rem
      padding-left: .5rem
      background-color: $highlight-gutter.bg-color
      color: $highlight-gutter.color
      text-align: right

    .code pre
      padding-right: .5rem
      padding-left: .5rem
      width: 100%
      background-color: $highlight-background

    .line
      height: 1rem

  .gutter
    user-select: none
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none

  .gist table
    width: auto

    td
      border: none

  // For diff highlight
  pre .deletion
    background: $highlight-deletion

  pre .addition
    background: $highlight-addition

  pre .meta
    color: $highlight-purple

  pre
    .comment
      color: $highlight-comment

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .variable,
    .attribute,
    .regexp,
    .ruby .constant,
    .xml .tag .title,
    .xml .pi,
    .xml .doctype,
    .html .doctype,
    .css .id,
    .tag .name,
    .css .class,
    .css .pseudo
      color: $highlight-red

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .tag
      color: $highlight-aqua

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .number,
    .preprocessor,
    .literal,
    .params,
    .constant,
    .command
      color: $highlight-orange

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .built_in
      color: $highlight-yellow

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .ruby .class .title,
    .css .rules .attribute,
    .string,
    .value,
    .inheritance,
    .header,
    .ruby .symbol,
    .xml .cdata,
    .special,
    .number,
    .formula
      color: $highlight-green

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .keyword,
    .title,
    .css .hexcolor
      color: $highlight-aqua

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .function,
    .python .decorator,
    .python .title,
    .ruby .function .title,
    .ruby .title .keyword,
    .perl .sub,
    .javascript .title,
    .coffeescript .title
      color: $highlight-blue

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

    .tag .attr,
    .javascript .function
      color: $highlight-purple

      &::selection
        background: $highlight-selection
        color: $highlight-foreground

.highlight-tools
  position: relative
  overflow: hidden
  width: 100%
  height: 1.4rem
  background: darken($highlight-background, 5)
  color: $highlight-foreground
  font-size: 14px